Search Box Simpel dan Keren Untuk Blogspot

10.01 Diposting oleh Unknown

Search Box Simpel dan Keren Untuk Blogspot, dari judulnya saja sobat pasti sudah tahu apa yang kiranya akan saya share kali ini. Setelah kemarin saya posting tentang Cara Membuat Link Nudging Dengan jQuery, saya melanjutkan untuk melengkapi koleksi tips dan trik di blog saya 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. Oia, dibilang simpel karena kita hanya menggunakan kode CSS saja dalam membuatnya, pastinya gak ribet deh.
Dan agar lebih jelasnya saya sertakan juga contoh demo/screenshot dibawah ini:




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/AVvXsEgiPX2xtV8mjSt9O98Ckx-IGaTnN0HqPBuIlsswmTZvwhTlkkaXbd6lONK1xJLdltPArIOwXOsIdVscmsjDMVVHXJgqQI9uLiGXgxDXzE_1vv2PT-pdweoLAdkidldmYVUb4HRUoTJLAkM/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/AVvXsEgfa6fup3gzzty4t2G1aNhKc-q3k7JHcjU4V9zicJcnJi6aV7bSBIj51sa2JeEyzdfTlV6HMqcPkq5czlD7NW3lOHgDRuAYCbj8uQMpZ9KF8JG6bxGSG7O_tX9ThQZKdvfUMRUiYPF5t-o/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/AVvXsEga9BG_RYWSbDSwA3C-H51t-T2_cfFPcyp9uvD3Zq6O6YMgisxpuJuiSrhFwQPpaQ5yGzvBMPRrkRgB33YTc6vKPVEREz77sXP3JaqVc4cng3x8AiLIK6o4gkn56b8-IWTscXee480hYxY/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/AVvXsEgWCQzIRGWbUzHri2NtC-WUoYBbs5WtgFz1bIvx1LyY5e3Meb63pWUxpcPsXgM3UT6KeFX8r6EPzJJW3i3NSlPhI4SMN20NC62vJ-0uIVverBe3LCv_1z30xrek6CUgySwRVuXwSrMm5Io/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/AVvXsEifK-CEWY6cpSv7Qkihe34BmTosvKOq6Au-7IRBTs9ri_wkxFgIkbcXvmbMMOJLcRODWPAzdBcVIfT7zcV52WGVM3W6rLQ_0QwlVRH-fR165hCZgT8oyIm_6GlnaF1F0rVFlWQvovsMLWU/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/AVvXsEhv7KaGOYeUyxfOE2oULmyPaVLOpX5XxqCBv_68pf5_EGTXhoqOjJX509JkPK6h7B89R4XDoUQYGp1-XWSM_2mA42diluZSFF-9JhAwNWiHn6FPGCA-5OxM3DmTbKqKXGIVZ7zXA9lqAW4/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.

Artikel Terkait:


0 Responses to "Search Box Simpel dan Keren Untuk Blogspot"

Posting Komentar

Langganan: Posting Komentar (Atom)
 
Return to top of pageCopyright © 2012 | Blog Koleksiku Saja Converted into Blogger Template by Gusmanto