Add Custom Search Box to Blogger | Google Custom Search Engine Bar

Talking about Google Adsense sometimes most of us always interested in the form of text or images, meanwhile to optimize revenue from Google we should seek various ways in order to gain the profit when the visitors visit our blog. And This tutorial will show you how to add Google search box that earcn some extra cash for you when the visitors of your blog use it to find the keyword they're looking for.

 just follow the steps below

Step 1. Create Your Custom Search Engine
First of all, go to create your costum search engine to be used in the search box.

Note: This tutorial is not aplicable to Search Box Gadget added via Design>Page Elements.

1. Go to Visit Google Costume Search to create it
2. For you who an Adsense publisher you can also use Adsense for Search
3. Configure the search engine and get the code for the search box
4. Look for the search engine unique ID in the code. it should look something like this: partner-pub-678379948941234:cxn4lk-wfta
We are only interested in this ID, the rest of the code is of no use.


Step 2. Construct the Buttenless Search Box

This is the code for the buttenless search box

<!-- Buttonless Google custom search box Start -by Bloggerclick.com -->

<div class='cse' style='color:#000000;float:right;margin:6px 10px 0 0 ;'>

<form action='http://www.google.com/cse' id='cse-search-box'>

<input name='cx' type='hidden' value='partner-pub-678379948941234:cxn4lk-wfta'/>

<input name='q' onfocus='if(this.value==this.defaultValue) {this.value=&quot;&quot;}' onblur='if(this.value==&quot;&quot; ) {this.value=this.defaultValue}' size='35' type='text' value='Type and hit enter to search'/>

<input name='ie' type='hidden' value='ISO-8859-1'/>

</form>

</div>

<!-- Buttonless Google custom search box End -->

1. Replace partner-pub-678379948941234:cxn4lk-wfta with your Google Adsense ID
2. You can modify the search box width by changing the value of size attribute.
3. You can change the phrase "Type and hit enter to search" to any pharse you want.




1. Replace partner-pub-678379948941234:cxn4lk-wfta with your Google Adsense ID
2. You can modify the search box width by changing the value of size attribute.
3. You can change the phrase "Type and hit enter to search" to any pharse you want.


Step 3. Add Search Box to Navigation Bar

The steps below will place the search box on the right hand of the bar.
1. Login to your Blogger account
2. Go to Dashboard > Design >

Edit HTML

3. Backup your template
4. Tick the Expand Widget Template

5. If your navigation bar is made of pages gadget, look for this code:



<b:widget id='PageList1' locked='false' title='Pages' type='PageList'>
<b:includable id='main'>
<b:if cond='data:title'><h2><data:title/></h2></b:if>
<div class='widget-content'>
<ul>
PUT THE SEARCH BOX CODE HERE
<b:loop values='data:links' var='link'>

6. Insert the search box from step 2 right after the <ul> line.

7. If your navigation bar is made of linklist gadget (instead of PageList) just add the search box code right after <div id="navibar"> line of the navigation tabs code.

8. Preview before saving