Beranda » Trick Blog » Membuat zFPmenu, Custom Menu and Navigation/Share Widget

Membuat zFPmenu, Custom Menu and Navigation/Share Widget

METAL - XP - Kali ini metal xp akan share bagaimana membuat zFPmenu, Custom Menu and Navigation/Share Widget, Nah pada kesempatan pagi ini, saya akan membahas tentang custum widget keren yaituzFPmenu – Fixed-Position Custom Menu and Navigation/Share Widget, adalah sebuah widget ‘melayang’ yang bisa diisi dengan menu berisi link-link sesuai keinginan. Widget inipun saya terapkan di blog saya.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.

Belum ada tanggapan untuk "Membuat zFPmenu, Custom Menu and Navigation/Share Widget"

Posting Komentar

Pengikut