Assalamu'alaikum wr. wb.
Halo sobat, kali ini saya akan memberikan tips buat sahabat blog yang ingin membuat kotak pencarian melayang. Untuk contohnya silahkan sobat lihat blog saya di bagian pojok kanan atas. Lalu gerakkan scroll ke atas dan ke bawah. Kotak pencarian itu akan tetap mengikuti. Agar dapat seperti itu ikuti langkah-langkah berikut ini:
1. Masih sama langkah awalnya: masuk ke akun blog anda.
2. Lalu ke bagian template => edit html => expand.
3. Masukkan kode berikut tepat di atas kode "]]></b:skin>"
3. Masukkan kode berikut tepat di atas kode "]]></b:skin>"
#simg {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPK141Hzca1SOK4WmuC9caloghrQesjNol9-_3ICI8LirvOeuNaNFYhCkEiUU_CPtxfeMpJsMqWybpvhWpk9mk1t2is4nAwxLJDaMY3QkyVEKJKBeBRyDnVKXSQITEVBjeGFUR7XNlBac/s1600/searchicon.png") no-repeat scroll 0 0 transparent;
display: inline-block;
height: 14px;
margin: 0;
width: 17px;z-index:101;
}#s:hover {box-shadow: 0 1px 2px #99FF00 inset;}
#s {border: 1px solid #BCBCBC;border-radius: 4px 4px 4px 4px;font: italic 14px times New Roman;padding: 4px 2px;width: 146px; -moz-transition: width 0.2s ease-in 0s; -webkit-transition: width 0.2s ease-in; -o-transition: width 0.2s ease-in;}
#s:focus {width: 200px;}
.noop-searchbox {
display: block;
position: fixed;
right: 0;
top: 1%;
max-width: 300px;min-width: 238px;
z-index: 100;
}
4. Setelah itu masukkan kembali kode berikut tepat di atas kode "</body>"
<div class='noop-searchbox' id='noop-searchbox'>
<form action='/search' id='noop-searchform' method='get'> <input id='s' name='q' onblur='if (this.value == "") {this.value = "Cari...";}' onfocus='if (this.value == "Cari...") {this.value = ""}' type='text' value='Cari...'/> <button id='sbutton' type='submit'><span id='simg'/></button> </form></div>
<a href="http://netfori.blogspot.com"/>
<form action='/search' id='noop-searchform' method='get'> <input id='s' name='q' onblur='if (this.value == "") {this.value = "Cari...";}' onfocus='if (this.value == "Cari...") {this.value = ""}' type='text' value='Cari...'/> <button id='sbutton' type='submit'><span id='simg'/></button> </form></div>
<a href="http://netfori.blogspot.com"/>
5. Selesai sudah, kotak Pencarian anda sudah melayang.
Untuk yang berwarna merah dapat diganti sesuai dengan yang diinginkan tulisannya.
Demikian tutorialnya, semoga bermanfaat. Terimakasih
Wassalamu'alaikum wr. wb.
Bagi yang merasa artikel ini menarik, dan ingin menyebarluaskannya dimohon bagi siapa pun yang ingin mengutip diwajibkan untuk mencantumkan kode link di bawah ini. Hargailah karya cipta orang lain. Terimakasih.
Info yang amntap sobat...
ReplyDeleteBlog sobat sudah saya follow atas nama Aditya Pratama #5
Follback blog saya di adityareinaldo.com
Thx sobb...
Follow blog sobat berhasil! Makasih banyak sob.
Deletewihhh jan munanteb sob hehe
ReplyDeleteHaha makasih mas.
Deletesama sama sobat, hadir lagi nih :)
Deletebagus teman, salam kenal, saling follow yuk
ReplyDeleteBlog sobat telah saya follow. follow back nya di tunggu.
DeleteFollw back sukses teman
Deleteheemmm keren gan..:)
ReplyDeleteoke sob makasih.
DeleteKunjungan balik..
ReplyDeletemantap deh sob :)
ReplyDelete@Wammy SanHehe makasih sob.
ReplyDeletekunjungan rutin, makasih sob atas infonya. sangat bermanfaat :)
ReplyDelete@Selvia Zuni MurningsihMakasih sob, semoga bermanfaat.
ReplyDeletesob, kalo bisa. blog nya dikasih cbox ya? biar kunjungan rutin dan pesan masukan, nggak harus lewat komen gini :)
ReplyDelete@Selvia Zuni MurningsihYah sebenarnya sudah ada yang merekomendasikan agar saya buak buku tamu, tetapi sepertinya belum dapat terlaksana dalam jangka waktu yang cepat. Terimakasih
ReplyDeletesip
ReplyDeletevisit my blog please http://wongsederhana.blogspot.com/
ReplyDeletewahhh baru tau saya ini bisa melayang,,izin nyoba sob..
ReplyDeletecome back.