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...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;
}
<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
<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>
Loading... |
2 comments
DO NOT EVEN TRY ADD LINK [-X
You can use some HTML tags, such as
<b> - <i> - <a> - http://...jpg/gif/png/bmp - http://youtu.be/...