Home Tutorial Tutorial Blogger Trik Membuat Kotak Pencarian Keren Di Blog

Trik Membuat Kotak Pencarian Keren Di Blog

Tutorial, Tutorial 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 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 :

Widget Search box Biru
Contoh Search Box

Kode HTML :

Widget Search box Abu-Abu
Contoh Search Box

Kode HTML :

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

Share To:

Hanifa

Post A Comment:

Back To Top