4 Kode Search Box (Kolom Pencarian) Buat Blogger - Keren

4 Kode Html + CSS Search Box Keren Untuk Blogger / Kolom Pencarian

Pada tutorial kali ini saya akan menuliskan cara pasang kolom pencarian yang keren buat blogger. Dengan memasang search box atau kolom pencarian di blog kita maka pengunjung dapat mencari artikel yang ada di blog kita sesuai dengan kata kunci yang mereka tulis.

Di sini saya memuat 4 kode search box keren (menurut saya) yang bisa kamu pilih, urutan kode search box (kolom pencarian) saya tulis sesuai dengan urutan gambar.

Sebelum saya menuliskan kode search box, saya akan menuliskan cara pasang search box tersebut dahulu.

Cara Pasang Search Box / Kolom Pencarian di Blogger

1. Login ke Blogger
2. Pilih menu Tata Letak
3. Klik tambah Gadget
4. Pilih Gadget Html/JavaScript
5. Masukkan kode search box
6. Simpan.

Nah itulah cara pasang search box, adapun kode search box silakan pilih salah satu dari kode html + css berikut:

Kode 1

<style type='text/css'>
input{
font-family: cursive;
}
form.search1 {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhpgjuImDklGNWO9TzkHJiJVDCZt9Wdgd8C_7ZrxeBo1H0Wt4D5-tRRhtIrSNoi8i6lR6kB3Q8D5Xn7CQBiiqpMFhJo7oMsImOqUqByVWafzWi1ug3aiv8LC5Lnixgr4ArnF6oKJW92ipw/s1600/1.png);
width: 320px;
height: 38px;
}
.text1 {
background: transparent;
width: 275px;
height: 38px;
border: 0px;
outline: 0px;
padding: 5px;
font-size: 20px;
}
.submit1 {
background: transparent;
border: 0px;
height: 38px;
position: relative;
width: 41px;
top: -12;
cursor: pointer;
}
</style>
<form class="search1" action="/search" style="method="get">
<input class="text1" type="text" name="q" value="Search Here" onclick="value=''" />
<input class="submit1" type="submit" value="" />
</form>

Kode 2

<style type='text/css'>
form.search2 {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEheEKeIq96HMh8HCMY-i5K0m8Z3rpKeybMSMrfTBZrvjrQsGp5SOFdyjMFPJxLisR4x_5bamRXp-Mhaaie96mQtz8oS-sZmk90y_2qPkele3lwAv91Eqh9RIbC2ERrG-vZbGmjEo6RBZaQ/s1600/2.png);
width: 320px;
height: 38px;
}
.text2 {
background: transparent;
width: 270px;
height: 38px;
border: 0px;
outline: 0px;
padding: 5px;
font-size: 20px;
}
.submit2 {
background: transparent;
border: 0px;
height: 38px;
position: relative;
width: 45px;
top: -12;
cursor: pointer;
}
</style>
<form class="search2" action="/search" style="method="get">
<input class="text2" type="text" name="q" value="Search Here" onclick="value=''" />
<input class="submit2" type="submit" value="" />
</form>

Kode 3

<style type='text/css'>
form.search3 {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2HqZe8e4-H0znyPmoe-5aq7RSwG_dA8NJOkKSLX6poPk34ViomK2b94l97mKpWSJLFwpjWAyoSDOxQL1X2MGSNIQcD0zKri7n5Aw84ER3BMt9Z8aX2QB_YJ_D_xV2hv5gs9R7N8jRMYY/s1600/3.png);
width: 320px;
height: 38px;
}
.text3 {
background: transparent;
width: 260px;
height: 38px;
border: 0px;
outline: 0px;
padding: 5px;
font-size: 20px;
}
.submit3 {
background: transparent;
border: 0px;
height: 38px;
position: relative;
width: 50px;
top: -12;
cursor: pointer;
left: 5px;
}
</style>
<form class="search3" action="/search" style="method="get">
<input class="text3" type="text" name="q" value="Search Here" onclick="value=''" />
<input class="submit3" type="submit" value="" />
</form>

Kode 4

<style type='text/css'>
form.search4 {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggFzWX4XJWcH8TldfZe46giMnAJpufFGVqGSojmKIEIPbP-XLFY5pxVyZA00efZuLszDN4kw9MSDLtvHPHQ66NVt-6eFPrtvCqAlYtl5l7iKrpqNaP5t2uVLsVNleAv-qkCX8RkR76EEE/s1600/4.png);
width: 334px;
height: 49px;
}
.text4 {
background: transparent;
width: 290px;
height: 38px;
border: 0px;
outline: 0px;
padding: 10px 0 0 10px;
font-size: 20px;
}
.submit4 {
background: transparent;
border: 0px;
height: 38px;
position: relative;
width: 40px;
top: -12;
cursor: pointer;
}
</style>
<form class="search4" action="/search" style="method="get">
<input class="text4" type="text" name="q" value="Search Here" onclick="value=''" />
<input class="submit4" type="submit" value="" />
</form>

Silakan letakkan kode search box yang kamu pilih di Gadget Html/JavaScript. Ingat, urutan kode kolom pencarian sesuai dengan urutan gambar di atas.