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 = 'dark'
var zfpm_shareBox = 'no';
</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 -->
<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 = 'dark'
var zfpm_shareBox = 'no';
</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 -->
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
widiiihh keren sob,, jadi lebih cantik dan menghemat tempat buat naruh menu,,
ReplyDeletefollowback done d^^
iya sob,, silahkan dicoba.. mksih dah komen sob.. :D
Deletemantep mas... disini banyak tutor yg bermanfaat,,,salam kenal ya mas
ReplyDeletesalam kenal juga sob,, silahkan dibaca n di coba tutornya.. :D
Deletekeren..keren... boleh nih di coba
ReplyDeleteOke,, silahkan dicoba sob,, mksih ya dah kasih komentar.. :D
Deletewah kapan" bisa dicoba nih tutor,,
ReplyDeletebtw follow sukses #106 ditunggu follbacknya ya sob
silahkan dicoba sob.. :D Follow back sukses,, thanks ya..
Deletethanks tutorialnya ya gan
ReplyDeletesama-sama gan.. :D
DeleteKEREEEn GAAAAN!!!!
ReplyDeletefollow will be Done
Yoi gan... silahkan dicoba.. Follback done.. :D
DeleteThanks Gan
Deletemantap gan , nice info :D
ReplyDeletethanks.. silahkan dicoba gan.. :D
Deletefollowback sob :)
ReplyDeletehttp://softwareku4u.blogspot.com
nice blog,
ReplyDeleteinfo yang sangat menarik gan moga tambah sukses aja blognya. and boleh donk ane coba..
sekalian follback gan.. di Blogriefs
Waduh ini baru mantap bro :D izin follow blognya ya mas :D
ReplyDeletehttp://mencakup-semua.blogspot.com/
Saya coba terpakan gan, trims ya...di tunggu kunjungan baliknya.
ReplyDeleteThanks ya gan >>> Izin Coba,,
ReplyDeleteTerimaksh saya sdh brhasil pasang diblog sy.
ReplyDelete