Jumat, 06 Mei 2011

0 Menambah zFPMenu Di Blogger



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).

zFPmenu Code

Put this code into your web pages (before the closing </body> tag):
<!-- 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 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 -->
*

Usage/Configuration

Menu

Replace menu dengan menu anda sendiri. Place class="dir" attribute inside li digunakan untuk menambah fungsi turunan.

Setting/Variable

Anda dapat mengganti tampilan menu Menu ini
  • var zfpm_colorTheme = 'light';
    Set the color theme for the menu widget.
    Valid input: 'light' or 'dark'
  • var zfpm_shareBox = 'no'
    Show the Twitter ‘Retweet’, Facebook ‘Share’, and Facebook ‘Like’ buttons (using LinksAlpha’s widget) or not.
    Valid input: 'yes' or 'no'
Setting Preview
Color theme:
Show share box:
Complete Variabel List
  • var zfpm_colorTheme = 'light'; valid input: 'dark' or 'light'.
  • var zfpm_customBackgroundImage = ''; valid input: full URL of an image.
  • var zfpm_customBackgroundColor = ''; valid input: example: '#999999'.
  • var zfpm_shareBox = 'yes'; valid input: 'yes' or 'no'.
  • var zfpm_shareBoxPosition = 'right'; valid input: 'left' or 'right'.
  • var zfpm_shareBoxCustomWidth = ''; valid input: example: '300'.
  • var zfpm_waitForPageLoad = 'yes'; valid input: 'yes' or 'no'.

Upper Box

Anda juga dapat menambahkan Pesan, iklan, or dan apapun di div box dengan ID zfpm_upperBox (diatas tampilan menu).

0 komentar:

Poskan Komentar

Kalau Comment Jangan Junk Ya

Free Blog Promotion

Untuk mengatur bagaimana tampilan tooltip tersebut nantinya, maka disini memerlukan kode style. Kode yang diperlukan seperti berikut ini.