zFPmenu, Custom Menu and Navigation/Share Widget

Viyan Pradita Senin, Juni 06, 2011 ,

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.

Article Information:
Description: zFPmenu, Custom Menu and Navigation/Share Widget
Reviewer: Viyan Pradita - Itemreviewed: zFPmenu, Custom Menu and Navigation/Share Widget - Rating: 4.5

Ditulis Oleh :

Artikel zFPmenu, Custom Menu and Navigation/Share Widget ini dipublish pada hari: Senin, Juni 06, 2011. Semoga artikel ini bermanfaat untuk Anda. Copy paste wajib dengan ijin saya, serta menggunakan link sumber seperti di bawah. Gunakan etika. Saya akan berlakukan DMCA COMPLAINT secara langsung tanpa pemberitahuan atas copas tanpa mengikuti ketentuan yg berlaku.

31 komentar
Terjun Ke Kolom Komentar

  1. Kyanya Bikin Blog Tambah Berat Gan...

    Nitip Link : http://www.magazinecelebzone.tk/

    BalasHapus
  2. @Bima Cahya Nugraha: Itu sudah merupakan efek dari sebuah widget, :D
    menambahkan sesuatu ke blog pastilah akan menambah sedikit beban blog.
    Thank Gan kunjungannya :)

    BalasHapus
  3. wow mangtab :)
    lanjutkan berkarya

    BalasHapus
  4. @Beben Koben: Matur tengkyu kang beben :D

    BalasHapus
  5. Er-r, viyan.. ini maksudnya.. untuk nambahin sub navigasi ya??
    nanti aku coba2 deh.. tapi belum tahu juga mau nambahin sub apa.. hehe

    BalasHapus
  6. @Nurmayanti Zain: Kurang lebih seperti itu sis ?? tp letaknya nanti bi bootom kiri, seperti menu Back to Top yg ada di blog saya ini. Namun tampilannya seperti pada contoh demo di atas.

    BalasHapus
  7. mantapp gan, nitip link http://se-dot.blogspot.com/

    BalasHapus
  8. Tok Jajale.... Hehe... :)

    BalasHapus
  9. keren mas.. kapan bisa tak cobain nih..

    BalasHapus
  10. waw, ternya ada banyak menu yang belum ku ketahui,, tengkyu KK

    BalasHapus
  11. @Example: Makasih ya

    @Yokoyu: Weleh, tumben oLL, ayo terusna ngeblog kang :))

    @Kang Amphi: Silahkan Mas, kapan aja boleh :))

    BalasHapus
  12. @Blog Dofollow: Hehe.. sama2 Sob :)

    BalasHapus
  13. mau coba ahh .... salam kenal :D

    BalasHapus
  14. @ponsel: Salam kenal jg sob, thanks buat kunjungannya :)

    BalasHapus
  15. Askum tuan rumah n agan2 semua
    wat bang viyan ane mw tanya, ane buat menu kwick kok ga berhasil.. ane sdh mumet nyari kesalahanya dimana, mohon bantuanya bang viyan... blog nya tambah cool aja neh jadi ngiler liatnya... salam sukses terima kasih

    http://aandfx.blogspot.com/

    wassalam

    BalasHapus
  16. @aandfx: Melihat template sobat, untuk penempatan kode2nya saya malah jadi bingung, hehehe
    Banyak yg dijelasakn sob, mungkin bsesok saya share sekalian deh. :)

    BalasHapus
  17. wah, widget ini pernah saya lihat di blogny kang remo kayaknya, nice kawan..ditunggu update blogny

    BalasHapus
  18. Terima kasih tutorialnya.

    Salam ukhuwah

    BalasHapus
  19. @Blog SoftArt: Betul sob, memang sudah lama juga koq widget ini. Thank Sob.

    @Bersama Ukuwah: Sama2 Mas, terimakasih kunjugannya :)

    BalasHapus
  20. Sobb..

    ini munculnya di pojok kanan bawah yach blog..?? :D

    BalasHapus
  21. @Eko: Kalo di blog ane gak begitu berat sob, tp kali untuk blog yg udah berat mendingan gak usah pasang. berat karena memang menunya keren :D

    @Zhanas: Iya sob, betul...

    BalasHapus
  22. motionnya mesra :D , pengin pake tapi blog ane udah agak gemuk
    makasih sharenya sobat :)

    BalasHapus
  23. @alkatro: Yang lembut memang kadang lebih berasa berat :))
    Makasih Sob, salam kenal

    BalasHapus
  24. Hahaha... :D iya gieh.. Lg kpngin mbukak blog... Okelah kalow begitu... LANJUTKAN..!!! Hehe.. :D

    BalasHapus
  25. @yokozu: Ok2,,, tq kang :))

    BalasHapus
  26. terpaksa deh di hapus lagi, mungkin bang viyan bisa tulis step by step cara membuatnya. terima kasih... :P

    BalasHapus
  27. @aandfx: problemnya /bingung di bagian mana mas, mungkin bisa saya bantu??

    BalasHapus
  28. oh ini to yg dipake ama remo-xp...nice info deh
    >> MR Deskayz Blog

    BalasHapus
  29. bole tu, uda pernah sy coba sob, nice info :))

    BalasHapus

Catatan:
Link hidup dalam komentar akan terhapus secara otomatis.
Untuk menyisipkan kode, gunakan tag <i rel="code">KODE</i>
Kode yang panjang bisa menggunakan tag <i rel="pre">KODE PANJANG</i>
Untuk menyisipkan gambar, gunakan tag <i rel="image">URL GAMBAR</i>
Untuk menyisipkan judul, gunakan tag <b rel="h3">JUDUL DI SINI...</b>
Untuk menciptakan efek tebal gunakan tag <b>TEKS DI SINI...</b>
Untuk menciptakan efek huruf miring gunakan tag <i>TEKS DI SINI...</i>


web design blogs Bloggers - Meet Millions of Bloggers