How To Add CSS Search Box to blogger

Posted by Lasantha Bandara on November 15th, 2009 File Under : css, search box, widget0 Comment

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'>
border:solid 4px #ccc;
padding: 1px 2px;
background:url( repeat-x left top;
border:solid 5px #000000;
padding: 1px 2px;

NOTE:You can change background image,colors,borders,.. as your choice.

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.

<form id="searchthis" action="" style="display:inline;" method="get">
<input id="b-query" class="formbox" maxlength="255" name="q" size="35" type="text"/>
<input id="b-searchbtn" class="formbutton" value="Search" type="submit"/>

Note:Replace "YOURBLOG" with your blog name.

You are done.It will look like this:

CSS Search Box
CSS Search Box to blogger

File Under : css, search box, widget

Leave a Reply

Your email address will not be published.

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