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
hehe.. sepertinya bagus juga nih, sayangnya Blog ane sudah full :) oia salam kenal aja bro...
BalasHapusBro bisa buat menu navigasi kayak di Indowebster gk??
BalasHapusItu 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....