Cara Membuat Menu Navigasi Melayang di Sudut Blog

Pada kesempatan kali ini saya akan share cara membuat menu navigasi melayang di sudut blog. Menu ini juga dapat anda edit sesuai kebutuhan, mau dibuat seperti daftar menu, daftar kategori, atau daftar link yang berguna, dan juga dilengkapi dengan tombol navigasi ke atas dan kebawah.Bisa di lihat screenshot dan DEMO

Screenshot :




Silahkan ikuti langkah'' di bawah ini:

1. Buka blogger.com > Rancangan > Edit HTML.
2. Centang Expand Template Widget.
3. Copy paste kode berikut diatas kode </body> 

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 </a>
<ul>
<li class='dir'><a href='/'>Submenu A</a>
<ul>

<li><a href=' link dituju '>submenu a</a></li>
<li><a href=' link dituju '>submenu b</a></li>
</ul>
</li>
<li><a href=' 
link dituju '>Submenu B</a></li>
<li><a href='
 link dituju '>Submenu C</a></li>
</ul>
</li>
<li class='dir'><a href='/'>Category</a>
<ul>
<li class='dir'><a href='/'>Submenu A</a>
<ul>
<li><a href=' 
link dituju '>submenu a</a></li>
<li><a href='
 link dituju '>submenu b</a></li>
</ul>
</li>
<li><a href='
 link dituju '>Submenu B</a></li>
<li><a href='
 link dituju '>Submenu C</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 -->

4. Kode yang warna merah anda harus memasukkan link yang dituju sobat, 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. Silahkan klik Simpan Template dan menu yang sobat buat di blog anda sudah Sukses


0 komentar:

Post a Comment