Search Box Cantik Dan Stylish Untuk Blogger

Search Box Cantik Dan Stylish Untuk Blogger - Belakangan ini sepertinya rada malas posting pasca lebaran , Ya semua itu mungkin karena adanya fenomena di hari lebaran yang mengeikan . Bukan soal Mercon dan korban mercon ataupun keadaan semacamnya , melainkan mengenai Trafik blog yang mendadak anjlok . Ya , banyak sekali ternyata para blogger yang mengeluhkan keadaan ini dan bahkan sampai panik sendiri karena kunjungan merosotdi hari lebaran .

Yah mungkin itu karena banyak sekali pengguna internet yang mudik lebaran dan sibuk dengan silaturahminya sehingga tidak sempat membuka internet .
Namun setelah lebaran hampir seminggu berlalu sepertinya trafik akan kembali normal , dan untuk itu maka saya juga harus menyiapkan berbagai materi yang layak untuk dibaca . Dan materi kali ini kita akanmembahas mengenai Blog dan widgetnya . Dan yang akan kita ulas kali ini adalah Widget keren Kotak pencarian atau yang sering disebut dengan search box for blogger .

Kenapa saya merekomendasikan ini ? Karena mudah pemasangannya , tampilan dan prforma OKe dan yang paling penting adalah GRATIS hehe . Oke langsung saja kita mulai membahas caranya dari pada kelamaan .

Dibawah ini ada 6 Style yang bisa anda pilih salah satunya atau bisa langsung pasang semuanya biar rame .

Dan cara pemasangannya adalah seperti dibawah ini .

1. Login Blogger
2. Layout
3. Add Gadget
4. Tempelkan script Search Box 
5. Save

Style 1

<style type="text/css">
#w2b-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiU5lYXKFJvHAgsYeaOdLxW_nBWC0pc6GpuywA_rkp1MyfH-0uNOD8TL502D_n9z0-Tj7zdatVRste4iudGdJ2GWNNfXuZukA_Mw6BzDzZi-9ZiEQxgFhLg32gSxv1Dtj_K3QaYeQ859Trg/) 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/AVvXsEjuBavVDzck7Dl6gqjKNjTz8Dq9BkPt8eh01dXO4Sg-wsTXqC2eCouC-9iHN-lnZ2ZHLcpgbcWSWb7F87grnbFdwQsDgzC9-C4lSNpaTkn5jxib9I8AaEnEhHSkuJIt9gb42HT8jQLVlP6Z/) 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/AVvXsEgh-qIe6jZoxgUzEpIoNHYeFIRVgQaavkOiie-lEdUHFLwHbljC3bDgV7__jYrBDKldWwzJoayjZG49sYK3d0ElYanJdEKSsbTVcej41Qb47sOi1JgpEoP7uUqbDOKhA6pWRkLFf38Wap4k/) 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/AVvXsEhhZMDLPiMDZabsR17oiZm_rtZQoE-VDQHgjFQXkrPl9TiRcJNKPT3K8CqFpS8iLT0TfO2IeYZ3oKEk3Jw2qQze-qF9_sRKvKMduIcUjBGhT0Hr8SwU_Axdl9j1hRG5kivV7a9OI3mvoWbZ/) 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/AVvXsEhSbzQ4MAp6qH03diFRjB4Ls7yNlEYyyOF_tY-7Nak0bieuxaCbqWP9PwGzmP9o8HBFa3K4tQG6lFYMbpHqBl4upWWc6SvjcRAnvQLM_oNbcW9yL6TVqL0IHnOewJw_CnkRjxs6XTA2LL9P/) 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/AVvXsEgHtamd_BFps5hZHDrKnh2CLeeYfJuCSVP00Gk7apOh0f_Hij2APaCiJaBD8wY47OEjnlG5HFOMrzKnmCltCU_LFq4_St-01z58yyyWVQvT4QBdmMws9Yhc1C6t_DvhHqD_PXUvL6a4g5BL/) 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>

Pasang Search Box Cantik Dan Stylish Untuk Blogger dimanapun anda sukai pada Blog anda  , dan semoga artikel mengenai Search Box ini berguna untuk anda yang ingin memperlengkapi kinerja Blog anda .

Author : Ichi Hikaru

Share this Article

Related Posts