Home » » Cara membuat zFP menu di Blog

Cara membuat zFP menu di Blog

Hello Pengunjung Oktri Blog,Tutorial kali ini Menjawab pertanyaan dari teman blogger yang menanyakan menu ZFP pada blog ini Pada pojok bawah blog oktri ini.

zFPmenu – Fixed-Position Custom Menu and Navigation/Share Widget, adalah widget ‘melayang’ yang bisa diisi dengan menu berisi link-link sesuai keinginan.

Di dalamnya sudah termasuk navigasi scroll to top/bottom of page (scroll ke bagian paling atas/bawah halaman web) ber-engine jQuery, dan juga tombol share Twitter dan Facebook (bila diinginkan

Berikut ini Langkah langkah tersebut :

1. Masuk ke blog sobat masing-masing
2. Buka Rancangan>>Pengaturan HTML
3. Cari 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><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 -->


langkah selanjutnya yaitu Simpan dehh...

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.

Nb : ganti kode yang warna merah sesuai keinginan sobat (menu ini ane dapatkan dari inimu.com)

referensi : http://inimu.com/





Artikel Terkait:

2 komentar:

  1. maaf klo boleh nanya .....
    link isi menu kita di tempatkan pada kode apa ya ??
    maklum aq baru belajar....!! thanks

    BalasHapus
  2. kak oktri, minta html zFPnya yg kakak pake...
    bingung pake html yang kakak posting..hehheh

    join this site http://www.andredarknessraid.blogspot.com

    BalasHapus

Fivers

Selamat Datang Di OKTRI BLOG

Selamat datang di Blog saya, semoga saja kalian bisa mendapatkan apa yang kalian butuhkan diblog saya ini. Terima kasih Telah Berkunjung Di Blog saya,apabila berkenan silahkan berkomentar dan follow blog saya,mari kita saling berbagi ilmu tentang apa saja...Selengkapnya tentang Tutorial Ini

Sekilas tentang penulis

Nama saya Oktri darmadi,saya seorang Mahasiswa S1 Teknik Informatika Di IBI DARMAJAYA Bandar Lampung.

Social Stuff

  • RSS
  • Twitter
  • Facebook
  • HOME
Oktri