Install and Configure Google Custom Search in Blogger

A search box is one of the first crucial things when you set up a blog or a website.If there are visitors who have difficulty in finding an article on a blog, they can easily find it through the Search box . Popular blogging software like WordPress has search box by default in all themes.In blogger, it is not a default thing.You have to manually add it after you create a blog on blogger.But a search widget usually comes with the free blogger templates as well as premium blogger templates.

In a blog, it has a great deal of importance.No matter how it looks you must have it.You will be thinking that I am overacting a bit .But I am not,I am really serious about it.One of the first things,I check before selecting a template is the availability of a search box.The placement of the search box is very important too.You cannot have a search box in the footer(Bottom of the blog).I always check the placement of search box and try to bring it to the top sidebar top.You can see the demo in my blog sidebar.

Another thing about search box widget is its occurrence.A single search box is enough if you have placed it in the sidebar as I mentioned.But in some blogger templates when you view your site on mobile it comes below your posts.So having two search boxes is a better strategy.Provided that the second search box is in the header part and appears above your posts like on this blog.There is a search icon below the description.This icon appears in mobile version of my blog.

• Social Share Buttons :Pack 1
• Blogger News Feed Widget

But wait, there is a problem in blogger search box widget.That is it does not show accurate results.Moreover, if you have a huge content blog,then this search box widget may not be enough.But Google,like always, has made his easy too.Google provides its own custom search facility to people for free.There is a premium version as well which is without any relevant keywords ads.But you can have ads free search result if you don't choose buisness plan.Many websites are using google custom search.It is because

1. It is free.
2. It does not affect the speed of your website.
3. It provides more relevant results than traditional search box widgets.
4. If you are hosting your blogger blog on a custom domain then the search box can save you some large amount of resources. 
5. Ad sense ads can also be displayed through which earning can occur.

After the introduction,follow the below steps to setup your google custom search box widget for search results in a popup or on a separate page.

1. Visit the website Google Custom Search.
2. Then click on the button Create a custom search engine to log into CSE.May require logging into your Gmail account.

Part 2-Then fill the information as described below :

A. Fill in the URL of your blogger blog.
B. Change the language settings according to the language of your website.
C. Name your search engine.XYZ any thing.
D. After checking the above settings, click the button CREATE.

Part 3. Then click Get code .

Google Custom Search results in an overlay :

Part 4. Copy the JavaScript that is provided in the box.This step is for those who do not want to show custom search results on a separate page.Don't click on look and feel just copy the code.

1. Copy the code.
2. You can paste it in an HTML/JavaScript widget and use it along with blogger search.
3. Or if you want to replace blogger searching with google You have to follow steps 4,5,6
4. Open blogger template and find ' form action ' (Using CTRL + F ).Replace form action line of your template with this line

 HTML
<form action='/search' class='searchform' method='get'>

      5.Copy the below three lines just below the above line.

 HTML
<input type='hidden' name='cx' value='partner-pub-Your ID' />
<input type='hidden' name='cof' value='FORID:10' />
<input type='hidden' name='ie' value='UTF-8' />

(Your ID will be var cx ='xyz' copy and replace it with your ID)
(Your default language is English ,so the character set is UTF-8 .For different languages it is different.Go to Look and feel --> layout-->language-->advance--->and copy your language character set and replace it with UTF-8,if you are non-English)
      6. Don't do anything else .Now save your template.This will show results in a popup screen when you will type any thing in your blogger template search box.Check the demo by typing SEO in my blogs search box in the sidebar .If you want to show results on a separate page follow the procedure below(but you have to perform the above steps :4,5,6 first)

Google Custom Search results on a separate page :

1-You must have to perform step 4,5,6 of part 4 (starting from Google Custom Search results in an overlay).Now go back a little above in step 4 and see the picture I have pointed an arrow on look and feel.If you want search results on a separate page click it.

2-You will see a screen like this,click on two page.

3-Click on Save & get code

4-Now this is the most important step which most people do wrong.You don't have to copy the first code .Copy the second one.

*Copy the below code (not the above)

4-Create a page for search results and name it (like search)
5-Open HTML of the page and paste the above code ( Do not ,I repeat do not paste it in compose mode ).Click save.
6-In step 4 replace /search with the URL of search results page.Like this

<form action='http://blograbbit.blogspot.com/p/search.html' class='searchform' method='get'>

Click on save template.Now you have completely installed search results on a separate page.Check the demo by typing SEO in my blog's first search icon below the title.

Customization :

You can change the theme of your search results by going to look and feel and clicking themes.

• Remove Blog Title From Post Title In Blogger

Last Words :

I expect a positive response from this post readership. this post helped you then share it with me by commenting below.If you got stuck somewhere leave a comment ,I will surely try to solve it.I will be posting two new posts about google custom search engine .That will be surely surprising and cool.So stay connected.Don't forget to share this stuff.

Follow @BloggingRabbit

 Blogger, Blogger How to, Widgets