Cara membuat floating menu atau menu melayang pada blog website
Pernah lihat floating menu atau menu melayang yang terdapat di beberapa website? Mungkin kita pernah menjumpainya di beberapa situs yang memakai script float menu tersebut,situs seperti kaskus.us bahkan di situs saya ini (lihat di sebelah kanan) .Untuk Membuat floating menu ,kita tinggal mendownload file java scriptnya .Di joomla fungsi java script ini sudah diintegrasikan dengan modul namun untuk wordpress dan lainnya kita harus membuat secara manual.Berikut data dan file yang diperlukan:
-Tisu File Java script.
Di unrar pake winrar maka nongol file javascript sekitar 11 kb dengan nama floating-1.5.js
Upload ke hosting dengan memakai program FTP apa aja.Tempatkan dimana juga terserah tapi baiknya di dalam folder themes/nama tema jadi url nya kira-kira begini http://www.domainku.com/wp-content/themes/nama-tema/floating-1.5.js
-Selanjutnya masukan kode berikut diantara tag <body>kode</body> .Buka theme editor dan cari header.php kemudian edit.hanya seputar header .php saja file yang harus kita edit
Masukan link rel java script seperti gambar di bawah ini
Lihat yang saya kasih tanda kotak itu,lalu ganti URL di atas dengan URL dimana file java script tadi di tempatkan
Kemudian masih di header cari kode ini
<body <?php body_class(); ?>>
Gunakan CTRL+F untuk mencari cepat
kode diatas letaknya tepat berada setelah tag penutup head , atau setelah tanda ini </head>
Lalu masukan tambahan elemen div berikut dibawah kode tag pembuka body tadi
<div id="floatdiv" style="background: none; border: none; height: 144px; padding: 9px; position: absolute; right: 1px; top: 141px; width: 48px; z-index: 100;"> <p><a href="http://www.blogindoku.com/kontak/" title="hubungi-saya"><img alt="myworld-mybiz" class="aligncenter" src="http://www.blogindoku.com/wp-content/uploads/2011/02/feedback.png" /></a></p> </div> <script type="text/javascript"> floatingMenu.add('floatdiv', { // Represents distance from left or right browser window // border depending upon property used. Only one should be // specified. // targetLeft: 0, targetRight: 1, // Represents distance from top or bottom browser window // border depending upon property used. Only one should be // specified. targetTop: 141, // targetBottom: 0, // Uncomment one of those if you need centering on // X- or Y- axis. // centerX: true, // centerY: true, // Remove this one if you don't want snap effect snap: true }); </script>
Untuk mengatur tata letak targetRight pasangannya dengan targettop dan targetleft dengan targetbottom.Jadi rubah kedua pasangan itu jangan keduanya karena hasilnya sama saja.Bila targettop dan target right dirubah maka nilai yang ada di elemen div haru s disesuaikan.Nilai yang ada di dalam elemen <div> bisa di ubah sesuai keinginan,tinggi lebar dan background ataupun border dan radius.Hasilnya akan ada menu melayang di blog kita,lumayan buat cuci mata ,lho ko ga nyambung ?
Selamat mencoba!