Rabu, 02 Januari 2013

Cara Membuat Kotak Pencarian Melayang (Paling JoS)


Cara Membuat Kotak Pencarian Melayang (Paling JoS)

NetOopsblog protected imageNetOopsblog protected imageNetOopsblog protected image
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>"

#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 == &quot;&quot;) {this.value = &quot;Cari...&quot;;}' onfocus='if (this.value == &quot;Cari...&quot;) {this.value = &quot;&quot;}' 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.

1 komentar:

  1. bro, anda belum mencantumkan link sumber. Harap segera di cantumkan atau saya akan melaporkan blog anda kepada google.

    Hormat Kami

    Rahmat Aziz

    BalasHapus