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

googlecustomsearch 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’>
<b:loop values=’data:links’ var=’link’>
<li><a expr:href=’’><></a></li>



// <div> tag for Google custom search

<div id=’search_form_top’ style=’float:right’>
<form action=’’ id=’cse-search-box’ target=’_blank’>
<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’/>
<script src=’;lang=en’ type=’text/javascript’/>

About mohan

This is Mohan Jayapalan author of TechPages Blog.I am a part time blogger and Currently working for private Software Concern.

© Copyright 2010-2016 · All Rights Reserved · Powered by WordPress ·