How to add CSS3 Serch box to blogger blog . 0

| | , ,

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( no-repeat;
 border: none;
 color: #666;
 float: left;
 margin-right: 2px;
 padding: 5px 3px 5px 65px;
 width: 145px;
.SR .search button
 background: url( 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">
   <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>


NOTE:- remove highlighted text from your blog URL ok

* Now  click to save and now you are done.


StumpleUpon DiggIt! Blinklist Yahoo Furl Technorati Simpy Spurl Reddit Google I'm reading: How to add CSS3 Serch box to blogger blog . ~ Twitter FaceBook

0 Responses So Far:


Select Your Categories