How To Create Google Custom Search Engine On Blogger?

I have search over the internet a lot to create a Google custom search engine but I can't get it easily. Here I shared for you, how to create Google custom search engine on Blogger very easily?

Google Custom Search Engine  On Blogger

1. Go to Blogger Dashboard and Click Layout
2. Click Add a Gadget
3. Choose HTML/Javascript :
 
4. Now copy this Code below and paste it there:

<div id="cse" style="width: 100%;">Loading</div>
<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.GREENSKY});
google.setOnLoadCallback(function() { var customSearchOptions = {};
var customSearchControl = new google.search.CustomSearchControl(  '010071527245141522747:gvqr4ftlmpe', customSearchOptions);
customSearchControl.setResultSetSize(google.search.Search.FILTERED_CSE_RESULTSET); 
customSearchControl.draw('cse');   }, true); 
</script>
<style type="text/css">
 .gsc-control-cse{font-family:"Trebuchet MS",sans-serif;border-color:#E1F3DA;background-color:#E1F3DA}
 .gsc-control-cse .gsc-table-result{font-family:"Trebuchet MS",sans-serif}
 input.gsc-input{border-color:#94CC7A}input.gsc-search-button{border-color:#94CC7A;background-color:#B5C9AB}
 .gsc-tabHeader.gsc-tabhInactive{border-color:#A9DA92;background-color:#FFF}
 .gsc-tabHeader.gsc-tabhActive{border-color:#A9DA92;background-color:#B5C9AB}
 .gsc-tabsArea{border-color:#A9DA92}
 .gsc-webResult.gsc-result,.gsc-results .gsc-imageResult{border-color:#A9DA92;background-color:#FFF}
 .gsc-webResult.gsc-result:hover,.gsc-imageResult:hover{border-color:#A9DA92;background-color:#FFF}
 .gsc-webResult.gsc-result.gsc-promotion:hover{border-color:#A9DA92;background-color:#FFF}
 .gs-webResult.gs-result a.gs-title:link,.gs-webResult.gs-result a.gs-title:link b,.gs-imageResult a.gs-title:link,.gs-imageResult a.gs-title:link b{color:#06C}
 .gs-webResult.gs-result a.gs-title:visited,.gs-webResult.gs-result a.gs-title:visited b,.gs-imageResult a.gs-title:visited,.gs-imageResult a.gs-title:visited b{color:#06C}
 .gs-webResult.gs-result a.gs-title:hover,.gs-webResult.gs-result a.gs-title:hover b,.gs-imageResult a.gs-title:hover,.gs-imageResult a.gs-title:hover b{color:#06C}
 .gs-webResult.gs-result a.gs-title:active,.gs-webResult.gs-result a.gs-title:active b,.gs-imageResult a.gs-title:active,.gs-imageResult a.gs-title:active b{color:#06C}
 .gsc-cursor-page{color:#06C}a.gsc-trailing-more-results:link{color:#06C}.gs-webResult .gs-snippet,.gs-imageResult .gs-snippet,.gs-fileFormatType{color:#454545}
 .gs-webResult div.gs-visibleUrl,.gs-imageResult div.gs-visibleUrl{color:#815FA7}
 .gs-webResult div.gs-visibleUrl-short{color:#815FA7}.gs-webResult div.gs-visibleUrl-short{display:none}
 .gs-webResult div.gs-visibleUrl-long{display:block}.gs-promotion div.gs-visibleUrl-short{display:none}
 .gs-promotion div.gs-visibleUrl-long{display:block}.gsc-cursor-box{border-color:#A9DA92}
 .gsc-results .gsc-cursor-box .gsc-cursor-page{border-color:#A9DA92;background-color:#FFF;color:#06C}
 .gsc-results .gsc-cursor-box .gsc-cursor-current-page{border-color:#A9DA92;background-color:#B5C9AB;color:#06C}
 .gsc-webResult.gsc-result.gsc-promotion{border-color:#94CC7A;background-color:#CBE8B4}
 .gsc-completion-title{color:#06C}.gsc-completion-snippet{color:#454545}
 .gs-promotion a.gs-title:link,.gs-promotion a.gs-title:link *,.gs-promotion .gs-snippet a:link{color:#06C}
 .gs-promotion a.gs-title:visited,.gs-promotion a.gs-title:visited *,.gs-promotion .gs-snippet a:visited{color:#06C}
 .gs-promotion a.gs-title:hover,.gs-promotion a.gs-title:hover *,.gs-promotion .gs-snippet a:hover{color:#06C}
 .gs-promotion a.gs-title:active,.gs-promotion a.gs-title:active *,.gs-promotion .gs-snippet a:active{color:#06C}
 .gs-promotion .gs-snippet,.gs-promotion .gs-title .gs-promotion-title-right,.gs-promotion .gs-title .gs-promotion-title-right *{color:#454545}
 .gs-promotion .gs-visibleUrl,.gs-promotion .gs-visibleUrl-short{color:#815FA7}</style>

5. Click Save
6. Now reload your site and enjoy Google Custom Search Engine.

Don't Miss A Single Updates

✓Remember to check your email account to confirm your subscription.

Related Lessons