Installing Search Box at Navigation Tab.

If you have noticed the search box in Blogger Rounder just inside and right to Blogger Rounder then you may wonder how to add like this.One of the visitor contacted me and asked how to add like that so here is Tutorial.You can use other search bar like that of Yahoo or Bing but for example we will use Google Search Box.To do so lets proceed.

Finding Search Box unique Id.

1. Go to Google Custom Search.
2. Click on create Custom Search or manage your existing Search box.
3. Go to serch engines control panel
4. On scroll you can see Search engine unique Id
5. Copy that id which must looks partner-pub-7581589974753560:3100778778 (For AdSense for Search) or xxxxxxx9066104501157:xxxxxx (Creating search box from Google Search )

Constructing Search Box.

1. We can construct Search box just by getting ID.Normally the HTML codes of Search box(Google Search) is this.

   <!-- Google search box -->
   <div class='cse' id='br-gsb'>
   <form action='http://www.google.com/cse' id='cse-search-box'>
   <input name='cx' type='hidden' value='SearchBoxUnique ID'/>
   <input type='text' name='q' size='30' />
   <input name='ie' type='hidden' value='ISO-8859-1'/>
   <input type="submit" name="sa" value="Search" />
   </form>
   <script type="text/javascript" src="http://www.google.com/cse/brand?form=cse-search-box&amp;lang=en"></script>
   </div>
   <!-- bloggerrounder.blogspot.com-->
   <!-- Google  search box End -->

2. Where
   • In Line 4 You can change 30 to change the width or size of Search Box.
   • In Line 5 replace SearchBoxUniqueId with the unique ID of Search box that we got from above steps.

Adding Search box in Navigation Tab.

1. Go to Blogger Dashboard>Template>Edit HTML
2. Back up your Blog.
3. Tick on Expand Widget.
4. Find the widget ID (If you use Pagelist the Widget ID is mostly PageList1 if you use Linklist Id is mostly Linklist 1 or if your use HTML navigation tab you need to find id using this trick)
5. Find this Lines
   For Page List widget.

   <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>
   Search Box codes here.
   <b:loop values='data:links' var='link'>
   More other no need to Go..

   
   For Link list

   <b:widget id='LinkList1' locked='false' title='pages' type='LinkList'>
   <b:includable id='main'>
   <b:if cond='data:title'><h2><data:title/></h2></b:if>
   <div class='widget-content'>
   More contents here....
   <ul>
   PUT THE SEARCH BOX CODE HERE
   <b:loop values='data:links' var='link'>

   
   Just you need to keep the Search Box codes after <ul/> tag if you use page list or Link list.
6. If you use Other HTML search engine then go to Layout and click on edit button of that HTML widget and add the serach Box codes after last ending anchor tag.i.e after last </a> tag.
7. Finally click on Save.Your Search box will be installed.

Adding CSS codes.

To make Search box at side of Navigation bar add this CSS in your Template.

/* CSS styling starts for Search Box*/
#br-csb { 
color:#000000 /*To change font color*/
float:right /*to make search box to appear right*/
margin:8px 10px 5px 5px
}
/* bloggerrounder.blogspot.com*/

• You can change line 1 #000000 to other HTML color code to change font color.Get color code from here.
• You can change right to left you you want to place the search box left to Navigation Tab.
• You can change margin for effective implementation.

If you don’t know how to add CSS then refer here.

 

Enjoy.

Admin of Blogger Rounder
Shirshak is the Administrator of the Blogger Rounder who thinks he will die next to Blogger. He is Completely devoted to Blogger and thinks Web Designing will makes is career.You contact using contact form from navigation tab to him.You can find him in Twitter.

Subscribe for free
Thanks for visiting Blogger Rounder.We can subscribe to Blogger Rounder'^s by RSS feed or email updates.