Add Smart CSS Search Box to Blogger |
1.Login to your blogger dashboard--> layout- -> Edit HTML
2.Scroll down to where you see </head> tag .
3.Copy below code and paste it just before the </head> tag .
<style type='text/css'> #search { height:34px; width:auto; margin-top:10px; padding:17px 5px 10px 15px; width:311px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgH_Uo-XRNMTWE0eN6LoZZ7WeSZrQqwCAfJlLFG519yorWo-W7RmdX_r874m2t0WTPx75v4Xd0XAo8DX-X7ww68TpefGavtQ3lX3_jPkrJ0xXmERCa5hCrFHtD1N4C3NGwd241CtctVloER/); } #search form { margin: 0; padding: 0; } #search fieldset { margin: 0; padding: 0; border: none; } #search p { margin: 0; font-size: 85%; } #s { margin-left:0px; float: left; width:231px; padding: 6px 2px 6px 5px; background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSQoG9qil-6f_3a7MSLEupH_Lep44JjXclwMYYpJb63XjvgMjPD_wbM0d0wgAAef3HUlBhRYtpcyHJHy7Iv9Ud2Ksj8S4u4uPWhvCzUQT4VI8n58Fld5ZG6FpCvY0O8O0zeA7tlSnqFJna/s1600/sform.png) no-repeat; border:none; font: normal 100% "Tahoma", Arial, Helvetica, sans-serif; color:#C6C6C6; } #searchsubmit { width:57px; float: left; background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgcNlatWa-2BMsPC1BEeTWejJ2UcB9cYWUkSEi9iX4w2ykcNAtto4t0mwoUseycEtVzi44Fe3J1Mw78bumxGc5FLYIXWoFO9SG7b_vHIak-qp5GYNfD54bZd_KgkQxakRG0uS8pLm-TfeD2/); border:none; font: bold 100% "century gothic", Arial, Helvetica, sans-serif; color: #FFFFFF; height:28px; margin-left:5px; } </style>
Note:Please host above 3 images yourself to your picasa web album.
4.Now save your template.
5.Go to Layout-->Page Elements and click on "Add a gadget".
6.Select "html/java script" and add the code given below and click save.
<div id='search'> <form id="searchform" action="http://YOURBLOG.blogspot.com/search" style="display:inline;" method="get"> <input id="s" name="q" type="text" value=""/> <input id="searchsubmit" value="" type="submit"/> </form> </div> <noscript><input value="http://havelockknights.blogspot.com/" name="u" type="hidden"/></noscript>
Note: Remember to replace "YOURBLOG" with your blog name.
You are done.It will look like this:
Comments
Post a Comment
Please Leave Your Comments