Widget Search Box Keren untuk Blog

6 Widget Search Box Keren untuk Blog. Widget search box untuk membantu pengunjung menemukan apa yang mereka cari pada blog kita. Dan tentunya ini sangat berguna. Selain itu 99,99% para blogger memasang widget Search box pada blog mereka.

6 Widget Search Box Keren untuk Blog

Widget search box ini bisa anda pasang untuk Blogger / blogspot dan juga wordpress. Blog Bamz akan sharing untuk blogger saja yah! maklum lagi males buka wordpress :p. Berikut ini cara memasang widget search box di blogger/blogspot.

Cara memasang widget search box di blogger

Login ke Blogger > Edit HTML > Add Element baru > HTML atau Javascript
Copy salah satu kode dari 6 widget serch box keren di bawah ini dan paste pada element baru tadi.

Widget Search box 1
<style type="text/css"> #a-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRmlv02h83L6YiOKq-8MlQ-1XnvIxFcQcd4Z50GL2ilRYtt__JjnLe8EYw3VPEb-EYs5Mm_rrL6D5zLFo3LR4-kRzzWY1yyQMRGhkdahi6NmAA4KJTMhwSBzUvhOZpnXod206to1L4Zfd0/) 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>

$0AWidget Search box 2
<style type="text/css"> #b-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjAs7tvXKLnOVE4wj9S6wmpA4_HQP2edcgXw2wcLzC7zNokpCHPzgFTwTf6w_VuYCMRysy9sbxYtmwsDYexpvy0cLhC5OwUrD9WEg9kXnH6AgB8UHCeEtbHVbaY_zBTYDMUbsc54HFXwr6I/) 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/AVvXsEirFQdJzWwdxDb0Zi1a5Uourh0WJJztR3djJYoVn_MUag4AEY8M5Vv1uDBed9HsgcKB3bEeDePKhyWnkvP1iklI25xU6jHbtnHNjpTNUCSf2nnAQlcQytjqeQsbfCN4_e7Aq3TeepCgcQJT/) 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/AVvXsEjFIfWJOF-hhlUGG3lPpYoDY6H8HntitkpNyu-k0kEk-iMTHY4WurvnYPXAmzz1AHitE50Xqo9jvsO4AmayXjdu_dT-7MqNJH824Y6TOxPlKTKdoh9lSLb0YGBrKbHKsHKl8eTVuCDvjdDk/) 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/AVvXsEibcHDjqIjn8RVMqJnKDqVY4zhw-b3T51X1EhfzggKKdOLKc9LICdxYsfwbxCT_ivLn7lsrTvlgspML5IVBuW3zpNsAQNPZxafOBFZURvaOowXHFD2aWvGDYsuyCZXlXdzLcfseFAk55Sav/) 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/AVvXsEgcTGkHCVzypkdy8lVe4jJ5svN8yg0o3qS8HrrerI0q_Fy-wzAxQMuFePWDM7qr5Hor8YppYCbjGecFNLmyMSMRKknalz2CRIQzvHRKHxVgg2g_XiYYtUzMmNgWWl48s9GTnhespLmmjzXl/) 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>

width:307px >> Silahkan ganti dengan lebar widget blog anda.