Membuat zFMenu dengan Jquery

zFPmenu – Fixed-Position Custom Menu and Navigation/Share Widget, adalah sebuah widget 'melayang' yang bisa diisi dengan berbagai menu berisi link-link sesuai keinginan.

Di dalamnya sudah termasuk navigasi scroll to top/bottom of page (scroll ke bagian paling atas/bawah halaman web) ber-engine jQuery, dan juga tombol share Twitter dan Facebook (Apabila diinginkan). Silahkan lihat preview screen shootnya di bawah ini.

Gimana, keren kan? Apabila anda tertarik berikut cara membuatnya.
1. Login ke akun blogger anda.
2. Klik Rancangan > Edit HTML
3. Download terlebih dahulu Template blog anda (hal ini untuk menghindari terjadinya kesalahan dalam pengeditan)
4. Jangan lupa centang "Expand Template Widget"
5.  Kemudian cari kode </body> (klik Ctrl+F untuk mempermudah pencarian)
6. Silahkan anda copas kode di bawah ini dan paste kan di atas kode </body>

<!-- zFPmenu START -->
<div id="zfpm_div" style="display:none;">
<div id="zfpm_upperBox">
Place ads, text message, or anything here.
</div>
<ul id="zfpm_ul">
<!-- Your menus start -->
<li><a href="">JUDUL MENU 1</a></li>
<li class="dir"><a href="">JUDUL MENU 2 (containing submenu)</a>
   <ul>
      <li class="dir"><a href="">SUB MENU 2.1 (containing sub-submenu)</a>
         <ul>
            <li><a href="">SUB-SUBMENU 2.1.1</a></li>
            <li><a href="">SUB-SUBMENU 2.1.2</a></li>
         </ul>
      </li>
      <li><a href="">SUBMENU 2.2</a></li>
      <li><a href="">SUBMENU 2.3</a></li>
   </ul>
</li>
<li><a href="">JUDUL MENU 3</a></li>
<!-- Your menus end -->
</ul></div>
<script type="text/javascript">
var zfpm_colorTheme = 'dark'
var zfpm_shareBox = 'no';
</script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="http://zfpmenu.googlecode.com/svn/trunk/js/zfpmenu.js"></script>
<!-- zFPmenu END -->

Setting/Variabel

1. Perhatikan kode berikut : var zfpm_colorTheme = 'dark' : Gantilah kode yang berwarna merah tersebut sesuai dengan tema template anda.
contoh pilihan tema yang valid : 'light' atau 'dark'

2. var zfpm_shareBox = 'no'   : Kode tersebut di gunakan untuk memunculkan share Twitter ‘Retweet’, Facebook ‘Share’, and Facebook ‘Like’ buttons (using LinksAlpha’s widget). Apabila anda ingin menampilkan nya ganti kode yang berwarna merah dengan kode 'yes'.


Catatan:
Script ini tidak desain untuk Internet Explorer 6.

Sebaliknya, jika Anda menambahkan var zfpm_ieUpgradeMessage variabel = 'ya', untuk script, ia akan menampilkan pesan pemberitahuan upgrade pada bagian atas halaman (lihat screenshot di sini) untuk IE 6 pengguna.

Semoga bermanfaat. 


source web : http://inimu.com/widget/zfpmenu/

Related Post