Cara Pasang Kotak Search Keren Di Blog - Membuat Kotak Pencarian Keren

Cara Pasang Kotak Search Keren Di Blog - Membuat Kotak Pencarian Keren postingan Cara Membuat Kotak Search Keren Di Blog.Dari judulnya saja sobat pasti sudah tahu apa yang kiranya akan saya share kali ini. Setelah kemarin saya posting tentang Cara Memasang Kotak Search Di Blog
, 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. Oh Ya, dibilang simpel karena kita hanya menggunakan kode CSS saja dalam membuatnya, pastinya gak ribet.

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

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

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

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

<style type="text/css">
#w2b-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFvqQCmVU19yrCfaoY8ZEHp0VGDrakddfQ1HfiwC65TVALPkY9N9kyoew2WjW-1-oEAUIk7iP1yP05BzRX_PsNBfbVhSoW7AkQBIY1nM4mQgzopECAqQ0ISiTfFYh5xelu16WP-mT-bM0/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

<style type="text/css">
#w2b-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizU6oB-o_RU1GQ2FET-h9wYy3GsKWc-iya7ZJQS-Sa9Y-BxZGw5m7CTRnvzECuXdmi6n3GiekdQSf2I85fJHf_RS4MSbINcyLHK-SmChAEv7uqsc3K6piyXqYw-mfR_VSxh5Msn9AXlRA/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

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

Baiklah cukup sekian Tips Trik Blog dari BOSIMAM postingan Cara Pasang Kotak Search Keren Di Blog - Membuat Kotak Pencarian Keren. semoga bermanfaat bagi anda.

Sumber : kode-blogger.blogspot.com