Menu Horisontal Melayang di bawah Template

Bismillah, dapat ilmu baru lagi ni, sempat juga kemarin bingung mau bikin Menu horisontal melayang tapi browsing kmana gak dpet yang muasin. akhirnya dapet dari pak guru dah.

Bentuknya kayak ini sob.. nyantol dibawah template.

Langsung saja memperaktekkan bagaimana cara menempatkan atau memasang menu melayang pada bagian bawah template seperti yang nampak pada contoh gambar atas ini  yang memiliki beberapa menu. sobat bisa menambahkan lebih banyak menu termasuk sub menu.

Berikut langkah-langkahnya :

1. Login ke blog sobat kemudian pilih Rancangan dan Edit Hmtl
2. Sebelum melakukan pengeditan, sebaiknya back up terlebih dahulu template sobat.
3. Expand template widget.
4. Kemudian tempatkan kode berikut diatas kode </body>. 

<div id="zfpm_div" style="display:none;">
<div id="zfpm_upperBox">
</div>
<ul id="zfpm_ul">
<!-- Your menus start -->
<li><a href="">YOUR MENU-1</a></li>
<li class="dir"><a href="">YOUR MENU 2 (containing submenu)</a>
<ul>
<li class="dir"><a href="">YOUR SUBMENU 2.1 (containing sub-submenu)</a>
<ul>
<li><a href="">YOUR SUB-SUBMENU 2.1.1</a></li>
<li><a href="">YOUR SUB-SUBMENU 2.1.2</a></li>
</ul>
</li>
<li><a href="">YOUR SUBMENU 2.2</a></li>
<li><a href="">YOUR SUBMENU 2.3</a></li>
</ul>
</li>
<li><a href="">YOUR MENU 3</a></li>
<!-- Your menus end -->
</ul></div>
<script type="text/javascript">
var zfpm_colorTheme = 'light'
var zfpm_shareBox = 'no';
</script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="http://zfpmenu.googlecode.com/svn/trunk/js/zfpmenu.js"></script>

 Untuk melakukan setting tampilannya berikut yang sobat mesti rubah :

• var zfpm_colorTheme = 'light'; pilihan: 'dark' atau 'light'.
• var zfpm_customBackgroundImage = ' '; pilihan : full URL of an image.
• var zfpm_customBackgroundColor = ' '; pilihan: contoh: '#999999'.
• var zfpm_shareBox = 'yes'; pilihan: 'yes' atau 'no'.
• var zfpm_shareBoxPosition = 'right'; pilihan: 'left' atau 'right'.
• var zfpm_shareBoxCustomWidth = ' '; pilihan: contoh: '300'.
• var zfpm_waitForPageLoad = 'yes'; pilihan: 'yes' atau 'no'.

Insya Allah gampang sob, dah gtu keren abiz.. ya deh, smoga bermanfaat adanya.
salam kenal. Ari Suharyadi

Baca juga artikel lainnya