How to add CSS3 Serch box to blogger blog . ~ Blogger Tips And Tools |Latest Blogger Tricks| SEO Tips

How to add CSS3 Serch box to blogger blog .

Follow simple and easy step to adding this box to blogger---->>>>

* First go to your blogger Dashboard.

* Now click in design 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>

.SR .search
{
 background: #33373E;
 overflow: hidden;
 padding: 15px;
 right: 0px;
}
*html .SR .search
{
 height: 1%;
}
.SR .search form
{
 background: #60695E;
 border: 1px solid #3ac6e5;
 padding: 10px;
 width: 245px;
}
.SR .search fieldset
{
 height: 1%;
 overflow: hidden;
}
.SR .search input
{
 background: url(http://santabanta.mywapblog.com/files/search-input.png) no-repeat;
 border: none;
 color: #666;
 float: left;
 margin-right: 2px;
 padding: 5px 3px 5px 65px;
 width: 145px;
}
.SR .search button
{
 background: url(http://santabanta.mywapblog.com/files/search-button.png) no-repeat;
 border: none;
 cursor: pointer;
 float: left;
 height: 24px;
 text-indent: -1000em;
 width: 26px;
}

* Now click to save your blogger Template.

* Now go to blogger dashboard and click in design tab.

* Now you are here --->>> Page Element

* Click in add gadget which is in blog sidebar,

* When open new choose HTML/javascript from list.

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

<div class="SR">
<div class="search">
  <form action="YOUR BLOG URL HERE">
   <fieldset>
   <input type="hidden" name="cx" value="018007819701631204361:2a6d1r-ytre" />
    <input type="hidden" name="cof" value="FORID:11" />
    <input type="hidden" name="ie" value="UTF-8" />
   <input type="text" name="q" /><button type="submit">Search</button>

   </fieldset>
  </form>
 </div>

NOTE:- remove highlighted text from your blog URL ok

* Now click to save and now you are done.

CHEERS........