How to manually customise google cse results in your website

How to manually customise google cse results in your website?

Google custom search engine is very powerful tool for your blog or website. it's like google search engine and use for your website search or only for particular page. I've been using google custom search engine about one year.

If you're using Google Custom Search already in your blog or website,  you can customise your google search results with using of custom css code and change your google search layout.

Google Custom Search

Google Custom Search makes your website more  searchable using this tool like main Google.com search engine.You can go to google.com/cse page and add new search engine for your website or blog.It's simple piece of javascript code to add your blogger or wordpress template and visitors will be able easily find content they are looking for on your blog/website.

Google Custom Search with Custom CSS Styles

If you have used custom search engine function on Digitalhubinc.com , you may notice that the search results are styled slightly different – there’s no URL displayed beneath the titles, the matching keywords aren’t highlighted in bold and the pagination numbers are displayed as square buttons.

I searched on this topic on google search engine and but no more results finds on this topic. Some ofiicial topic finds on google search results- Custom Search with Style like Peanut Butter with Jelly and got detailed information about Custom search engine css style with this Official CSE CSS file - CSS FILE. You want more modification in your search engine, you can use this resource handle this work.

If your're already work with css and then easily customise these css codes. You can edit you code on any text editer tool [Most preferable text editer : Notepad++] and handle with simple CSS rules. You can easily see below screenshots and As annotated in the above screenshot, every element in the search results page has a class associated with it. You can use set the style for a class as display:none to hide a particular element or use the regular font, color, border properties to stylize that element.

display:none - If you don't want to show any particular element in your search engine then use this piece of code.
font-family - you can easily change the font family like : times new roman , Georgia , helvetica , courier.
font-size - Customise .gs-title ,  .gs-snippet and .gsc-url class with font-size.

Also you can customise color , background , border , padding and margin according to you.

Here are some more CSS rules that you may use to style your Custom Search engine.

Custom Style Code for CSE

<style type="css/text">

    /* customise control-cse for custom search results */
   .gsc-control-cse{
    padding:0 !important;border:none !important
    }
    /* customise header result for custom search results */
   .gsc-resultsheader,.gs-no-results-result  {
    display:none;
    }
    /* use a different font family for search results */
    .gs-title, .gs-snippet {
        font-family: georgia,'helvetica';
    }
  
    /* add a border between individual search results */
    .gs-webresult {
        border: 1px solid #eee;
        padding: 1em;
    }
  
    /* do no display the count of search results */  
    .gsc-result-info {
        display: none;
    }
  
    /* hide the google branding in search results */
    .gcsc-branding {
        display: none;
    }
  
    /* hide the thumbnail images in search results */
    .gsc-thumbnail {
        display: none;
    }
  
    /* hide the snippets in google search results */
    .gs-snippet {
        display: none;
    }
  
    /* change the font size of the title of search results */
    .gs-title a {
        font-size: 16px;
    }
  
    /* change the font size of snippets inside search results */
    .gs-snippet {
        font-size: 14px;
    }
  
    /* google custom search highlights matching words in bold, toggle that */
    .gs-title b, .gs-snippet b {
        font-weight: normal;
    }
  
    /* do no display the url of web pages in search results */
    .gsc-url-top, .gsc-url-bottom {
        display: none;
    }
  
    .gsc-cursor-box{
    diaplay:none;
    }
   .gs-result a.gs-visibleUrl, .gs-result .gs-visibleUrl {
    color: #0052FF;
    text-decoration: none;
}
    /* highlight the pagination buttons at the bottom of search results */
    .gsc-cursor-page {
        font-size: 1.5em;
        padding: 4px 8px;
        border: 2px solid #ccc;
    }
  
    </style>

Yo can easily play with css code of custom search engine but have the permission to change the default look and feel from the Custom Search editor.

CSS Code use my blog

