Cara Membuat Kotak Pencarian Keren

Kali ini Saya akan membahas Cara Membuat Kotak Pencarian Keren.
Seperti yang kalian tahu kotak pencarian sangat membantu untuk kita mencari artikel yang ingin dicari.
Kotak pencarian yang Saya berikan ini ada 6 jenis dengan warna yang berbeda-beda dan kalian tinggal pilih saja sesuai keinginan kalian.

Tanpa berlama-lama berikut di bawah ini langkah-langkah membuatnya ↓

• Login ke blogger.com, jika sudah,
• Pilih Tata Letak → Tambah Gadget → pilih HTML/JavaScript
• Masukkan script di bawah ini dari 6 jenis, pilih salah satu

Hitam

<style type="text/css">
#w2b-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiE83tiXarqzhdMVmcBQT-G5P7U0t1XD67joK7KwROIpYofSeLMAnyfgPqu99goc6WBGMrrST8CLrbJUtnDDAMBzIpS1pbOSoHMBRM2DHdgjQOLfEI7TGpRjq7pV_LFvJyrVFdjvKURPBDr/) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;}
form#w2b-searchform{display: block;padding: 10px 12px;margin:0;}
form#w2b-searchform #s{padding: 6px;margin:0;width: 235px;font-size:14px;vertical-align: top;border:none;background:transparent;}
form#w2b-searchform #sbutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;}
</style>
<div id="w2b-searchbox">
<form id="w2b-searchform" action="/search" method="get">
    <input type="text" id="s" 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="sbutton" />
</form>
</div>

Orange

<style type="text/css">
#w2b-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjztAzlRS5H1AODtbQM-tlhE1HiLdLN91MGIpTRrSBEvb6APlUQ1_j2BqXpr_WxRe1E_dn5RI0Mq89UJQZzNyxFuMCFUZ6vYgzi_EuMvFqo0RVJaH-WlfONwyZ_3DMq60nw1kWWtLeMfiQB/) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;}
form#w2b-searchform{display: block;padding: 10px 12px;margin:0;}
form#w2b-searchform #s{padding: 6px;margin:0;width: 235px;font-size:14px;vertical-align: top;border:none;background:transparent;}
form#w2b-searchform #sbutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;}
</style>
<div id="w2b-searchbox">
<form id="w2b-searchform" action="/search" method="get">
    <input type="text" id="s" 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="sbutton" />
</form>
</div>

Merah

<style type="text/css">
#w2b-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7paYcKObjcivwjzGMK6rW5YfbI63kYSNIEChO2dMNLCcO42uPfcXeEX0g04KGirbxDatke5ezRBS-_k_ipsQGvoWBwDjgFvyASQQSAxcmOoYv-63Uv10II8sOKqupVvSDLdf73VFbIlO9/) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;}
form#w2b-searchform{display: block;padding: 10px 12px;margin:0;}
form#w2b-searchform #s{padding: 6px;margin:0;width: 235px;font-size:14px;vertical-align: top;border:none;background:transparent;}
form#w2b-searchform #sbutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;}
</style>
<div id="w2b-searchbox">
<form id="w2b-searchform" action="/search" method="get">
    <input type="text" id="s" 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="sbutton" />
</form>
</div>

Putih Elegant

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

Hitam Elegant

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

Biru Elegant

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

Selamat Mencoba !