Cara membuat form search keren
Sebelumnya saya sudah memberikan tutor cara membuat form search. Tetapi, tampilannya terlalu biasa saja kan? Nah saya mau kasih tutor kesobat" disini cara memodifikasi form searchnya. Tetapi, kemungkinan form searchnya sedikit tidak sempurna, coba saja dulu deh. Caranya tidak begitu rumit, sobat bisa lihat tutornya dibawah ini.
1. Masuk ke Akun blogger sobat, masuk ke Rancangan
2. Klik Edit HTML dan centang "Expand template widget"
3. Cari kode ]]></b:skin> (Supaya gampang Tekan CTRL + F dan ketik ]]></b:skin>)
4. Copy kode dibawah ini di atas kode ]]></b:skin>
#search-nav {5. Lalu Copy kode dibawah ini dan pastekan dimanapun. Bisa disamping Navigasi dan lainnya.
float: right;
background: white;
margin: 0 5px 0 5px;
width: 200px;
height: 23px;
border-radius: 3px;
border: 1px solid black;
padding-left: 3px;
}
#search-nav .text {
margin-bottom:5px;
}
#search-nav input {
background: transparent;
border: none;
color: black;
width: 180px;
height: 15px;
margin-top: 2px;
margin-bottom: 2px;
}
#search-nav #searchsubmit {
width: auto;
height: 17px;
margin-bottom: -1px;
}
<div id="search-nav">6. Simpan dan lihat hasilnya.
<form action="http://blogseno.blogspot.com/search">
<input class="text" name="q" onblur="if (this.value == '') {this.value = 'Search...';}" onfocus="if (this.value == 'Search...') {this.value = '';}" size="30" type="text" value="Search..." />
<input alt="Search" id="searchsubmit" src="http://cdn1.iconfinder.com/data/icons/KDE_Crystal_Diamond_2.5_Classical_Mod/22x22/actions/find.png" type="image" value="" />
</form>
</div>
Selamat mencoba dan maaf karena tidak update beberapa hari.
Nb: Apabila tidak sempurna comment saja :)
Bisa dicoba nih :)
ReplyDeleteThanks gan :)
sama-sama :)
Deletesob, scriptnya boleh saya ubah gak?
ReplyDeletesilahkan gan :)
Deletetapi kok blog ini ga ada form searchnya yah?
ReplyDeleteMantaaaap gan :D
ReplyDelete