How To Add Smart CSS Search Box to Blogger

Posted by Lasantha Bandara on November 18th, 2009 File Under : css, search box, widget2 Comments

1.Login to your blogger dashboard--> layout- -> Edit HTML

2.Scroll down to where you see </head> tag .

3.Copy below code and paste it just before the </head> tag .

<style type='text/css'>
#search {
padding:17px 5px 10px 15px;
#search form {
margin: 0;
padding: 0;

#search fieldset {
margin: 0;
padding: 0;
border: none;

#search p {
margin: 0;
font-size: 85%;

#s {
float: left;
padding: 6px 2px 6px 5px;
background:#fff url( no-repeat;
font: normal 100% &quot;Tahoma&quot;, Arial, Helvetica, sans-serif;

#searchsubmit {
float: left;
background:#fff url(;
font: bold 100% &quot;century gothic&quot;, Arial, Helvetica, sans-serif;
color: #FFFFFF;


Note:Please host above 3 images yourself.

4.Now save your template.

5.Go to Layout-->Page Elements and click on "Add a gadget".

6.Select "html/java script" and add the code given below and click save.

<div id='search'>
<form id="searchform" action="" style="display:inline;" method="get">
<input id="s" name="q" type="text" value=""/>
<input id="searchsubmit" value="" type="submit"/>

Note: Remember to replace "YOURBLOG" with your blog name.

You are done.It will look like this:

Smart CSS Search Box to Blogger
Smart CSS Search Box to Blog/Website

File Under : css, search box, widget

2 Responses to “How To Add Smart CSS Search Box to Blogger”

  1. what should says:

    Simple and nice!thank you but where the demo is?

  2. sagar patil says:

    Thank you. after finding on Google for search box with code i found the perfect code and solution at here.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.