Membuat Search Box Dengan CSS

search box atau kotak pencarian salah satu bagian penting dalam suatu blog, yang fungsinya berguna untuk memberikan sarana pada pengunjung saat mencari artikel lain yang pengunjung inginkan dan juga untuk menavigasi isi dari suatu blog.
Ok, kayaknya cukup sudah penjelasaannya, berikut tutorialnya.

Search Box Dengan Style Css

• Login ke blogger
• Pilih menu template >> edit HTML >> lanjutkan
• Dengan menggunakan ctrl + F, cari kode ]]></b:skin>
• Lalu letakkan kode di bawah ini tepat diatasnya
• Lalu letakkan kode di bawah ini tepat diatasnya

#search {
}
#search input[type="text"] {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgwCblOa922cLId2kajUi2d_gShTXH_QNdRqUzeceaojmFON_7lei5zC9Sv8bhqhXyGH6nvAixQ30GGc9zJeFavq97K6polOHLCboAsJ8i12FZ6dGtWndymMfXygqSgVvcpAmJI7nzgnI0/s1600/cari.png) no-repeat 10px 6px #000;
border-color: #fff;
font: bold 12px Arial,Helvetica,Sans-serif;
color: #bbbbbb;
width: 110px;
padding: 6px 15px 6px 35px;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
-webkit-box-shadow: 0px 1px 0px rgba(255, 255, 255, 0.3), inset 0px 1px 3px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0px 1px 0px rgba(255, 255, 255, 0.3), inset 0px 1px 3px rgba(0, 0, 0, 0.2);
box-shadow: 0px 1px 0px rgba(255, 255, 255, 0.3), inset 0px 1px 3px rgba(0, 0, 0, 0.2);
-webkit-transition: all 0.7s ease 0s;
-moz-transition: all 0.7s ease 0s;
-o-transition: all 0.7s ease 0s;
transition: all 0.7s ease 0s;
}
#search input[type="text"]:focus {
width: 150px;
}

• Setelah itu copy - paste kode di bawah ini, dan letakkan di tempat yang anda inginkan. Misalnya di samping menu, letakkan kode berikut setelah kode menu anda.

<form method="get" action="/search" id="search">
<input name="q" type="text" size="40" placeholder="Search..." />
</form>

• Setelah selesai simpan HTML kalian dan lihat hasilnya.

Keterangan :

• Jika ingin merubah warna backgroundnya kamu dapat menggati kode yang berwarna kuning dengan kode warna yang anda inginkan
• Jika ingin merubah warna bordernya anda tinggal mengganti kode yg berwana hijau dengan kode warna yang anda inginkan.

Demikian penjelasan saya tentang cara memasang Search Box Dengan Style Css. dan semoga bermanfa'at.

Tweet

Membuat Search Box Dengan CSS

4/ 5

Oleh Naufal48

Ditulis Naufal48 Pada Sunday, February 17, 2013 Komentar