How to Add Google Custom Search to your Website Header or Linkbar

I Could see some websites having Google custom search in website header or linkbar. And I tried the same for my website too but i got failed initially after that  i found the way to solve that issue.Here i like to share the same experience with you.

From this post you can also learn how to customize your blog or website and how to use <div> more effectively.
Before trying this please backup your template.
Step 1:
Find the <div> tag related to linkbar(inspect the element from chrome).
Step 2:
Add the <div> tag to Google custom search code and Add the style attribute to the <div> tag.
like this…
<div class=’widget-content’ style=’float:left’>
Step 3:
Finally the code will look like this

// <div> tag for linkbar

<div class=’widget-content’ style=’float:left’>
<ul>
<b:loop values=’data:links’ var=’link’>
<li><a expr:href=’data:link.target’><data:link.name/></a></li>
</b:loop>
</ul>
</div>
// <div> tag for Google custom search
<div id=’search_form_top’ style=’float:right’>
<ul>
<li>
<form action=’http://www.google.com/cse’ id=’cse-search-box’ target=’_blank’>
<div>
<input name=’cx’ type=’hidden’ value=‘partner-pub-548255428081:bdj4dl-4tb0‘/>
<input name=’ie’ type=’hidden’ value=’ISO-8859-1′/>
<input name=’q’ size=’50′ type=’text’/>
<input name=’sa’ type=’submit’ value=’Search’/>
</div>
</form>
<script src=’http://www.google.com/cse/brand?form=cse-search-box&amp;lang=en’ type=’text/javascript’/>
</li>
</ul>
</div>