How To Create Search Gadget for Google Blogger

HELLO FRIENDS,

1.


<style type="text/css">
#searchbox{background:#d8d8d8;border:4px solid #e8e8e8;padding:20px 10px;width:250px}input:focus::-webkit-input-placeholder{color:transparent}input:focus:-moz-placeholder{color:transparent}input:focus::-moz-placeholder{color:transparent}#searchbox input{outline:none}#searchbox input[type="text"]{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUxdkDO2-RGwl6aC_ubvG0daTU8df69048vMMVssrOPfnxAcgCpBnDncePsnVkWXrQ1tvuNnQktMDSmPE9A-pZ4ELiyLi0aoqmD3zyydrxJ644PnajKnV9nLw5cL-vsqT-vH-fsVFXaaRz/s1600/search-dark.png) no-repeat 10px 6px #fff;border-width:1px;border-style:solid;border-color:#fff;font:bold 12px Arial,Helvetica,Sans-serif;color:#bebebe;width:55%;padding:8px 15px 8px 30px}#button-submit{background:#6A6F75;border-width:0;padding:9px 0;width:23%;cursor:pointer;font:bold 12px Arial,Helvetica;color:#fff;text-shadow:0 1px 0 #555}#button-submit:hover{background:#4f5356}#button-submit:active{background:#5b5d60;outline:none}#button-submit::-moz-focus-inner{border:0}
</style>
<form id="searchbox" method="get" action="/search">
<input name="q" type="text" size="15" placeholder="Type here..." />
<input id="button-submit" type="submit" value="Search" /></form>
2.

<style type="text/css">
#searchbox{width:240px}#searchbox input{outline:none}input:focus::-webkit-input-placeholder{color:transparent}input:focus:-moz-placeholder{color:transparent}input:focus::-moz-placeholder{color:transparent}#searchbox input[type="text"]{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUxdkDO2-RGwl6aC_ubvG0daTU8df69048vMMVssrOPfnxAcgCpBnDncePsnVkWXrQ1tvuNnQktMDSmPE9A-pZ4ELiyLi0aoqmD3zyydrxJ644PnajKnV9nLw5cL-vsqT-vH-fsVFXaaRz/s1600/search-dark.png) no-repeat 10px 13px #f2f2f2;border:2px solid #f2f2f2;font:bold 12px Arial,Helvetica,Sans-serif;color:#6A6F75;width:160px;padding:14px 17px 12px 30px;-webkit-border-radius:5px 0 0 5px;-moz-border-radius:5px 0 0 5px;border-radius:5px 0 0 5px;text-shadow:0 2px 3px #fff;-webkit-transition:all 0.7s ease 0s;-moz-transition:all 0.7s ease 0s;-o-transition:all 0.7s ease 0s;transition:all 0.7s ease 0s;}#searchbox input[type="text"]:focus{background:#f7f7f7;border:2px solid #f7f7f7;width:200px;padding-left:10px}#button-submit{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiSYodd_HMWH5P1ewLOnnZNcbPiroryRNDuUU2vF_zNtZcMo6KvnwiyIhWKFhEFL4cmGOc64VIurJzN6dwN4wmV6ekwUy6h-XabhsuV4YutkrrD03O2yvRseOBxX4uk9jwW9oxrLDOkfZDK/s1600/slider-arrow-right.png) no-repeat;margin-left:-40px;border-width:0;width:43px;height:45px}
</style>
<form id="searchbox" method="get" action="/search" autocomplete="off"><input name="q" type="text" size="15" placeholder="Enter keywords here..." />
<input id="button-submit" type="submit" value=" "/></form>
3.


