Add rounded corner css search box in blogger blog. 1

Hello friends now add rounded corner css search box in your blogger blog easily.

PREVIEW:-

Follow simple and easy step to adding this css search box in blogger blog easily ---->>>>

* First go to your blogger Dashboard.

* Now click in desgin tab and edit HTML.

* Click in small box to expand your blogger Template.

* Now find this code ]]</b:skin> by CTRL+F key.

* Copy below code and paste before ]]</b:skin>

.search-bar  {
background : url(http://santabanta.mywapblog.com/files/search.png) no-repeat left top;
bottom : 0;
height : 65px;
position : absolute;
right : 0;
width : 370px;
}
.search-bar p {
padding : 13px 5px 4px 15px;
}
.search-bar p input {
background-color : transparent;
border : none;
color : #fff;
font-family : inherit;
font-size : 18px;
height : 25px;
width : 290px;
}
.search-bar p button {
background-color : transparent;
border : none;
height : 35px;
margin-left : 5px;
margin-top : -5px;
width : 35px;
}
.search-bar p button img {
vertical-align : middle;
} 

* Now click to save your blogger Template .

* Again go to your blogger Dashboard and click in design tab.

* Now you are here --->>> PAge Element.

* Click in add Gadget which is in your blog sidebar.

* When open new window click in HTML/javascript from list.

* When open new blank box copy below code and paste in blank box.

<div class="search-bar">
  <form method="get" id="searchform" action="YOUR BLOG URL HERE/">

   <p><input type="text" name="s" class="cleardefault" value="Search Blogger Tools" id="s" />
   <button type="submit"><img src="http://www.bloggertools.org/wp-content/themes/wpburn-blue/images/search_btn.png" alt="Search Blogger Tools" /></button></p>
  </form>
 </div>

* Now click to save your blogger Template now you are done ok.

blogger tutorials Social Bookmarking Blogger Widget

I'm reading: Add rounded corner css search box in blogger blog. ~