Add rounded corner css search box in blogger blog. 1

| | , ,

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


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( 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="" alt="Search Blogger Tools" /></button></p>

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

StumpleUpon DiggIt! Blinklist Yahoo Furl Technorati Simpy Spurl Reddit Google I'm reading: Add rounded corner css search box in blogger blog. ~ Twitter FaceBook

1 Responses So Far:


Select Your Categories