Dengan Searc Box ini akan penginjung akan di permudahkan untuk mencari yang ada dalam suatu blog.pada dasarnya Searc Box ini adalah
<form action="http://NAMABLOGANDA.blogspot.com/search"
method="get"> <input class="textinput" name="q" size="40" type="text"/> <input value="search" class="buttonsubmit" name="submit" type="submit"/></form>
Nah Kode di jika di terapkan di blog akan seperti di bwah ini
Dari kode dan contoh gambar di atas..bisa kita modifikasi seperti ini dengan CSS3 Caranya
Tambahkan gadget baru (add a gadget)
pilih HTML/JavaScript
Copy paste kode ini ke dalam gadget tadi lalu save.
Ini kode modifikasi kotak pencarian / Search box yang harus anda copy paste :
<style>
.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>
Contohnya jika di terapkan ke blog akan seperti gambar di bawah ini
SIMPAN DAN LIHAT HASILNYA...
