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 :
Berikut langkah-langkahnya :
- Login ke blog sobat kemudian pilih Rancangan dan Edit Hmtl
- Sebelum melakukan pengeditan, sebaiknya back up terlebih dahulu template sobat.
- 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>
<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 :
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.
