Mar 30, 2012

Google Custom Search Box in Page Bar

First create your google search box. Just like that I have created below.
Match your code with this code and edit as per this code. See how.
Put red color code in your code. This is very important formating code to fit the box inside pagebar.

<!-- AKB Google custom search box IN PAGE BAR start-->                                                                                 
<div class='cse' style='color:#000000;float:right;margin:2px 2px 0 0 ;'>
<form action="http://www.essssay.com" id="cse-search-box">
      <input type="hidden" name="cx" value="partner-pub-7725836048981907:4729220636" />
    <input type="hidden" name="cof" value="FORID:10" />
   <input type="hidden" name="ie" value="UTF-8" />
    <input type="text" name="q" size="28" />
    <input type="submit" name="sa" value="Search" />
  </form>
<script type="text/javascript" src="http://www.google.com/coop/cse/brand?form=cse-search-box&amp;lang=en"></script>

</div>
<!--search end-->
<!-- AKB Google custom search box IN PAGE BAR end-->

Login to your Blogger account.

Go to Dashboard > Design > Edit HTML.
Back up your template.Tick the  Expand Widget Templates check box on top right of the HTML window.
If your navigation bar is made of Pages gadget, look for this code:

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



Insert the search box code from Step 2 right after the <ul> line.

No comments:

Post a Comment