<style type="text/css">
#searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgm_F_0MQ00cUP7Uq1oEsCoSSZbvnECOYmdDHRViVAk2VM_QZ4FdMQ9GS9u0qQFLGNV_H8sCX6r1Wga9eiqQVoeaUZK7h4ovh4nRRawfFGy6xKlaPUbVaCIffYY5Yw7-aek8mkyWbnJGMgv/s1600/searchbar.png) no-repeat;width:208px;height:29px}input:focus::-webkit-input-placeholder{color:transparent}input:focus:-moz-placeholder{color:transparent}input:focus::-moz-placeholder{color:transparent}#searchbox input{outline:none}#searchbox input[type="text"]{background:transparent;margin:3px 0 0 20px;padding:5px 0;border-width:0;font-family:"Arial Narrow",Arial,sans-serif;font-size:12px;color:#828282;width:70%;display:inline-table;vertical-align:top}#button-submit{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgiXfq1TDa9j4TXF0T80sO4hfDksqTpCJmhJhtOepgp7TJdXRv96BmVSmkaVt2jopQoQvtUwOMGVo7bzoTKPcoiQYqKO3XYiMAa-Xd7344Xwo_meuzJMysfuzDZRP8ECL6Uo6bXWY76BXeq/s1600/magnifier.png) no-repeat;border-width:0;cursor:pointer;margin-left:10px;margin-top:4px;width:21px;height:22px}#button-submit:hover{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqiWOaZi_7p8kzt7g_nBt8n7NELTtF2ofTUOBW6KF7m47G3K-Y5ua8LS40hqxaamimmWfJ2sTJBcY5QqkoxWXd5b6Mm1rBcak0P3aB9DvSJ4HPdnanzJYzLMKnw-ZHyfRE-j3lAW5PSiVU/s1600/magnifier-hover.png) no-repeat}#button-submit:active{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqiWOaZi_7p8kzt7g_nBt8n7NELTtF2ofTUOBW6KF7m47G3K-Y5ua8LS40hqxaamimmWfJ2sTJBcY5QqkoxWXd5b6Mm1rBcak0P3aB9DvSJ4HPdnanzJYzLMKnw-ZHyfRE-j3lAW5PSiVU/s1600/magnifier-hover.png) no-repeat;outline:none}#button-submit::-moz-focus-inner{border:0}
</style>
<form id="searchbox" method="get" action="/search" autocomplete="off"><input name="q" type="text" size="15" placeholder="search..." /><input id="button-submit" type="submit" value="" /></form>
4.

<style type="text/css">
#searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCrFOHa9UomCA4_LJv-D3k42zpS_Hr2_aLfHxdJrCbs68xxl4QsaegkSL9UNLTYUMFwyB6x_6IkBJVZAPHwDT28P8JqpK665rIczarWlhZnd7Eos1ibC1xsdhpvqDlx6JVj4SX2BnDk3qv/s1600/search-box.png) no-repeat;height:27px;width:202px}input:focus::-webkit-input-placeholder{color:transparent}input:focus:-moz-placeholder{color:transparent}input:focus::-moz-placeholder{color:transparent}#searchbox input{outline:none}#searchbox input[type="text"]{background:transparent;margin:0 0 0 12px;padding:5px 0;border-width:0;font:italic 12px "Arial Narrow",Arial,sans-serif;width:77%;color:#828282;display:inline-table;vertical-align:top}#button-submit{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTos4w9l6xXKJ7Nbe8tdZmXlXRPoVZTcx9QmdLrYGliGejvPb2gwAWn-v57l3gNUrLXzNwSWgMl1PBk4RpDrwjnvq9sQmu8cKmw0gouiMMDCHPrI042pMW490VrgN6ZUaoy5uLAkLZ8Lrx/s1600/search-button.png) no-repeat;border-width:0;cursor:pointer;width:30px;height:25px}#button-submit:hover{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtCiC7uuKwbETu1sBizGL39hUbZtmFdRUgEHSnUjPkM5A8ZQqqGLvfpJ39W6YcGQ8S1pey9mRLgCH7IVMEVun4isyWqJLK7vNsy_Vn7ji72Zf6oTUcb1j01FDErAouCeziiE6AvwS5J-DC/s1600/search-button-hover.png) no-repeat}#button-submit::-moz-focus-inner{border:0}
</style>
<form id="searchbox" method="get" action="/search" autocomplete="off"><input name="q" type="text" size="15" placeholder="search..." /><input id="button-submit" type="submit" value="" /></form>
5.

