Search Box Simpel dan Keren Untuk Blogspot, dari judulnya saja sobat pasti sudah tahu apa yang kiranya akan saya share kali ini. Search Box (kotak pencarian di blogspot) pastinya sobat sudah tidak asing lagi mendengarnya, jadi saya rasa tidak perlu panjang lebar saya menjelasakan kembali tentang apa dan fungsi dari Search Box/kotak pencarian di blogspot ini. O....iya, dibilang simpel karena kita hanya menggunakan kode CSS saja dalam membuatnya, pastinya gak ribet deh.

1. Login ke akun blogger sobat

2. Masuk ke rancangan/design

3. Pilih Page Element/Elemen Laman

4. Kemudian Add Gatget dan pilih HTML/Javascript, dan masukan kode search box dibawah ini:

Style 1

><style type="text/css">
#w2b-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQsYxzLm3Rz_8JSxVat0le9HbdZGvaRCRIzhnilydNTTcFjB_g9o6U9H5HyqA-kiEPmmBO9xFZqDTnsS3XwN0pQdhmDYKCkj9M-FsbK76q0WOPw1cA1L6ih73BygJpgxydN6zqcG_lM-Y/s320/kode-blogger_searchbox1.png) 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>

Style 2

<style type="text/css">
#w2b-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVJUdGvy354vf5WXeRdjQmMva5_RsYr3EB0vyoUFOOfDmWXgemTTfMj3zHG8hahPcKBc5PpwOJZ_gDHzVsKFKqpf16CfOJ7luY1vbBjtwBvPuNW5rYBivhbKP-5nseDlI7lJ95oN_dP5g/s1600/kode-blogger_searchbox2.png) 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>

Style 3

<style type="text/css">
#w2b-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbvsBw4f3O-nyD19gjaC9dP1i655F3p6gOxC76CeG3LQgYuvK0UR38-wBS-iO6EGdVTW5XR0oikdwwXCEhvt4bpBI5w_wZQkybeMYJu67b7axo_xunDMbifZIM3KZLZm-qRvubV6Pyne4/s1600/kode-blogger_searchbox3.png) 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>

Style 4

<style type="text/css">
#w2b-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6-SSJZoTIizrHke0eDFPjG1MdScME3Sygm9Ugs6MakxRQk5PMt3-2NYXIeDs40TKAY5wDB6KPjhRNEAHOWVGCMHwkHFBsOeCmn1Csz6df54TMPsFB-s4r3O9awBa_EDIGPs9H2ngV9GE/s1600/kode-blogger_searchbox4.png) 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>

Style 5

<style type="text/css">
#w2b-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHJcGwsH33JMhSFbQI7RL_KTYD_NHt2cdK4NRH-vXnTTBc0vYCtXyBUlwqmvR4s3YqP4UKBzcBMxTeZfqdsNyUB6evuGiFbJp8_suk34SByi44PIhkhNO7mJbwASLJr00v0zxDL4FU4zQ/s1600/kode-blogger_searchbox5.png) 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>

Style 6

<style type="text/css">
#w2b-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOC_ypuX_YOfd4iEvZoWjcPyW5jEZWGBpMDKUTIsAI8ErKVXO3xTi0kR7E8ZIxfEkboxvB4jLDSpIY5hM7tThzoBbRZ2lacbYSFg0VETHoDfYf65UutEH2bU7hNYK3VPQmBszevQ1n48s/s1600/kode-blogger_searchbox6.png) 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>

Sip... Search Box Simpel dan Keren Untuk Blogspot diatas hanyalah beberapa saja yang bisa saya share, pastinya ada lebih banyak lagi diluar sana.

Semoga Bermanfaat.