Cara Membuat Box Pencarian Blogger (3 Kotak dan Demo)

Cara Membuat Box Pencarian Blogger (3 Kotak dan Demo)

Widget Gadget kotak pencarian blog sangat diperlukan untuk Blogger sebagai Pembaca dapat langsung mencari kata kuncinya yang ada di halaman blog.

Meskipun Blogger menyediakan widget kotak pencarian blog secara default. Tapi kebanyakan seorang Blogger mengganti kotak pencarian blog dengan yang lebih menarik lagi.

Saya di tutorial kali ini membagikan beberapa script kode widget kotak pencarian yang lebih keren dengan warna yang menarik, sobat bebas untuk mengcopy paste untuk memilihnya.

Manfaat memasang kotak search engine di halaman Blog Blogger:
Meskipun bermanfaat bagi pembaca. pembaca dapat mencari posting tertentu dari posting Anda dalam waktu cepat. Dan juga berguna untuk Blogger karena mereka dapat dengan cepat mencari posting di sana dan dapat menggunakannya ketika mereka membutuhkannya.

Berikut script kodenya dan demonya ;



<style type="text/css">
#w2b-searchbox{background:url(http://lh4.googleusercontent.com/-Pd1zyUMhsVo/TeixHnaB1hI/AAAAAAAAA6M/p-Iz_WGMQ3M/way2blogging_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 type="text/css">
#w2b-searchbox{background:url(http://lh3.googleusercontent.com/-peHEeRB58M8/TeixHZml3oI/AAAAAAAAA6E/J2_zg9Fn8PI/way2blogging_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 type="text/css">
#w2b-searchbox{background:url(http://lh5.googleusercontent.com/-TN5qYaRnSR4/TeixH2TVJlI/AAAAAAAAA6U/gYrDmDItWJQ/way2blogging_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>


Cara menambahkan kotak pencarian di blog:

Buka akun blogger anda.
Klik pada tata letak.
pilih tambahkan gadget.
Klik pada menambahkan html / javascript.
Pilih kode script kotak pencarian Blogger yang saya bagikan.
Setelah itu, Klik simpan.

Cukup sekian semoga bermanfaat untuk para sahabat blogger lainnya, bila menemukan kesalahan atau tidak muncul di halaman post tanyakan langsung ke kotak komentar di bawah ya sob.
Advertisement

Baca juga:

Buka Komentar
Blogger
Disqus
Pilih Sistem Komentar

No comments