zFPmenu, Custom Menu and Navigation/Share Widget

zFPmenu, Custom Menu and Navigation/Share Widget, Baru pernah neh membuat postingan bingung memberi judulnya apa. hehe... rada jenuh juga dari kemarin saya disibukan dengan SEO, untuk Kontes SEO, jadi lupa sama yang lain deh!!
Nah pada kesempatan siang ini, saya akan membahas tentang custum widget keren yaitu zFPmenu – Fixed-Position Custom Menu and Navigation/Share Widget, adalah sebuah widget ‘melayang’ yang bisa diisi dengan menu berisi link-link sesuai keinginan.
Dengan widget ini sobat bisa menentukan sendiri menu-menunya. Dan lagi di dalamnya juga 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 (bila diinginkan). gimana sob... keren kan ??

Dengan satu widget ini sobat sudah seperti membuat 2macam widget, yaitu:
a. navigasi scroll to top/bottom of page
b. Share ke social bookmark

Preview/Demo

Bila Sobat tertarik, silahkan langsung saja ikuti langkah-langkah membuatnya.

1. Seperti biasa, Login ke akun blogger sobat
2. Masuk Rancangan/Layout
3. Pilih Edit HTML
4. Klik "Download Template Lengkap" (ini untuk memBackUp template sobat)
5. Beri tanda centang "Expand Template Widget"
6. Tekan Ctrl+F (untuk mempermudah pencarian) dan cari kode: </body>

7. Bila sudah ketemu, copy paste-kan kode dibawah ini tepat diatas kode </body>

<!-- zFPmenu START -->
<div id="zfpm_div" style="display:none;">
<div id="zfpm_upperBox">
KODE BLOGGER
</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 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 -->

8. Sebelum menyimpan template sobat, harap gantilah untuk Submenu sesuai keinginan sobat.


Setting/Variable
Perhatikanlah kode berikut:

var zfpm_colorTheme = 'light'

pilihan warna yaitu 'ligh' or 'dark'
Ganti dan sesuaikan dengan template sobat.

var zfpm_shareBox = 'no'

Kode tersebut untuk memunculkan share to Twitter ‘Retweet’, Facebook ‘Share’, and Facebook ‘Like’ buttons (using LinksAlpha’s widget).
Bisa sobat setting sendiri, mau dimunculkan atau tidak.
Bila mau memunculkannya cukup mengganti kode 'no' dengan 'yes'

Setting Preview
Color theme : light or dark
Show share box: yes or no


Penting !!
Script ini tidak desain untuk Internet Explorer 6 browser.

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

Sumber reverensi : http://inimu.com
Bila sobat masih menemui beberapa kesulitan, Sobat bisa bertanya langsung dengan berkomentar di tread ini. Terimakasih.