Beautiful CSS Search Box For Blogspot Blogs

Posted by Lasantha Bandara on November 17th, 2009 File Under : css, html, search box3 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'>
div#search { background: transparent url("") no-repeat scroll left top;margin: 0; width: 320px; height: 44px; }
div#search form { height: 44px; }
div#search form p { display: block; margin: 0; padding: 14px 0 0 30px; }
div#search form p input { width: 285px; border: 0; background: transparent none; color: #ffffff; }

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 action="" id='search form' method='get'>

<p><input id='searchform' name='q' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Type your search here...&quot;;}' onfocus='if (this.value == &quot;Type your search here...&quot;) {this.value = &quot;&quot;}' type='text' value='Type your search here...'/></p>


Note : Replace "YOURBLOG" with your blog name.

You are done.Look at the picture below.

Search Box For Blogspot Blogs
Search Box For Blogspot Blogs

File Under : css, html, search box

3 Responses to “Beautiful CSS Search Box For Blogspot Blogs”

  1. Utsav Chopra says:


    Thank you

  2. Scott Levy says:

    Nice post. I found this blog with withbest practices for creating a search form that is quick and easy to use

  3. Utsav says:

    nice share..
    thnaks for this wonder full tip

Leave a Reply

Your email address will not be published.

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