Search Gaya Full Stylish

Hai...hai...haiii, bertemu kembali dengan Beben si bloglang ganteng kalem tea yang selalu menampilkan postingan gaya punya and full stylish :"> Kali ini bagaimana membuat bagian search tampil beda, dan yg pastinya cool b-) Pasti sobat sudah pada tauk itu si kotak search yah ;)) Metodenya seperti ini sob! Kita akan membuat bagian search kita, yg biasanya gambar tombol search berupa kaca pembesar (what ever) selalu menyertai di belakang kotak search atau didalamnya! Sekarang kita buat si gambar kaca pembesar itu yg hanya tampak, dan ketika cursor/mouse disorotkan akan terbelalak kotak searchnya :D [bingung-bingung lah :))] Untuk melihat aksi livenya silahkan kunjungi web yg menciptakan kreasi ini http://typo.graphr.net/ dan lihat pada pojok kanan atas ;) Bumbu-bumbunya [..]

Kode CSS

Seperti biasa letakin sebelum/diatas kode ]]></b:skin>

#search form {
position: absolute;
top: 0;
right: 0;
height: 18px;
overflow: hidden;
padding: 18px 8px 0 28px;
background: url("http://link-image-search.gif") 8px 50% no-repeat;
}
#search form div {
margin-top: -0.58em;
}
#search input[type="text"] {
width: 175px;
margin-left: -1000em;
border: 1px solid #c0c0c0;
border-top-color: #808080;
border-bottom-color: #e0e0e0;
background-color: #999999;
padding: 0.2em 0.3em;
font-size: 70%;
font-family: Lucida, Verdana, sans-serif;
color: #ffffff;
}
#search form:hover input[type="text"],
#search input[type="text"]:focus {
margin-left: 4px;
}
#search input[type="submit"] {
display: none;
}

Ganti http://link-image-search.gif dengan gambar beresolusi 18x20 pixels. Masukan tag HTML berikut dibagian search template blog sobat...

<div id="search">
<form method="get" action="http://your-name-blogsot.com" onclick="this.style.marginLeft='0';">
<div>
<input type="hidden" name="" value="41" />
<input type="text" id="search" name="search" tabindex="1" />
<input type="submit" value="Search" />
</div>
</form>
</div>

Perhatikan tulisan yg dibedakan itu, itulah kode yg berperannya sob. Happy blogging and see you :-h