Cara Membuat Kotak Search CSS3

Sudah dua kali saya memposting tentang cara membuat kotak search. Sekarang saya akan menjadikannya tiga kali. Kali ini kita mencoba untuk membuat kotak search dengan CSS3. Sebelumnya perlu di ketahui bahwa CSS3 hanya suport pada beberapa browser yang mendukung CSS3. Browser seperti IE tidak mendukung untuk CSS3. Berikut preview 

Preview

Gambar di atas itu adalah preview untuk browser yang Support/tidak dengan CSS3. Oke langsung saja bagi yang tertarik kita bahas Step.By.Step !!!

1. Langkah pertama Log in ke blog anda

2. masuk ke Design > Edit HTML 

3. Cari kode ]]></b:skin>

4. Letakan kode berikut di atas kode ]]></b:skin>

/* CSS3 search form
-------------------------------------- */
.searchform {
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 */
}

.searchform input {
font: normal 12px Arial, Helvetica, sans-serif;
}

.searchfield {
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 */
}

.searchbutton {
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 */
}

5. Save Templates
Tunggu belum selesai
6. Sekarang masuk ke Design > Page Element > Add a Gadget > HTML/JavaScript > pada kolom konten masukan kode berikut

<form class="searchform">
<input class="searchfield" type="text" value="Search..." onfocus="if (this.value == 'Search...') {this.value = '';}" onblur="if (this.value == '') {this.value = 'Search...';}" />
<input class="searchbutton" type="button" value="Search" />
</form>

7. Save
8. CLS Comment Like Share oke !!! terima kasih :)

Sekian posting saya kali ini. Terima kasih telah menyempatkan diri untuk membacanya. Lebih terima kasih untuk yang Comment Like Share