Hi now add this cool green css search box in blogger blog easily.
Follow simple giving easy step to adding this box in blogger blog---->>>>>
* First go to your blogger Dashboard.
* Now click in design tab and edit HTML.
* Click in small box to expand your blogger template.
* Find this code ]]</b:skin> by CTRL+F key.
* Copy below code and paste before ]]</b:skin>
Follow simple giving easy step to adding this box in blogger blog---->>>>>
* First go to your blogger Dashboard.
* Now click in design tab and edit HTML.
* Click in small box to expand your blogger template.
* Find this code ]]</b:skin> by CTRL+F key.
* Copy below code and paste before ]]</b:skin>
.search input {
float: left;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgEN5ytjOAS6Ivk3jXI_ASg2eHHT_ati3gFw7n3ZyEDi6EmNp438mk4ovRroyu09vAYbiw7WLBiLzBshNOxluEi9y3AxVSzuEFyE3yts2hSk69eG-yRJthMvqiRCLkmBqo6kak7Wna9Vuw/s1600/search-input.png) no-repeat;
border: none;
padding: 6px;
width: 215px;
color:#000066;
font-size: 11px;
color:#fff;
}
.search button {
float: left;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQLn_fRVJ-jK70AmN1sEMn2S6k7M5BW4jkkIPIgWawAiE8epzM8Jj15dZ8ZmxaHm11ZFqVgY_4xErgeNKYqPUTK3dow4fYMB7HRpnq6CAvh7dcTVR9TujOi40Gs-LP_fpFlUsJVxc_-n4/s1600/search-button.png) no-repeat;
width: 73px;
height: 25px;
border: none;
cursor: pointer;
color:#fff;
vertical-align: middle;
padding: 2px 17px 5px 0px;
font: bold 11px/11px "Trebuchet MS", sans-serif;
}* Now save your blogger template.
* Again go to your blogger template and click in design tab.
* now you are here --->>>> Page element.
* Click in add gadget which is in sidebar.
* When open new window click in HTML/Javascript.
* Now when open blank box copy below code and paste in blank box.
<div class='search'> <form action='/search' method='get'> <input name='q' type='text' value=''/><button type='submit'>Search</button> </form> </div>
* Now click to save your HTML/javascript and you are now done.
|
0 Responses So Far: