Adding Custom Search Engine Box

Hi guys! I want you to see my blog navbar. Now see on its right side what do you see? You might very well see a search box. If you couldn't find out see the preview below;

It's interesting isn't it. That box searches the content of only my blog so if the people cannot find the tutorials the they can use that is to search fort those tutorials. A very delighting fact is that this search engine uses the same mechanism as google itself as it is powered by blogger. So that we can be assured that the other people will get relevant results. Adding a custom search engine is easy. Just follow the steps below;

1. Creating The Search Box;

Before you add the search box, you will need to create one. It is easy,but for better understanding I have kept images as well. Se below;

• Go to google custom search engine.
• There click on Create A Custom Search Engine.
• You will be provided with a form. Fill up with correct credentials;

1. In the form you can add multiple sites to search if you want. If not enter your blog URL only.
2. English is the universal language. So, I suggest you to choose it. But if your blog has readers from a specific country you can choose the language of the country.
3. After you are done click on "Create" button.

• After you click on Create you will redirected to the page where you will get your box code.

• Copy the unique code given among the whole code. That unique code is the code of your search box. Remember, you just need to copy the code like in the above image.

2. Search Box Code;

After you have successfully got the unique code we can move to next step. Now, we will add it in our blog. See the below steps;

• Copy the given code;

<!-- Search box code Starts --> 
<div style="color:#000000;float:right;margin:2px 8px 0 0 ;"> 
<form action="http://bloggersmasher.blogspot.com/p/search-results.html" id="cse-search-box"> 
<div> 
<input type="hidden" name="cx" value="Your Unique Id" /> 
<input type="hidden" name="cof" value="FORID:10" /> 
<input type="hidden" name="ie" value="ISO-8859-1" /> 
<input style="margin-bottom:2px;" type="text" name="q" size="31" /> 
<input type="submit" name="sa" value="Search" /> 
</div> 
</form> 
<script type="text/javascript" src="http://www.google.com/cse/brand?form=cse-search-box&amp;lang=en"></script> 
</div> 
<!-- Search box codes Ends -->

• In the above code replace;

1. "http://bloggersmasher.blogspot.com/p/search-results.html" with the URL of your blank page where you want the search results to appear. If you don't have any blank page then create a new page by going to Dashboard>Pages>Create A New Page. Don't write anything there and publish it.
2. "Your Unique Id" with your unique code you got it previous step.

Now, copy the code replaced by your credentials.

3. Adding Search Box To Blog;

You can keep this search to whatever place you desire. Let's know the way to add it to your blog. Follow below steps;

• Go to dashboard>Layout.
• Click on Add A Gadget and choose Html/Javascript.
• Paste the code you got in step-2.
• Click on save and you are done.

I hope you guys have successfully completed this work. If you have anything to say then comment below.

Author : Anonymous

Share this

Related Posts