Add Google Custom Search Engine (CSE) Widget to Blogger



Blogger templates often have custom search boxes in it you might have noticed that that kind of custom search boxes are not capable to show the relevant results. The best solution is to use Google Custom Search Engines (CSE) that makes it 
easier for the readers/visitors to dig out the extremely important information they are looking for on your website/blog.


For adding this engine you don't have to add any CSS or jQuery Code. You do this by adding specific HTML markup to your website/blog. You just have to Copy and Paste the code. You can create customized layouts that spice up look and feel of your website. If any user type searches for any keyword then results appeared in seconds that is top feature of this widget.

Here I am going to show you how to add google custom search engine in to your website/Blog. Just follow the simple steps to add custom search engine into your website/blog.


How to Add Google Custom Search Engine to Blogger?
  1. Go To Google Custom search Engine

  1. Hit the Create custom search engine button. 
   
3. Fill the form as shown in the figure below.




  1. After filling the form click on the next button and choose the design for your custom search engine. You can also customize to change the looks and colors.




  1. Now click on the Look and Feel hyperlink as shown in below image.


  1. Now from here select how you want to show the search results and Click on Save & Get Code... button.

  1. Now select the code below and Copy it (as shown image below).


  1. Now go to Blogger Dashboard > Design > Page Layout.
  1. Choose Add A Gadget > HTML/Javascript.
  1. Paste code and save it. Drag it to the right top to your slider bar so that your readers will not get problem for find search bar.
So execute steps correctly and you are done. Head to your blog and check the trick executed. So don't forget us. We will only survive with your generosity. Like, Share, Follow and Subscribe. If you are facing any problem with implementing these codes just comment below for help. Stay tuned for more posts.


{ 0 comments... read them below or add one }

Post a Comment