Friday, January 13, 2012

Buat zFPmenu Plus Navigation Dan Share Widget

Filled under:

Pada Kesempatan kali ini saya akan coba share Tutorial Blogger Yaitu cara membuat zFPmenu Plus Navigation Dan Share Widget, Dan Widget ini adalah widget yang berisi menu-menu Link yang dapat diisi sesuai keinginan dengan Tampilan Keren Dan dilengkapi Widget Share Button.

Wah sepertinya saya sudah terlalu panjang lebar nih... Ya udah Sobat bisa lihat contoh dibawah lalu ikuti cara pembuatannya.


Gambar diatas adalah contoh zFPmenu dan untuk cara membuatnya silahkan sobat simak dibawah ini:
  1. Silahkan Login ke akun Blogger sobat
  2. Masuk Rancangan/Layout
  3. Pilih Edit HTML
  4. Silahkan Sobat Backup Template sobat (Jika Perlu)
  5. Beri tanda centang "Expand Template Widget"
  6. Tekan Ctrl+F (untuk mempermudah pencarian) dan cari kode </body>
  7. Bila sudah ketemu, copy paste kode dibawah ini tepat diatas kode </body>

    <!-- zFPmenu START -->
    <div id="zfpm_div" style="display:none;">
    <div id="zfpm_upperBox">
    <a href="http://filiex.blogspot.com/">Filiex Boy</a>
    </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>
    <!-- zFPmenu END -->
  8. Sebelum menyimpan template sobat, harap gantilah isi menu dan tampilan sesuai keinginan sobat.

    Setting/Variable
    Perhatikan Code berikut:

    var zfpm_colorTheme = 'light'

    pilihan warna yaitu 'ligh' or 'dark'
    Ganti dan sesuaikan dengan template sobat.

    var zfpm_shareBox = 'no'

    Kode tersebut untuk memunculkan share to Twitter ‘Retweet’, Facebook ‘Share’, and Facebook ‘Like’ buttons (using LinksAlpha’s widget).
    Bisa sobat setting sendiri, mau dimunculkan atau tidak.
    Bila mau memunculkannya cukup mengganti kode 'no' dengan 'yes'
  9. Selesai, simpan Template lalu lihat hasilnya....????

Bila sobat masih menemui beberapa kesulitan, Sobat bisa bertanya langsung dengan meninggalkan komentar.

0 comments:

Post a Comment