<style type='text/css'>
.gsc-control-cse{padding:0 !important;border:none !important}
.gsc-resultsHeader,.gs-no-results-result,.gcsc-branding,.gsc-result-info,.gsc-branding{display:none}
.gsc-cursor-page{font-size:1.3em;line-height:2.1em;background-color:#000!important;padding:5px 10px;color:#fff !important;font-family: &quot;Oxygen&quot;,Georgia,serif; font-weight: 100;}
.gsc-cursor-box{padding:1em 0;border-top:1px solid #eee !important;border-bottom:2px solid #eee !important;margin:1em 0 3em !important;text-align:center !important}
.gsc-url-top{display:none !important}
.gs-webResult .gs-title a.gs-title b,.gs-webResult .gs-snippet b{font-weight:normal}
</style>

Also use Different Style Page Navigation Button 

Reaplace with .gsc-cursor-page  and .gsc-cursor-box  class Code :

Code 1 : 

.gsc-cursor-page{font-size:1.3em;line-height:2.1em;background-color:#000 !important;padding:5px 10px;color:#fff !important;border-radius:40px;box-shadow:1px 1px 1px rgba(0,0,0,0.4);}

.gsc-cursor-box{ background-color:#000; padding:1em 0;border-top:1px solid #eee !important;border-bottom:2px solid #eee !important;margin:1em 0 3em !important;text-align:center !important;}

Code 2 :

.gsc-cursor-page{font-size:1.3em;line-height:2.1em;background-color:#000 !important;padding:5px 10px;color:#fff !important;border-radius:0px;box-shadow:1px 1px 1px rgba(0,0,0,0.4);}

.gsc-cursor-box{ background-color:#000; padding:1em 0;border-top:1px solid #eee !important;border-bottom:2px solid #eee !important;margin:1em 0 3em !important;text-align:center !important;}

Code 3 :

.gsc-cursor-page{font-size:1.3em;line-height:2.1em;padding:5px 10px;color:#000 !important;}

.gsc-cursor-box{padding:1em 0;border-top:1px solid #eee !important;border-bottom:2px solid #eee !important;margin:1em 0 3em !important;text-align:center !important;}

How to add css code in your Blogger blog : 
Go to your blogger template editer : Blogger Dashboard>>Template>>edit html and find </head> tag & place above first style code before </head> tag.

How To add css code in your Wordpress blog :

If you're using Wordpress Platform then here’s the complete code, just replace “SEARCH-ENGINE-ID” with yours and copy-paste CSS code above just after the SCRIPT tags. I have used PHP code below to collect the $_GET variable, any “keyword” will be captured and executed by the search page.

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>My Search</title>
<script src="http://www.google.com/jsapi" type="text/javascript"></script>
<script type="text/javascript">
  google.load('search', '1', {language : 'en', style : google.loader.themes.V2_DEFAULT});
  google.setOnLoadCallback(function() {
    var customSearchOptions = {};  var customSearchControl = new google.search.CustomSearchControl(
      'SEARCH-ENGINE-ID', customSearchOptions);
    customSearchControl.setResultSetSize(google.search.Search.FILTERED_CSE_RESULTSET);
     customSearchControl.setLinkTarget(google.search.Search.LINK_TARGET_SELF);
    customSearchControl.draw('cse');
<?php $qu = (isset($_GET["q"]))?$_GET["q"]:'PHP'; ?> // php $_GET to capture the search keyword
    customSearchControl.execute('<?php echo $qu; ?>');
    function parseParamsFromUrl() {
      var params = {};
      var parts = window.location.search.substr(1).split('\x26');
      for (var i = 0; i < parts.length; i++) {
        var keyValuePair = parts[i].split('=');
        var key = decodeURIComponent(keyValuePair[0]);
        params[key] = keyValuePair[1] ?
            decodeURIComponent(keyValuePair[1].replace(/\+/g, ' ')) :
            keyValuePair[1];
      }
      return params;
    }
    var urlParams = parseParamsFromUrl();
    var queryParamName = "q";
    if (urlParams[queryParamName]) {
      customSearchControl.execute(urlParams[queryParamName]);
    }
  }, true);
</script>
<style type="text/css">
.gsc-result-info {}
.gs-result .gs-title, .gs-result .gs-title *{}
.gs-result a.gs-visibleUrl, .gs-result .gs-visibleUrl {}
.gs-result .gs-snippet {}
.gsc-results .gsc-cursor-box .gsc-cursor-page {}
</style>
</head>
<body>
<div id="cse" style="width: 100%;min-height:800px;">Loading</div>
</body>
</html>

Thanks for reading!

If you like this article , please share on social media and drop your valuable comment.