Hi, guest ! welcome to AM-Shared. | About Us | Contact | Register | Sign In
<div style='background-color: none transparent;'><a href='http://am-shared.blogspot.com/2012/05/memasang-rss-ticker-javascript-hotline.html' title=''>Pasang Rss ticker</a></div>

Minggu, 29 April 2012

Ditulis Oleh : Ali Mahmudi - Berbagi Kreasi

Admin : Ali Mahmudi
Email : am.cybers@yahoo.com
Terbit : Minggu, 29 April 2012
Judul : Membuat Menu Melayang Pojok Bawah Pada Blog

:: Lihat info lengkap penulis ::

Membuat Menu Melayang Pojok Bawah Pada Blog

Ali Mahmudi Minggu, 29 April 2012

Membuat Menu Melayang Pojok Bawah Pada Blog

zFPmenu, Custom Menu and Navigation/Share Widget, Baru pernah neh membuat postingan bingung memberi judulnya apa. hehe... rada jenuh juga dari kemarin saya disibukan dengan SEO, untuk Kontes SEO, jadi lupa sama yang lain deh!!
Nah pada kesempatan siang ini, saya akan membahas tentang custum widget keren yaitu zFPmenu – Fixed-Position Custom Menu and Navigation/Share Widget, adalah sebuah widget ‘melayang’ yang bisa diisi dengan menu berisi link-link sesuai keinginan.
Dengan widget ini sobat bisa menentukan sendiri menu-menunya. Dan lagi di dalamnya juga 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). gimana sob... keren kan ??

Dengan satu widget ini sobat sudah seperti membuat 2macam widget, yaitu:
a. navigasi scroll to top/bottom of page
b. Share ke social bookmark

Preview/Demo


Bila Sobat tertarik, silahkan langsung saja ikuti langkah-langkah membuatnya.

1. Seperti biasa, Login ke akun blogger sobat
2. Masuk Rancangan/Layout
3. Pilih Edit HTML
4. Klik "Download Template Lengkap" (ini untuk memBackUp template sobat)
5. Beri tanda centang "Expand Template Widget"
6. Tekan Ctrl+F (untuk mempermudah pencarian) dan cari kode: </body>

7. Bila sudah ketemu, copy paste-kan kode dibawah ini tepat diatas kode </body>

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 -->
 
 
8. Sebelum menyimpan template sobat, harap gantilah untuk Submenu sesuai keinginan sobat.


Setting/Variable
Perhatikanlah  kode 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'

Setting Preview
Color theme      :     light or dark
Show share box   :     yes or no


Penting !!
Script ini tidak desain untuk Internet Explorer 6 browser.

Sebaliknya, jika Anda menambahkan variabel zfpm_ieUpgradeMessage var = 'yes' untuk script, ia akan menampilkan pesan pemberitahuan upgrade di bagian atas halaman (lihat screenshot di sini) untuk IE 6 pengguna.

Comments
0 Comments

Join Us!

Site Info


Free PageRank Checker
Review http://am-shared.blogspot.com on alexa.com