Menu ini keren sob, menu ini melayang dan berada di bagian bawah blog sobat, kenapa saya bilang keren karena ZFP Menu ini memiliki fungsi tombol back down and back to top, jadi sobat tidak perlu memasang tombol back to top lagi.
Untuk model dan contohnya sobat bisa lihat gambar di atas! Gambar yang di sebelah kanan sob, kalo yang di sebelah kiri itu foto tunangan saya, hehehe . . . yah gambarnya saya kasih model dikit biar klihatan keren, ckckck . . .
Bagaiman kalo sekarang kita bahas lansung cara memasangnya di blog sobat, ayo dah . . .
Cara memasang ZFP Menu :
1. Masuk ke akun blogger sobat.
2. Pada menu klick Rancangan ➨ Edit HTML.
3. Centang Expand Template Widget ➨ Backup dulu templatenya untuk mengantisipasi bila terjadi kesalahan.
4. Selanjutnya dalam Edit Template sobat cari kode </body> Jika kesulitan mencarinya coba baca Cara Cepat Mencari Kode HTML.
5. Jika sudah ketemu sekarang sobat copy kode script berikut dan paste atau letakkan di atas kode tadi.
<!-- zFPmenu START by: Oto Website-->
<div id="zfpm_div" style="display:none;">
<div id="zfpm_upperBox">Title Blog (judul blog)
</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 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 by: Oto Website-->
<div id="zfpm_div" style="display:none;">
<div id="zfpm_upperBox">Title Blog (judul blog)
</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 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 by: Oto Website-->
6. Simpan template.
Keterangan :
Jika pada template blog sobat sudah terpasang script Jquery 1.4.2, maka sobat tidak perlu memasangnya lagi, dan tinggal menghapus kode Jquery tersebut yang bewarna biru.
Aturan Seting ZFP Menu :
- 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'.
- Ganti teks warna hijau dengan nama menu.
- Ganti warna mera (#) dengan url/link tujuan.
Bagaimana apakah sobat berhasil menerapkannya ke blog sobat, silahkan tinggalakan tanggapan atau komentar sobat tentang postingan atau articles di atas!
:-d :-d
BalasHapus