Skip to content Skip to sidebar Skip to footer

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!

Post a Comment for " Cara membuat floating menu atau menu melayang pada blog website"