Cara Membuat Kotak Pencarian Melayang (Paling JoS)

Posted on Dec 22, 2012


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("http://4.bp.blogspot.com/-gAHYfEEtPjg/T0t5-AtLCmI/AAAAAAAAAJ8/w87kGhEAYyQ/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.

Artikel Terkait :



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.