Cara Membuat Menu Di Bawah Template Secara Melayang

Langsung saja memperaktekkan bagai mana cara menempatkan atau memasang menu melayang pada bagian bawah template seperti yang nampak pada Belajar Komputer yang memiliki beberapa menu dan 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">
tempat ads sobat
</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>

bagi sobat yang templatenya sudah terpasang jquery.min1.4.2.js maka sobat hapus saja jquery-nya akan tetapi jika belum terpasang maka sobat wajib menyertakan jquery.min versi1.4.2.
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'.

Mudah bukan tanpa harus mengedit atau menambahkan kode CSS. menu ini sengaja dirancang oleh empunya dan diberi nama zPFmenu untuk memudahkan sobat blogger yang membutuhkan banyak menu. Semoga berhasil. 

 

Sumber: http://www.andisyam.web.id

Posted in: Blog