KakTutor

Salam blogger, selamat menunaikan ibadah puasa bagi yang menjalankannya. Kali ini saya sedikit berbagi pengalaman mengenai tutorial blog, dimana pembahasan kali ini adalah search box. Search box pada blog cukup baik perannya dimana widget ini berguna untuk memudahkan pengunjung blog kita untuk mencari artikel yang ada di blog kita. Ada banyak macam variasi search box dan dimana anda bisa memilih yang menurut anda cocok dengan tema blog masing-masing.

Nah, kali ini sedikit bereksperimen dengan widget yang satu ini (Serach Box), lihat contohnya:

<style>
form#zs_search {
width: 232px;
height: 31px;
margin: 0px 0 0px 0;
background-color: rgb(37, 187, 175);
border-radius: 5px;
}
form#zs_search input {
width: 150px;
height: 23px;
float: left;
margin: 3px 10px 0 4px;
border: 6px #000;
border-radius: 3px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiamW4d2ssVL283i4QnGD2HNE6pNLMDSkUOdpdVuYCrwltCV69EWdO1N3BmeJeocAVIAiPCkS66Kd_RI7gJRpKGahzZaz21n2d_GxA_zVZJhh1bGyFI0cyoOpjEsmoWg_fsfnP2zKSbiyfl/s0/sbutton.png) no-repeat 0px center;
background-color: transparent;
font-family: impact;
padding-left: 47px;
outline: none;
-webkit-transition: 0.5s;
-moz-transition: 0.5s;
-o-transition: 0.5s;
transition: 0.5s;
}
form#zs_search input:focus {
width:175px;
background-color:#fff;
}
form#zs_search input:focus ~ a {width:100px;}
form#zs_search a:hover{background:#333;
background:#000;
border-radius:8px 8px 0 0;
-moz-box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4);
-webkit-box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4);
-o-box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4);
box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4);
text-decoration:none;
}
</style>
<form action="http://itzeids.blogspot.com/search" id="zs_search" method="get">
<input name="q" onblur="if (this.value=='') {this.value='Cari Disini...';}" onfocus="if (this.value=='Cari Disini...') {this.value='';}" type="text" value="Cari Disini..." /></form>

NB: Kode yang berwarna merah adalah ukuran dari widget tersebut. Silahkan di rubah sesuai dengan yang anda inginkan. Code warna biru diganti dengan alamat blog kalian.

<style>
form#zs_search1 {
width: 215px;
padding: 18px;
margin: 0px 0 0px 0;
}
form#zs_search1 input {
width: 191px;
height: 26px;
padding: 5px 9px;
margin: -18px;
float: left;
font: 13px 'impact';
color: #fff;
border: 0;
background: rgb(0, 0, 0);
}

form#zs_search1 input:focus {
outline: 0;
background: #fff;
font: 13px 'impact';
color: #000;
-moz-box-shadow: 0 0 2px rgba(0,0,0,.8) inset;
-webkit-box-shadow: 0 0 2px rgba(0,0,0,.8) inset;
box-shadow: 0 0 2px rgba(0,0,0,.8) inset;
}
form#zs_search1 input.submit {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXvaSDO3UZ9B0l2SxHBN_J6OV3_bz4VKcePMyCr-Y1a330r_cDgTXbMoQSyzInzwZLM5WES-ipKODYlMEkY4hIR2L-_W1Tp_PyhTyESz2ydpsqfvKevbXAmf4fhVdax9A4aK1PkAUSDTS8/s1600/kokod.png) no-repeat 0px center;
}
form#zs_search1 input.submit {
width: 38px;
height: 34px;
font-weight: bold;
float: right;
cursor: pointer;
margin: -17px;
}
</style>

<form action="http://itzeids.blogspot.com/search" id="zs_search1" method="get">
<input name="q" onblur="if (this.value=='') {this.value='Cari Disini...';}" onfocus="if (this.value=='Cari Disini...') {this.value='';}" type="text" value="Cari Disini..." /> <input class="submit" name="submit" type="submit" value="" /></form>

NB: Kode yang berwarna merah adalah ukuran dari widget tersebut. Silahkan di rubah sesuai dengan yang anda inginkan. Code warna biru diganti dengan alamat blog kalian.

<style>

form#zs_search2 {
width: 215px;
padding: 23px;
margin: 0px 0 0px 0;
background-color: rgb(213, 0, 0);
border-radius: 30px 0 25px;
-webkit-box-shadow: 0 1px 1px rgba(0,0,0,.4) inset, 0 1px 0 rgba(255,255,255,.2);
box-shadow: 0 1px 1px rgba(0,0,0,.4) inset, 0 1px 0 rgba(255,255,255,.2);
}

form#zs_search2 input {
width: 191px;
height: 26px;
padding: 5px 9px;
margin: -18px;
float: left;
font: 13px 'impact';
color: rgb(3, 0, 0);
border: 0;
background: rgb(255, 255, 255);
border-radius: 27px 0 0 7px;
}


form#zs_search2 input:focus {
outline: 0;
background: #fff;
font: 13px 'impact';
color: #000;
-moz-box-shadow: 0 0 2px rgba(0,0,0,.8) inset;
-webkit-box-shadow: 0 0 2px rgba(0,0,0,.8) inset;
box-shadow: 0 0 2px rgba(0,0,0,.8) inset;
}

form#zs_search2 input.submit {
width: 40px;
height: 34px;
font-weight: bold;
float: right;
cursor: pointer;
margin: -17px;
border-radius: 0 0 20px;
}

form#zs_search2 input.submit {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjp54IjNuSYTH8zBfW0KlEyltR6TH4kBkLoaCjCbcq8V4eAVX_745rRJ2MYlhUaYSb9kl3J9oDB80kfuEw0bO6-Rc2O914lI4-LSVf_e0WmVhne1aPEWynnp2hDX2vZQweqExI49pCNl8oD/s1600/search.png) no-repeat 0px center;
}
</style>

<form action="http://itzeids.blogspot.com/search" id="zs_search2" method="get">
<input name="q" onblur="if (this.value=='') {this.value='Cari Disini...';}" onfocus="if (this.value=='Cari Disini...') {this.value='';}" type="text" value="Cari Disini..." /> <input class="submit" name="submit" type="submit" value="" /></form>

NB: Kode yang berwarna merah adalah ukuran dari widget tersebut. Silahkan di rubah sesuai dengan yang anda inginkan. Code warna biru diganti dengan alamat blog kalian.

Cara pemasangan :

• Tambahkan Gadget berupa HTML/Javascript pada menu tata letak di dashboard blog anda.

• Selanjutnya copy salah satu kode HTML diatas yang ingin anda gunakan.

• Letakkan gadget ini di mana pun kalian mau.
• Simpan Setelan, kemudian lihat hasilnya.

Demikianlah eksperimen tentang widget Search Box. Selamat mencoba, jika ada yang perlu ditanyakan silahkan kirim pertanyaan di kolom komentar. Semoga bermanfaat. ^_^

Screenshoot 1.2 Nb : Raleted Post Bisa diganti dengan kata-kata yang anda mau.

Nb : Kode ini bisa anda gunakan bila anda ingin widget ini tidak tampil di halaman awal blog, dan hanya akan tampil saat kita membuka postingan kita.

Contoh :