Membuat Widget Search Box Di Blog

Untuk kali ini saya akan memberitahukan beberapa Search Box yang sederhana untuk mempercantik tampilan blog. Cara'y sangat mudah tinggal melakukan beberapa langkah dibawah ini.

1. Login ke akun Blogger anda
2. Masuk ke tata letak 
3. Tambah widget/gadget > pilih Html/JavaScript
4. Lalu CoPas jode dibawah ini. (sudah sesuai urutana gambar)



Widget Search box 1

<style type="text/css"> #a-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCVL738HdnL3bIBGi349wqsLlBMpNlYjQ0TTBMLdyNhstZhrs0_mR6XOSD1e8fl1F288xdFdUKBgmsqIe93KKaCcuETLgDOmxu27GRIRFENv3xpZcaAo64Q7roIRh5TOrLKoT47NHu-ZMh/) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;} form#a-searchform{display: block;padding: 10px 12px;margin:0;} form#a-searchform #a{padding: 6px;margin:0;width: 235px;font-size:14px;vertical-align: top;border:none;background:transparent;} form#a-searchform #abutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;} </style> <div id="a-searchbox"><form id="a-searchform" action="/search" method="get">    <input type="text" id="a" name="q" value="Search..." onfocus='if (this.value == "Search...") {this.value = ""}' onblur='if (this.value == "") {this.value = "Search...";}'/>    <input type="image" src="http://img1.blogblog.com/img/blank.gif" id="abutton" /> </form></div>

Widget Search box 2

<style type="text/css"> #b-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihz2HApt3xk-lqs-kku6dKvuhc7gcPWYUOhJEoT6nkyZE6nWF6AWGKz1nSD8-gsTdF7DbR0yXmiOOvxowGGwp4C9uq-bUv9KxT6N-QecnuVmJk_P8H8LjWC6A4MbjsaalmsofERdyf4ASz/) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;} form#b-searchform{display: block;padding: 10px 12px;margin:0;} form#b-searchform #b{padding: 6px;margin:0;width: 235px;font-size:14px;vertical-align: top;border:none;background:transparent;} form#b-searchform #bbutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;} </style> <div id="b-searchbox"><form id="b-searchform" action="/search" method="get"> <input type="text" id="b" name="q" value="Search..." onfocus='if (this.value == "Search...") {this.value = ""}' onblur='if (this.value == "") {this.value = "Search...";}'/> <input type="image" src="http://img1.blogblog.com/img/blank.gif" id="bbutton" /></form></div>

Widget Search box 3

<style type="text/css"> #c-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgu74ej9zGBpqyrlEeRBfEoHPCO2Rg2efDmoBXlJb7lk6j4y7OYLmdmneCEldMNsh95EXqP4C3PrP-b28fkL5AQVDBIUEhdT8ifUcjV9ppzdeElUMPNG8upF9MPTQCoKvtEQyn5ZPhJCNRs/) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;} form#c-searchform{display: block;padding: 10px 12px;margin:0;} form#c-searchform #c{padding: 6px;margin:0;width: 235px;font-size:14px;vertical-align: top;border:none;background:transparent;} form#c-searchform #cbutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;} </style><div id="c-searchbox"><form id="c-searchform" action="/search" method="get"> <input type="text" id="c" name="q" value="Search..." onfocus='if (this.value == "Search...") {this.value = ""}' onblur='if (this.value == "") {this.value = "Search...";}'/> <input type="image" src="http://img1.blogblog.com/img/blank.gif" id="cbutton" /></form></div>

Widget Search box 4

<style type="text/css"> #d-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgV7aDnnwh9sMCnFCcof1XQHlfIIXkFmHEDRk3tfjZxXauHMZL27Sk1ht1A0Q2Ql7KUZkxm7V__KLqF5p_0Syu_UZfjLxS7nBkrsFVbDYKcSh2CT79fw9ifSriKymqwr_C2lcPx0UlVK8Cx/) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;} form#d-searchform{display: block;padding: 12px;margin:0;} form#d-searchform #d{padding: 6px 6px 6px 26px;margin:0;width: 215px;font-size:14px;vertical-align: top;border:none;background:transparent;} form#d-searchform #dbutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;} </style> <div id="d-searchbox"><form id="d-searchform" action="/search" method="get">    <input type="text" id="d" name="q" value=""/>    <input type="image" src="http://img1.blogblog.com/img/blank.gif" id="dbutton" /> </form></div>

Widget Search box 5

<style type="text/css"> #e-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjeWt47nog-5daRa9EC9KzwD0BUs3LTucfi4F0SmCobBSWjCaLuA0eTa1P-OEmHoXHdQktsR8vdt0rFN1zQRafRk-OHheHfiv6YXPkhNfQYtH4gNPIpOTzBW5ugqvSQ-rkLK5XRES5Mjiv6/) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;} form#e-searchform{display: block;padding: 12px;margin:0;} form#e-searchform #e{padding: 6px 6px 6px 26px;margin:0;width: 215px;font-size:14px;vertical-align: top;border:none;background:transparent;} form#e-searchform #ebutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;} </style> <div id="e-searchbox"><form id="e-searchform" action="/search" method="get"> <input type="text" id="e" name="q" value=""/> <input type="image" src="http://img1.blogblog.com/img/blank.gif" id="ebutton" /></form></div>

Widget Search box 6

<style type="text/css"> #f-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghJKOfltwpDrnGx_Pmfv4N3jFV0_TPaTVFR9WW4dsSU0Y1vfYd0stwALxTcAdhtmN6eDVr2m0F3CR-pIsia4ZESpLXRLVZyaGlgCAeQEm5wnB054iquCCKqBK3Na_rxXYixDdXcZtSG8T2/) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;} form#f-searchform{display: block;padding: 12px;margin:0;} form#f-searchform #f{padding: 6px 6px 6px 26px;margin:0;width: 215px;font-size:14px;vertical-align: top;border:none;background:transparent;} form#f-searchform #fbutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;} </style> <div id="f-searchbox"><form id="f-searchform" action="/search" method="get"> <input type="text" id="f" name="q" value=""/> <input type="image" src="http://img1.blogblog.com/img/blank.gif" id="fbutton" /> </form></div>

+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++

Widget Search box 7

<div class="span-7 last" id="topsearch">
<div id="search">
<form action="/search" id="searchform" method="get">
<input id="s" name="q" type="text" value="Search" onblur="if (this.value == &quot;&quot;) {this.value = &quot;Search&quot;;}" onfocus="if (this.value == &quot;Search&quot;) {this.value = &quot;&quot;;}">
<input src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1cK3CO4K64DjZDsmjCS49iEGl8y1V7-Hvyo9W2-EbYhzV_Y-Q4J-w2CZVNdWmDVkBsnuiCQrIjkBF3zW27iROaw8BAXzY-oGOku8J49Sk6t1JigYJbTA59N82HIKem_-klGzcnzt_tkE/s1600/search.gif" style="border:0; vertical-align: top;" type="image">
</form>
</div>
</div>

5. Setelah dipilih kemudian simpan.