How To Insert Search Box in Blogger Template
Do you have a default Search box in your Blogger template ? If no , you can add one with the below code.
Step 1] Goto your blogger Dashboard -> Layout
Step 2] now say PageElements-> Add New Element – > Html Javascript.
Step 3] Add the Following code :
<div align=’center’>
<form expr:action=’data:blog.homepageUrl + "search"’ id=’searchform’ method=’get’ name=’searchform’>
<div align=’right’>
<input id=’s’ name=’q’ type=’text’ value=”/>
<input id=’searchIcon’ type=’submit’ value=’Search’/>
</div>
</form>
</div>
Step 4] Now goto EditHtml -> and add the Following Code with in the <b:skin> and </b:skin> tag .
#searchform {
padding: 5px 0 0;
padding-right: 15px;
text-align: center;
}
#searchform #s {
width: 150px;
padding: 3px;
padding-right: 15px;
margin: 0 0 5px 0;
background: #fff;
border: 1px solid #A2A295;
color: #6A6A6A;
font-size: 11.5px;
font-family: Arial, Sans-Serif;
}
#searchIcon {
height: 24px;
width: 60px;
padding-right: 15px;
background: #941200;
border: 0px solid #941200;
padding: 0px 0px;
vertical-align: top;
color: #fff;
font-weight: bold;
}
Step 5] Save and Enjoy your new Search Box … !!
Subscribe to Rockstar template by Email !!
Related Posts :
Spread This Post!
Like this Post? Spead this post to your friends and family!
Hi,
Nice article. But not enough for me. I am using a customized blog template and there is already a search box. What I want to do is, Replacing this search box with google custom search(Adsense for search).Can you please tell me how to do this?
@ Sagar , Just replace your blogspot search code with the google search code .
Hello,
I have same question with Sagar. Please tell me the detail on how to replace my blogspot search code…
What code has to be replaced? Here is my code:
Search
Thanks
Hi Gungz ,
If your Blogger template already have search bar , find the search code and replace it with above code. If your template doesn’t have it already , then u can place the above code where ever you want.
Thanks for the quick reply Mr. admin..
My blog template already has a default search bar within. It is quite nice. But what i want to modify is, i want to change the code into Adsense for search code. So, when visitor search, it will display search result from Google Adsense For Search. How can that be done?
I just want to change my existing search bar into Adsense For Search, not adding it.
Thanks again in advance
@Gungz
I have seen your blog source code !! Here is the solution…
for eg , this is the google adsense code :
<form action=’http://www.google.com/search’ method=’get’>
<table border=’0′ cellpadding=’0′>
<tr><td>
<input maxlength=’255′ name=’q’ size=’25′ type=’text’ value=”/>
<input type=’submit’ value=’Go’ text=’go’/>
</td></tr>
</table>
</form>
search for this in your template :
<div id=’sidebar0′>
<FORM expr:action=’data:blog.homepageUrl + "search"’ id=’searchform’ method=’get’>
<P>
<span class=’hidden’>Search </span>
<INPUT id=’s’ name=’q’ type=’text’ value=’Search’/>
</P>
</FORM>
</div>
and replace it with :
<div id=’sidebar0′>
<form action=’http://www.google.com/search’ method=’get’>
<table border=’0′ cellpadding=’0′>
<tr><td>
<p>
<input maxlength=’255′ name=’q’ size=’25′ type=’text’ value=”/>
</p>
</td></tr>
</table>
</form>
</div>
What i have done here is removed the Button and added <p> tag !!
I have tried it with my blog see at : movielobby.blogspot.com !!
Wow, you even try it yourself!
I have done it. And it works!! But, i see it is different when i replace it with my Adsense for Search code.
Anyway, your tutorials absolutely help me. Thank you so much Mr.Mohan.
I will place your site in my blogroll. Lets be friend : )
Thanks for your kindness.
Hi i have seen ur adsense code !
All u have to do is :
Replace this code <input name=’q’ size=’30′ type=’text’/>
with
<p><input name=’q’ size=’30′ type=’text’/></p>
and delete this line :
<input name=’sa’ type=’submit’ value=’Search’/>
Hi Again Mr. Mohan!
Thanks for your help yesterday. What you wrote right above this comment will erase search button and only shows search bar, right?
I have tried it. But I have a question: is it okay to modify Google Adsense For Search Code? I’m a litte afraid
By The Way, I have modified my Google search. It shows the results in my blog page, not in the Google Search Page. Pretty Cool!
I have seen some site that actually changed the adsense search code eg:friendster ! But dont know exactly that we can change it !!
I have pasted the below code
in the the text box in html java script and there is one option called and clicked it and saved.
Should i need to type my sitr url anywhere in above code? or any changes has to be done in above code?
and then i edit my html page and u askd to paste another code with in two b:skin.. what it means.. where exactly i have to paste it?
Thanks for your help in advance
Hi naga,
First of all i didnt understand ur query . please make it clear !
You have to paste the style code between b:skin ….
Hey, I like your site. You have great content.
I was looking at your site, movielobby.blogspot.com, and thought to myself how nice its search box looked. I was wondering how you got it like that — so round and with the search icon merged with the search field?
Thanks
I am using studio press blogger theme how can I edit my search with google adsense search this method does’nt work for me
i think you’re solution @gunz not work with my blog i did what you said, at least you can check out in my blog.
i have same problem with gunz but i ve tried and it wont work in my blog, so give me the hint, thx
hi iwa ,
Can you send me your code ! i will see it and reply !
hi good day. i found your blog as i searched for help sites on how to change my search box into my adsense search add. i also read the comments above and i am just confused which code should i paste, the one in step 3 or 4?thanks a lot. your reply will be highly appreciated.
Hi all!
I also have problem with search code. My template has a wordpress type of code in blogger. Whenever I enter a word to search it starts searching but find nothing taking me back to the same page. So how to fix this problem. The code goes like this…. Please guide me.
/* Begin Form Elements */
#searchform {
text-align: center;
margin: -10px 0 0 580px;
height: 43px;
}
#searchform #s {
border:1px solid #203346;
width: 245px;
height: 20px;
background: #fff;
padding-top:4px;
margin: 7px 2px;
font-weight: normal;
color:#b0b0b0;
}
.entry form { /* This is mainly for password protected posts, makes them look better. */
text-align:center;
}
select {
width: 130px;
}
Very good post n helpful.
pleas help!!admin i have already search box and i want to move it from top to side bar or some where else how can i do this (http://www.divxmoviesfree.cz.cc/) here is my blog link pleas check this and reply as soon as possible best regards!
i need search code for my template
Hi Admin,
Please also tell me how could i change my template search box with google adsense search box, please check my search box not works properly,
please tell me a solution in detail.
Great article, lots of smart tips. I am going to show my buddies and ask them what they think.
Very nice, gives me a lot of inspiration being right in the midst of a redesign. It’s all in the details and comment forms are definitely overlooked more often than not. Time well spent on this post.