Cara Membuat Menu zFPmenu Melayang di Blog

   zFPmenu adalah sejenis widget yang menampilkan menu seperti melayang yang terletak di sudut bawah blog. zFPmenu ini bisa dikreasikan sesuai keinginnan dengan mengedit code Javascript nya dan tersedia pula tombol share sperti ke Facebook dan Twitter. Dan disediakan pula scroll button untuk ke atas dan bawah blog.


Sebenarnya langkah memasukan widget ini ada dua cara yaitu via edit HTML dan via HTML/JavaScript. tapi hasilnya akan masih sama, tergantung anda ingin menggunakan yang mana.

Langkah-langkah bila menggunakan edit HTML :
1. Login ke blogger.com
2. Masuk ke Template
3. Seperti biasa templatenya Backup terlebih dahulu untuk berjaga-jaga
4. Pilih edit HTML
5. Cari Code </body> dengan menekan Ctrl + F lalu masukan Code di bawah ini

<!-- 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="http://adukcampuraduk.blogspot.com/">Aduk Campur Aduk Blog</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 -->

note :
- ganti menu dengan menu anda sendiri. Tempatkan atribut <class="dir"> dalam tag <li> di mana anda ingin menambahkan submenu.
- untuk text yang berwarna merah dapat di edit sesuai kebutuhan,untuk memasukan lokasi atau alamat yang dituju (URL) bisa edit di bagian <a href=" masukan URLnya disini">
contoh : <li><a href="http://adukcampuraduk.blogspot.com/">Aduk Campur Aduk Blog</a></li>
- untuk text yang berwarna biru dapat diganti dengan 'light' (zFPmenu berwarna Putih) atau 'dark' (zFPmenu berwarna hitam)
- untuk text yang berwarna ungu dapat di ganti dengan 'yes' atau 'no' , untuk menampilkan Share box.
Daftar Settingan tambahan adalah seperti ini :

• 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'

6. Jika sudah selesai pilih Save Template

Langkah-langkah menggunakan HTML/JavaScript :
1. Login ke blogger.com
2. Masuk ke Layout atau Tata Letak
3. Pilih add a Gadget
4. Pilih HTML/JavaScript dan Masukan Kode yang di atas tadi (configurasinya sama saja)
5. Jika sudah beri judul atau dikosongkan pun tidak apa-apa
6. Lalu Save dan Lihat hasilnya

   Mungkin disarankan untuk menggunakan HTML/JavaScript dari pada menggunakan edit HTML karena bila menggunakan HTML/JavaScaript resiko kegagalan dapat mudah diatasi karena pengkodean dilakukan di tempat memasukannya Widget dan bila salah tinggal hapus saja Widgetnya.
Sekian dan semoga bermanfaat