CSS Search Boxes for Blogspot Blogs

 CSS search boxes for Blogger Blogs. Search Boxes allows people to search contents from websites. CSS search boxes will make our website more beautiful. Some people want to get rid of blogger default search box. And they find great looking css search boxes for their blogger blogs. That's why I'm going to show you some tutorials on it.
You can have more Stylish Search Boxes for Blogger Blogs

CSS Search Boxes for Blogger Blogs

1. Login to your blogger account.
2. Go to your layout and then go to Edit HTML section.
3. Click the box to Expand Widget Templates.
4. Now find (Ctrl+F) this code: ]]></b:skin>.
5. Now add the following code before ]]></b:skin> & click on Save Template.
   

   /* search form ----www.howblogger.com----- */ .searchform {margin: 0;padding: 0;overflow: hidden;display: inline;} .searchbox { background: #fff; width: 275px; height:20px; color: #A46F38; font-size: 11px; font-family: sans-serif, Verdana; font-weight: bold; margin: 0; padding: 4px 0 3px 5px; border: 1px solid #DDD; display: inline; } .searchbutton { background: #555 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGI952MoB2Ua5-cu3mcYS-5F3U_wt0h7SUy35PP8mYFgdMzJkqru5BCBUStK1MGtkqvMl5bz0kRGUi-NF29zVrnXOjTLMCUDvEZg7Ka2Afg0pswdT-3T5WRqxR5dWA_-Jg5bBI2FU-mm4b/s320/search1.gif) no-repeat; width:34px: height:28px; color: #A46F38; margin: 0; padding:5px 12px; border: 0px; } .searchbutton:hover { background: #555 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_IbQU8Wgqp8bRBWD-Y8ACa0GSwMwmrdWc_keQvpoToBMDWAmSpDD0_MCf9aQBkzSwAaV4PgkeFmMZHJal9wPmo3oGJHnDScbsEjqinAzh-K3FAFntHZAKt8OjgbAGiAlNgWA0c-qpcJ99/s320/search2.gif) no-repeat; } 

6. Now go to Page Elements → Add a Gadget → HTML / Javascript.
7. Now paste the following code in the box.
   

   <form action="/search" class="searchform" method="get" style="display:inline;">

   <input class="searchbox" maxlength="255" name="q" onblur="if (this.value == &quot;&quot;) {this.value = &quot;Search here...&quot;;}" onfocus="if (this.value == &quot;Search here...&quot;) {this.value = &quot;&quot;}" type="text" value="Search here..." />

   <input class="searchbutton" type="submit" value="." />

   </form>

8. Click on Save & you are almost done.

Please, let me know if you feel any problem. I'm ready to help you. You can contact with me leaving a comment on this post.