<style type="text/css">
#searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLpcaKhoiu27616gKxM5TFL7-4UI6jDrhKUC4BPk8TECayw2mdCyTdVKAwjuuvIntwcSKgs-QvWuak2_RT1OoDE6DrBWyslnGscT8cANoZeI19y0ST3aDgwh-6hH3ZKMYAatOuT5nYQ4d2/s1600/search-box1.png) no-repeat;width:250px;height:65px}input:focus::-webkit-input-placeholder{color:transparent}input:focus:-moz-placeholder{color:transparent}input:focus::-moz-placeholder{color:transparent}#searchbox input{outline:none}#searchbox input[type="text"]{background:transparent;padding:2px 0 2px 20px;margin:10px 15px 0 0;border-width:0;font:bold 16px "Brush Script MT",cursive;color:#595959;width:65%;display:inline-table;vertical-align:top}#button-submit{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOJ2L6zCucraBcj7eU8wLj7GaPORlPbtCaUEhDcncinTYsDhXOHLtfaUnWf6FXmnfcKAYK13BGVVeDsAp34XEwKVSwfVo-4Lmxhe4UafS5Jpqc80C5zblHwlrF2I6OMiUbl4TIwu9vsLrK/s1600/magnifier.png) no-repeat;border-width:0;cursor:pointer;margin-top:10px;width:19px;height:25px}#button-submit:hover{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFPrJ2lgbup1_yEwqmR5ppR-Xxrz22YuqDP5Sf2eL7YGH4EQ2D1LQ0toShJUaslMTA2JmC4zFiIkKsgzqoj0rPpGb8TRzM6mc_JSWCRwKa-qqJ6WyFgkJA9k_Nqy4hTBWkt7PjxvDxL-Fc/s1600/magnifier-hover.png) no-repeat}#button-submit:active{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFPrJ2lgbup1_yEwqmR5ppR-Xxrz22YuqDP5Sf2eL7YGH4EQ2D1LQ0toShJUaslMTA2JmC4zFiIkKsgzqoj0rPpGb8TRzM6mc_JSWCRwKa-qqJ6WyFgkJA9k_Nqy4hTBWkt7PjxvDxL-Fc/s1600/magnifier-hover.png) no-repeat;outline:none}#button-submit::-moz-focus-inner{border:0}
</style>
<form id="searchbox" method="get" action="/search" autocomplete="off"><input class="textarea" name="q" type="text" size="15" placeholder="Search here..." /><input id="button-submit" type="submit" value="" /></form>
6.

<style type="text/css">
#searchbox{width:280px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgrE0s02PXk0xEuIs8CrxicT9aCqe4DmHt_KNdivORtBsnNzor2VISwlxeZ1S-SFUVjOfyZCb5awmayVUIYPZ_nlvfXHzXwu3wTp-9ltIOBwqVCFHSFdoaU0-Wsdat5FIhdfNZuz9kUrWaI/s1600/search-box.png) no-repeat}#searchbox input{outline:none}input:focus::-webkit-input-placeholder{color:transparent}input:focus:-moz-placeholder{color:transparent}input:focus::-moz-placeholder{color:transparent}#searchbox input[type="text"]{background:transparent;border:0;font:14px "Avant Garde",Avantgarde,"Century Gothic",CenturyGothic,"AppleGothic",sans-serif;color:#f2f2f2!important;padding:10px 35px 10px 20px;width:220px}#searchbox input[type="text"]:focus{color:#fff}#button-submit{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiSnQPhc0nL2kvxSwdSxbM0exRRZ1Dn46x-sm1Z45IJMVgJHUAFOtCDwC3aLc9Zn4Tk9jHwbKIhfeKz4y2yrN5hU3g0DSqRFQZBEFgrPS6sM2mBsNoaoQdAy3OC9RUf8fUdnk-nn9IXK4dM/s1600/search-icon.png) no-repeat;margin-left:-40px;border-width:0;width:40px;height:50px;cursor:pointer}#button-submit:hover{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWptJ5d4SSFeHHAkbWYkEkq35e7goydpgcijHFYwELsvk-Y7lQnylup9idH98mH1l8sbjyQOuglBk37baSSqAnGZ6u_WxVQ4Av2O5bGVRsJAngkA-PoZ-nQTzYg_KEQYEb3IWPOK_Z7pdt/s1600/search-icon-hover.png)}
</style>
<form id="searchbox" method="get" action="/search" autocomplete="off"><input name="q" type="text" size="15" placeholder="Enter keywords here..." /><input id="button-submit" type="submit" value=" "/></form>

Share this

Related Posts

Previous
Next Post »