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
Hiks hiks mau coba tapi ndak ada demonya, :'(
ReplyDeleteBang bang aku punya saran, di bagian homepage kok ndak ada judul artikelnya tuh?
iya nih saya juga lgi ngulik. bingung =(
Delete