Trik Membuat Kotak Pencarian Keren Di Blog

• 

  Update Android L Tersedia Untuk OnePlus One

  Jul 06 2014 - Hanifa
• 

  Cara Mempercepat Kinerja Android Dengan Mudah

  Jul 05 2014 - Hanifa
• 

  Spesifikasi Lengkap HTC One (M8) Dual SIM

  Jul 01 2014 - Hanifa
• 

  Spesifikasi Lengkap dan Harga Micromax A093 Canvas Fire

  Jul 13 2014 - Hanifa
• 

  Samsung Galaxy Note 4 Tawarkan 2 Warna Baru?

  Jul 08 2014 - Hanifa
• 

  Spesifikasi Lengkap dan Harga Huawei Ascend G630

  Jul 12 2014 - Hanifa
• 

  Fitur Terbarunya iOS 9 Akan Hadir di Bulan Juni Depan

  May 21 2015 - Hanifa
• 

  Sekarang Youtube Tersedia Dengan Tampilan Hitam

  Sep 09 2018 - Hanifa
• 

  Bocoran Spesifikasi Oppo R7 Plus

  May 18 2015 - Hanifa
• 

  Chip Apple A8 Akan Menjadi Prosessor Mobile Tercepat Di Dunia

  Jul 12 2014 - Hanifa

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 Warna Merah
Contoh Search Box

Kode HTML :
<style type="text/css"> #a-searchbox{background:url(http://hostinghanifanews.files.wordpress.com/2012/08/kotak_search_warna_merah.png) 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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjgjForioTcyptYREV3TpKKKKHCVhaUl9FHB6yqrn2Kqysh-jD1-9Tgenfm_P4jSVAIKaWO87oIHrYUirdUkxasEmwhNvDM3xYFlJOl_Wej2CdsiY0OMGysJcP9zkkEmLGY24v_fUFWL_4/s1600/blank.gif" id="abutton" /> </form></div>

Widget Search Box Kuning
Contoh Search Box

Kode HTML :
<style type="text/css"> #b-searchbox{background:url(http://hostinghanifanews.files.wordpress.com/2012/08/kotak_search_warna_kuning.png) 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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjgjForioTcyptYREV3TpKKKKHCVhaUl9FHB6yqrn2Kqysh-jD1-9Tgenfm_P4jSVAIKaWO87oIHrYUirdUkxasEmwhNvDM3xYFlJOl_Wej2CdsiY0OMGysJcP9zkkEmLGY24v_fUFWL_4/s1600/blank.gif" id="bbutton" /></form></div>

Widget Search box Hitam
Contoh Search Box

Kode HTML :
<style type="text/css"> #c-searchbox{background:url(http://hostinghanifanews.files.wordpress.com/2012/08/kotak_search_warna_hitam.png) 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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjgjForioTcyptYREV3TpKKKKHCVhaUl9FHB6yqrn2Kqysh-jD1-9Tgenfm_P4jSVAIKaWO87oIHrYUirdUkxasEmwhNvDM3xYFlJOl_Wej2CdsiY0OMGysJcP9zkkEmLGY24v_fUFWL_4/s1600/blank.gif" id="cbutton" /></form></div>

Widget Search box Gray
Contoh Search Box

Kode HTML :
<style type="text/css"> #d-searchbox{background:url(http://hostinghanifanews.files.wordpress.com/2012/08/kotak_search_warna_gray.png) 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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjgjForioTcyptYREV3TpKKKKHCVhaUl9FHB6yqrn2Kqysh-jD1-9Tgenfm_P4jSVAIKaWO87oIHrYUirdUkxasEmwhNvDM3xYFlJOl_Wej2CdsiY0OMGysJcP9zkkEmLGY24v_fUFWL_4/s1600/blank.gif" id="dbutton" /> </form></div>

Widget Search box Biru
Contoh Search Box

Kode HTML :
<style type="text/css"> #e-searchbox{background:url(http://hostinghanifanews.files.wordpress.com/2012/08/kotak_search_warna_biru.png) 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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjgjForioTcyptYREV3TpKKKKHCVhaUl9FHB6yqrn2Kqysh-jD1-9Tgenfm_P4jSVAIKaWO87oIHrYUirdUkxasEmwhNvDM3xYFlJOl_Wej2CdsiY0OMGysJcP9zkkEmLGY24v_fUFWL_4/s1600/blank.gif" id="ebutton" /></form></div>

Widget Search box Abu-Abu
Contoh Search Box

Kode HTML :
<style type="text/css"> #f-searchbox{background:url(http://hostinghanifanews.files.wordpress.com/2012/08/kotak_search_warna_abu-abu.png) 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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjgjForioTcyptYREV3TpKKKKHCVhaUl9FHB6yqrn2Kqysh-jD1-9Tgenfm_P4jSVAIKaWO87oIHrYUirdUkxasEmwhNvDM3xYFlJOl_Wej2CdsiY0OMGysJcP9zkkEmLGY24v_fUFWL_4/s1600/blank.gif" id="fbutton" /> </form></div>

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