» » Search Box Unik Untuk Blogspot

Search Box Unik 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. 

Dan agar lebih jelasnya saya sertakan juga contoh demo/screenshot dibawah ini:



Simple-dan-keren-search-box-pack-demo

Langsnung ke TKP, dan simak langkah-langkah cara membuat Search Box Simpel dan Keren Untuk Blogspot:


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

kode-blogger_searchbox1><style type="text/css">
#w2b-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5Ex9d9Z-MA58igmrh4IomVQQuyTXlkLJCKn-b4hVw_8TWHt9gDodhsFhG_PQC-cC9GQM5hekIWPMOJEoCuvgEYIGzhakNot2DKK0e9D_C07MmnpVxLQKFH7RhH1GejLejuHUJhnG4Y5Y/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

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

kode-blogger_searchbox3<style type="text/css">
#w2b-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEist_xhnjEpiYQhoQYpeSUiV-UHUjYTXcKtzEFM79TE9De2Wr-r2o-6sO7JYslz1cs9_jcuNUggmg3FW1V7NUHA0dAHmX78ieI5-hyBiNABKIAI7SwfA0SyiKl4v5E5QP4CY-WkxduWm4U/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

kode-blogger_searchbox4<style type="text/css">
#w2b-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6zR8bVbrR9SFMuMj9k3_-bUYpKofFvg25DeDO0XEmVXYxdzMij2b2ePgn_NCfarI0iWa8IUCY3V8eYImaCZGKP20XqI9hwBZ9wnFmo8kyRiKRyGR_L6kUOZSwA7BMn-yj8OkX_9oUgys/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

kode-blogger_searchbox5<style type="text/css">
#w2b-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgksqOyXJt2GHDsK8Nod2_mhzFvZia0rk0_oSVxo89Aq20bGUanq-5n222ZXPwXSubbQCo4qLTaF-ygUwVuGYW9zFaU87zGhhytzRIjlZCbTLLfTPM2ihx5v_CYDhB1tF-pFAWlEZE6thc/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

kode-blogger_searchbox6<style type="text/css">
#w2b-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgE0Q6etfVHkKW75qdZRhB78bemTi01bZMY1CaXnOsGQ7NY7qGt_ivRxmiUUn-OnTi3FBtK_QJ2KE5efkR8h_Pvaboy_Vrp8n85dThlXUpvIFIbPALpt1NhzTOf7ICVQB2GMcMVaZ8K5m0/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 Unik Untuk Blogspot diatas hanyalah beberapa saja yang bisa saya share, pastinya ada lebih banyak lagi diluar sana.
Semoga Bermanfaat.*source
00.57

0 komentar Blogger 0 Facebook

Posting Komentar

Langganan: Posting Komentar (Atom)
 
iTEKNOPEDIA © 2013. All Rights Reserved. Share on Blogger Template Free Download. Powered by Blogger
Top