Tombol Search Sederhana

Postingan kali ini saya akan memberi script widget search sederhana. Langsung saja salin script di bawah ini :

#search{
width: 230px;
background:#E4F4FC;
border-top:0px solid #000;
padding:3px 0;
position:relative;
bottom:0px;
left:0px;
-webkit-border-radius:5 5 5px 5px;
-moz-border-radius:5 5 5px 5px;
border-radius:5 5 5px 5px;
}
#search:hover{
-webkit-box-shadow:0 0 1px rgba(255,255,255,0.4), inset 0 0 5px rgba(255,255,255,1);
-moz-box-shadow:0 0 1px rgba(255,255,255,0.4), inset 0 0 5px rgba(255,255,255,1);
box-shadow:0 0 1px rgba(255,255,255,0.5), inset 0 0 5px rgba(255,255,255,1);
webkit-box-shadow:3 10px 10px rgba(0,0,0,0.5);
-moz-box-shadow:3 15px 10px rgba(0,0,0,0.5);
box-shadow:3 5px 11px rgba(0,0,0,0.4);
}
#search input{
background:#000;
border:1px solid #aaa;
padding:3px 5px;
margin:0 14px;
font:blod 12px Calibri,Arial,Sans-Serif;
color:#fff;
width:202px;
position:relative;
}
/* Loupe */
#search:after{
content:"";
width:5px;
height:5px;
border:1px solid #fff;
-webkit-border-radius:10px;
-moz-border-radius:5px;
border-radius:10px;
position:absolute;
left:100%;
margin-left:-30px;
top:7px;
}
#search:before{
content:"";
width:6px;
height:0px;border:1px solid #fff;
position:absolute;
z-index:3;
left:100%;
margin-left:-36px;
top:15px;
-webkit-transform:rotate(-41deg);
-moz-transform:rotate(-41deg);
-ms-transform:rotate(-41deg);
-o-transform:rotate(-41deg);
transform:rotate(-41deg);
}

Langkah kedua salin kode di bawah ini dan letakkan pada formulir HTML/Javascript pada gadget blog anda dan klik simpan

<div id="search" action="URL blog anda " name="ojo dumeh"><input type="text" placeholder="Search... " /></form>
</div>

Selesai jangan lupa di share yah :D