How To Add Beautiful Responsive Google Custom Search Bar In Blogger

 
Google Custom Search enables you to create a search engine for your website, your blog, or a collection of websites. You can configure your search engine to search both web pages and images.There are two main use cases for Custom Search - you can create a search engine that searches only the contents of one website (site search), or you can create one that focuses on a particular topic from multiple sites. 

With Google Custom Search, you can:

  • Create custom search engines that search across a specified collection of sites or pages 
  • Enable image search for your site 
  • Customize the look and feel of search results, including adding search-as-you-type autocompletions 
  • Leverage structured data on your site to customize search results 
  • Associate your search engine with your Google AdSense account, so you make money whenever users click ads on your search results pages.


How To Create Google Custom Search For Blogger :

  • Sign in to your Google account and go to Google Custom Search 
  • Once you entered into that page you will see a blue button “Create a custom search engine” click on that button. 
 How To Add Beautiful Responsive Google Custom Search Engine In Blogger
  • Now a page will open having  URL and language settings
  • Under the text box "site to search " add the URL of your Blogger Blog (i.e. www.pakl33t.com)
  • In the language drop down, select the language for your search engine then click on create button. 
 How To Add Beautiful Responsive Google Custom Search Engine In Blogger
  • Now a page will open congratulation message as shown in the below image and can see there are three buttons 
  • Get-code " which will give you code of search engine 
  • Public URL : it’s a URL of the search engine 
  • Control panel : Using this you can change the settings such as layout, color schemes, themes
 How To Add Beautiful Responsive Google Custom Search Engine In Blogger

How to Add Google Custom Search to Blogger :

  • Go to Blogger > Layout>> Add a Gadget >> Select HTML/JavaScript and paste the code which you copied from the "Get-Code" in the above step
  • And I suggest you to place the code in the top of the sidebar so that user can easily pick it up

2 1

Post a Comment

Followers