Pada dasarnya kode untuk membuat search box adalah seperti ini :
<form action="http://NAMABLOGANDA.blogspot.com/search"Dari kode di atas tadi, bisa kita modifikasi agar lebih enak dipandang mata dengan memasukkan text di dalam kotak form, seperti “Cari artikel, Search, dan lain-lain”. Text yang kita pasang, agar lebih atraktif kita buat auto hide, artinya apabila text tersebut diklik maka tulisan akan hilang dan akan muncul kembali bila klik di tempat yang kosong.
method="get"> <input class="textinput" name="q" size="40" type="text"/> <input value="search" class="buttonsubmit" name="submit" type="submit"/></form>
Selain itu untuk mempermanis penampilan search box, bisa ditambahkan pula kode css3 border radius yang bakal membuat garis jadi lengkung.
Ayo kita mulai memodifikasi kotak pencarian :
- Tambahkan gadget baru (add a gadget)
- pilih HTML/JavaScript
- Copy paste kode ini ke dalam gadget tadi lalu save.
<style>Hasilnya bisa anda lihat di halaman demo
.cariform {
background: #111111;
background: -webkit-gradient(linear, left top, left bottom, from(#111111), to(#555555)); /* CSS gradient */
background: -moz-linear-gradient(top, #111111, #555555); /* CSS gradient */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#111111', endColorstr='#555555'); /* CSS gradient ie7 */
-ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#111111', endColorstr='#555555'); /* CSS gradient ie8 */
display: inline-block;
zoom: 1; /* hack untuk ie7 */
*display: inline;
border: solid 1px #555555;
padding: 3px 5px;
-webkit-border-radius: 20px; /* rounded corner */
-moz-border-radius: 20px; /* rounded corner */
border-radius: 20px; /* rounded corner */
-webkit-box-shadow: 0 1px 0px rgba(0,0,0,.1); /* CSS shadow */
-moz-box-shadow: 0 1px 0px rgba(0,0,0,.1); /* CSS shadow */
box-shadow: 0 1px 0px rgba(0,0,0,.1); /* CSS shadow */
}
.cariform input {
font: normal 12px Arial, Helvetica, sans-serif;
}
.carifield {
background: #ededed;
padding: 6px 6px 6px 8px;
width: 200px;
border: solid 1px #222222;
outline: none;
-webkit-border-radius: 20px; /* rounded corner */
-moz-border-radius: 20px; /* rounded corner */
border-radius: 20px; /* rounded corner */
-moz-box-shadow: inset 0 1px 3px #222222; /* CSS shadow */
-webkit-box-shadow: inset 0 1px 3px #222222; /* CSS shadow */
box-shadow: inset 0 1px 3px #222222; /* CSS shadow */
}
.caributton {
color: #fff;
border: solid 1px #b80000;
font-size: 11px;
height: 28px;
width: 55px;
text-shadow: 0 1px 1px #222222; /* CSS text shadow */
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
background: #ff0000;
background: -webkit-gradient(linear, left top, left bottom, from(#ff0000), to(#b80000)); /* CSS gradient */
background: -moz-linear-gradient(top, #ff0000, #b80000); /* CSS gradient */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff0000', endColorstr='#b80000'); /* CSS gradient ie7 */
-ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff0000', endColorstr='#b80000'); /* CSS gradient ie8 */
}
</style>
<form action="http://NAMABLOGANDA.blogspot.com/search" class="cariform " method="get">
<input class="carifield" onblur="if (this.value == '') {this.value = 'Cari artikel...';}" onfocus="if (this.value == 'Cari artikel...') {this.value = '';}" type="text" value="Cari artikel..." /><input class="caributton" type="button" value="Search" /></form>
Lihat Demo
thanx bro
ReplyDelete