Cara Membuat Menu Navigasi Melayang di Sudut Blog

Halo sobat blogger, bagaimana kabarnya? semoga baik-baik saja, amin. Sudah lama tidak posting lagi, pada kesempatan kali ini saya akan share cara membuat menu navigasi melayang di sudut blog, seperti yang ada di sudut kanan bawah blog saya ini. Menu ini juga dapat anda edit sesuai kebutuhan, mau dibuat seperti daftar menu, daftar kategori, atau bahkan daftar link-link keluar yang berguna, dan juga dilengkapi dengan tombol navigasi ke atas dan kebawah.

Tampilannya seperti ini :


Bagi teman-teman yang ingin membuatnya, sangat mudah silahakan ikuti langkah berikut:
1. Buka blogger.com - Rancangan - Edit HTML.
2. Centang Expand Template Widget.
3. Copy paste kode berikut tepat diatas 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 class='dir'><a href='/'>Menu 1 </a>
<ul>
<li class='dir'><a href='/'>Submenu 1.1</a>
<ul>

<li><a href=' link yang dituju '>Sub-submenu 1.1.1</a></li>
<li><a href=' link yang dituju '>Sub-submenu 1.1.2</a></li>
</ul>
</li>
<li><a href='
link yang dituju '>Submenu 1.2</a></li>
<li><a href='
link yang dituju '>Submenu 1.3</a></li>
</ul>
</li>
<li class='dir'><a href='/'>Menu 2</a>
<ul>
<li class='dir'><a href='/'>Submenu 2.1</a>
<ul>
<li><a href='
link yang dituju '>Sub-submenu 2.1.1</a></li>
<li><a href='
link yang dituju '>Sub-submenu 2.1.2</a></li>
</ul>
</li>
<li><a href='
link yang dituju '>Submenu 2.2</a></li>
<li><a href='
link yang dituju '>Submenu 2.3</a></li>
</ul>
</li>
<!-- Your menus end -->
</ul></div>
<script type='text/javascript'>
var zfpm_colorTheme = &#39;
dark&#39;
var zfpm_shareBox = &#39;
no&#39;;
</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 -->

*Anda bisa mengedit berapa banyak submenunya, sesuai kebutuhan blog anda.

4. Untuk kode yang warna merah, itu anda harus memasukkan link yang dituju, sedangkan kode warna hijau, anda dapat mengatur warna menu (dark atau light) dan apakah tombol social sharenya mau ditampilkan atau tidak (yes atau no).
5. Pratinjau terlebih dahulu, kalau tidak ada error, silahkan klik Simpan Template, dan menu keren di blog anda sudah jadi. Selamat Mencoba.. :D 

21 comments:

  1. widiiihh keren sob,, jadi lebih cantik dan menghemat tempat buat naruh menu,,

    followback done d^^

    ReplyDelete
    Replies
    1. iya sob,, silahkan dicoba.. mksih dah komen sob.. :D

      Delete
  2. mantep mas... disini banyak tutor yg bermanfaat,,,salam kenal ya mas

    ReplyDelete
    Replies
    1. salam kenal juga sob,, silahkan dibaca n di coba tutornya.. :D

      Delete
  3. keren..keren... boleh nih di coba

    ReplyDelete
    Replies
    1. Oke,, silahkan dicoba sob,, mksih ya dah kasih komentar.. :D

      Delete
  4. wah kapan" bisa dicoba nih tutor,,
    btw follow sukses #106 ditunggu follbacknya ya sob

    ReplyDelete
    Replies
    1. silahkan dicoba sob.. :D Follow back sukses,, thanks ya..

      Delete
  5. KEREEEn GAAAAN!!!!

    follow will be Done

    ReplyDelete
  6. followback sob :)
    http://softwareku4u.blogspot.com

    ReplyDelete
  7. nice blog,
    info yang sangat menarik gan moga tambah sukses aja blognya. and boleh donk ane coba..
    sekalian follback gan.. di Blogriefs

    ReplyDelete
  8. Waduh ini baru mantap bro :D izin follow blognya ya mas :D

    http://mencakup-semua.blogspot.com/

    ReplyDelete
  9. Saya coba terpakan gan, trims ya...di tunggu kunjungan baliknya.

    ReplyDelete
  10. Terimaksh saya sdh brhasil pasang diblog sy.

    ReplyDelete