Cara Membuat MenuZFP Di Blog / ZFPMenu

Nah pada menu ini kamu dapat menyisipkan link-link menu yang ada di dalam blogmu, dan menu ini Floating /melayang sehingga saat layar blog scroll ke bawah atau ke atas tetap terlihat sehingga pengunjung mendapatkan navigasi yang lebih mudah, selain itu menu ini dilengkapi dengan fitur scroll ke atas dan scrool ke bawah, serta terdapat fitur Share twitter, facebook, dan facebook like button, hampir sama dengan widget Wibiya toolbar, kelebihannya lebih ringan, dan kekurangannya, tidak dapat di tambahkan aplikasi toolbar lain seperti pada wibiya toolbar.

langkah-langkah untuk membuat ZFPMenu :

1. Log In ke akun Bloggermu.
2. Pilih Rancangan kemudian Edit Html, jangan lupa centang Expand template widget.
3. Selanjutanya cari kode </body> dengan menekan CTRL+F dan ketik </body>, dan tempatkan script berikut di ATAS kode </body> :

<!-- zFPmenu START -->
<div id="zfpm_div" style="display:none;">
<div id="zfpm_upperBox">Title Blog (judul blog)
</div>
<ul id="zfpm_ul">
<!-- Your menus start -->
<li><a href="">YOUR MENU-1</a></li>
<li class="dir"><a href="">YOUR MENU 2 (containing submenu)</a>
<ul>
<li class="dir"><a href="">YOUR SUBMENU 2.1 (containing sub-submenu)</a>
<ul>
<li><a href="">YOUR SUB-SUBMENU 2.1.1</a></li>
<li><a href="">YOUR SUB-SUBMENU 2.1.2</a></li>
</ul>
</li>
<li><a href="">YOUR SUBMENU 2.2</a></li>
<li><a href="">YOUR SUBMENU 2.3</a></li>
</ul>
</li>
<li><a href="">YOUR MENU 3</a></li>
<!-- Your menus end -->

</ul></div>
<script type="text/javascript">
var zfpm_colorTheme = 'light'
var zfpm_shareBox = 'no';
</script>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'/>
<script src='http://zfpmenu.googlecode.com/svn/trunk/js/zfpmenu.js' type='text/javascript'/>
<!-- zFPmenu END -->

4. Jika pada template blog sobat sudah ada script Jquery 1.4.2, Jquery 1.4.2 pada script ZFPMenu tidak perlu digunakan (dihapus saja).

Aturan Seting ZFPMenu :

• var zfpm_colorTheme = 'light'; pilihan: 'dark' atau 'light'.
• var zfpm_customBackgroundImage = ' '; pilihan : full URL of an image.
• var zfpm_customBackgroundColor = ' '; pilihan: contoh: '#999999'.
• var zfpm_shareBox = 'yes'; pilihan: 'yes' atau 'no'.
• var zfpm_shareBoxPosition = 'right'; pilihan: 'left' atau 'right'.
• var zfpm_shareBoxCustomWidth = ' '; pilihan: contoh: '300'.
• var zfpm_waitForPageLoad = 'yes'; pilihan: 'yes' atau 'no'.

Nah sekian dulu tutorial membuat ZFPMenu Pada Blog, Semoga Berhasil !!!

Sumber : Nthoeng