Pages

Senin, 21 Mei 2012

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

2 komentar:

  1. hehe.. sepertinya bagus juga nih, sayangnya Blog ane sudah full :) oia salam kenal aja bro...

    BalasHapus
  2. Bro bisa buat menu navigasi kayak di Indowebster gk??
    Itu yang floating dan hovernya bekerja saat di scroll ke bawah..
    Kayak gambar yg ada di link ini bro..

    Gambar Sebelum Di Scroll Ke Bawah

    Gambar Sesudah Di Scroll Ke Bawah

    kloq bisa share donk....

    BalasHapus

Ikan