Cara Membuat Kotak Pencarian Melayang (Paling JoS)



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/AVvXsEjYBwdDGvx5jfW9PRyVn9-6w7GdJRJrmQaJtZnhiI6PBwyAEdogLQOmti29PXzxrIuPR-62GXazbRGt1p2-NH_k6ApCKdW5DyfnswGyv7eGkZ33YLV2PNbUUqpe5iWWi-DnvGKh34GVVy8/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.
bro, anda belum mencantumkan link sumber. Harap segera di cantumkan atau saya akan melaporkan blog anda kepada google.
BalasHapusHormat Kami
Rahmat Aziz