zFPmenu

Add comments

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

Setting/Variable

You can change the color theme and the share buttons visibility setting.

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

You can also place text messages, advertisements, or whatever you like in the div box with the ID zfpm_upperBox (above the menu).

Warning

This script is not design for Internet Explorer 6 browser.

Instead, if you add a variable var zfpm_ieUpgradeMessage = 'yes'; to the script, it will show an upgrade notification message on the top of page (see screenshot here) for IE 6 users.

Tweet i

zFPmenu cara membuat zfpmenu cara membuat link di gadget inimu kok tidak bisa tampil tab menu di blogspot saya tombol navigasi ke atas jquery

75 Responses to “zFPmenu”

angga says:

28/08/2010 at 11:30

wah bagus sekali ini. thanks ya

Reply
irfan says:

02/10/2010 at 15:42

wah thanks mas… bagus banget.. tp gimana ya caranya nambahin menu kayak Artikel Terbaru yang ad di zFPmenu dan menu yg di @Inimu.com.

maklum masih newbie mas… mhon bantuannya ya..

Reply
- zon says:
  
  02/10/2010 at 18:09
  
  Menu Artikel Terbaru itu agak pake hack sedikit
  Ambil script dari feedburner, di bagian Publicize => BuzzBoost.
  Trus pasang sbg menu, spt ini:
```
<li class="box">
 <a target="_blank" href="http://feeds.feedburner.com/Inimucom">Artikel Terbaru</a>
 <ul>
  <li>
   <div style="width:300px; height:400px; overflow:auto;">
    <style>span.headline{font-weight:bold;}</style>
    <script src="http://feeds.feedburner.com/Inimucom?format=sigpro" type="text/javascript"></script>
   </div>
  </li>
 </ul>
</li>
```
  Kalo mau langsung pake contoh itu juga bisa, tinggal ganti aja tulisan Inimucom dgn nama alamat RSS feedburner kamu.
  
  .
  Reply
kyuutaro says:

07/10/2010 at 15:36

Akhirnya dibikin juga tutorialnya
zFPmenu, namanya harus dipatenin nih

Reply
LucidPoster says:

11/12/2010 at 10:26

Terimakasih untuk bisa berbagi…

Reply
G-13 says:

08/01/2011 at 01:16

heeelp….
koq sub menu nya ga muncul jg…..
di sini http://www.teenagerx.co.cc

Reply
- zon says:
  
  09/01/2011 at 01:50
  
  pasang kodenya udah bener blom?
```
<li class="dir"><a href="http://example.com">menu</a>
   <ul>
      <li><a href="http://example.com">SUB-MENU-1</a></li>
      <li><a href="http://example.com">SUB-MENU-2</a></li>
      <li><a href="http://example.com">SUB-MENU-3</a></li>
   </ul>
</li>
```
  .
  Reply
  - G-13 says:
    
    10/01/2011 at 04:36
    
    yeaaahhh… udah bisa mas…. wkwkwkk… tengkyuu….
    
    code sebelumnya yg ga bisa tu saya copy dr artikel ini….
    coba lihat code ini…
    
    YOUR MENU 2 (containing submenu)
    
    makanya submenunya ga muncul….
    ato emg sya yg salah??
    
    Reply
    - zon says:
      
      24/07/2011 at 17:05
      
      tes bro
      
      Reply
      - zon says:
        
        24/07/2011 at 17:06
        
        tes lagi neeehh
      - G-13 says:
        
        25/07/2011 at 08:22
        
        hahahah..
        tengkyu bnget dah ma widget nya… bisa di customisasi sndiri… tapi dah ngungsi nee… ke sini Mampir2 dunk ^^
        but inimu makin keren aja ne…
      - G-13 says:
        
        25/07/2011 at 08:24
        
        oalah… salah..
refky says:

19/01/2011 at 11:21

mas ,ajarin donk gimana caranya buat broser&tools sperti punya mas . .wah bagus banget smua siitusnya jd satu cbox jg ada tukh ajarin donk ,replay di email ku ya .thnks

Reply
demustaine jaya says:

24/01/2011 at 12:23

mas saya masang menu tersebut diblog saya. kalo menggunakan exploler sub menu bisa tampil tapi kalo make mozilla atau opera kok ndak bisa tampil ya submenunya. tks infonya.

Reply

agung says:

11/02/2011 at 14:02

mas ko nambahin tombol close di upperBox na gimana? tanks ilmu namas

zon says:

16/02/2011 at 14:55

Di dalam upperBox, misalnya diisi spot iklan seperti ini:

<div id="spotIklan" style="width:470px;">
   <!-- Isi iklan mulai -->
   Isi iklan
   <!-- Isi iklan selesai -->
   <a onclick="document.getElementById('spotIklan').style.display='none';" title="Close" href="javascript:void(0);" style="position:absolute; right:-7px; top:-8px; color:#fff; background-color:#333; border:1px solid #ccc; border-radius:8px; -moz-border-radius:8px; opacity:0.75; filter:alpha(opacity=75); text-decoration:none; font-size:13px; line-height:14px; font-weight:bold; margin:0; padding:0; width:16px; height:16px;"><span style="position:relative; bottom:2px;">x</span></a>
</div>

REGGA says:

15/02/2011 at 03:48

Kakak makasih Code nya ..
wah Jadi tambah menarik Blog / web saya dengan ada nya code widget ini kakak ..
makasih banyak

Reply
cynthia says:

18/02/2011 at 10:10

mas klo mau ope link ke halaman sesuka kita caranya gimana?

Reply
Syahrul says:

28/02/2011 at 17:55

Thanks banget atas widget nya sob,,, V’ teks nya bisa di letakkan di bwah menu g’ sob,, coz q mw buat teks news N’ posisi tepatnya menurut q t di bawah menu2,,, ni dia blog q sob http://www.syahrulhadi.blogspot.com

untuk sementara teks nya q biarin aja di atas dulu,,,, mohon bantuannya segera ya sob,,, sekali lagi thanks bnget atas tutorialnya,,,,

Reply
pajenk says:

02/03/2011 at 00:14

wah bagus banget mas,,,widget nya…

Reply
Ivan Adi Pratama says:

05/03/2011 at 18:17

mass, itu menunya bisa ditaruh samping ngga ???
cos di blog saya dibawah uda ada wibya toolbarnya !!!

tolong pencerahannya

Reply
Rian says:

15/03/2011 at 19:59

mas, kok saya ga muncul-muncul..
padahal udah saya coba berkali-kali..

Reply
ultimate-03 says:

17/03/2011 at 21:18

mantab sob, kalau ada yang tanya buka blog ane aja…
follow ya??

Reply
threex-hans says:

20/03/2011 at 17:27

bang di blog ane kug g bsa knapa ya gan???

Reply
Life is an Illusion says:

21/03/2011 at 23:57

Gan, cara menaruh kotaknya berada di kira gimana ?
thanx bgetz

Reply
- zon says:
  
  22/03/2011 at 16:30
  
  utk smentara blm bisa
  
  .
  
  Reply
Anak Rantau says:

25/03/2011 at 01:08

kalo cssnya di ganti bgmn gan.. cos warna ane mau revisi nih biar mecing gt sm template ane gan, mohon maaf sblmnya n makasih dah share,…

Reply
mencari sahabat says:

25/03/2011 at 03:20

bagus,,,,,,,,,,..

Reply
Alfredo says:

25/03/2011 at 17:19

cara mau masukkin link nya gmn?
misalnya nulis twitter lalu ketika di click kebuka tab baru twitter

Reply
- rizky says:
  
  28/06/2011 at 10:14
  
  tinggal di tambahin
  
  target=’_blank’
  
  cth : alamat
  
  Reply
TECHNO BLOG says:

29/03/2011 at 12:40

blognya bagus banget…. mampir ke blog q ya,,

Reply
Yon Rockavarium says:

12/04/2011 at 08:25

Om, ko’ aku pasang di blog ku, jquery slidshow yg di header malah ga muncul??

apa beda versi jquerynya berpengaruh???

gmna nih??

Reply
Rahmat says:

12/04/2011 at 19:45

cara mengubah warna tulisan di blog saya gmna? N’ Cara meletakkan tulisan di tengah gmna? tulisan yg Berikan Sedikit Komentar Buat Kemajuan BLOG ini

di sini http://www.style7.co.tv/ mohon bantuannya
atas prhatiannya Trims

Reply
Deden Rizki says:

23/04/2011 at 17:49

saya tidak bisa memasang gadget ini karena rumit!

Reply
- Gie says:
  
  16/10/2011 at 20:21
  
  rumit gimana neh?? :?:
  
  Reply
angga says:

25/04/2011 at 10:57

Mas thanks dh bagi ilmunya
ni box bsa dpindah di atas blog g????
klu bsa tolong dibantu, mungkin nambah scrip apa gtu????
blas secepatnya y klu bsa
sebelumna makasih,
di email saya jg bleh
hehehehehe

Reply
- zon says:
  
  25/04/2011 at 19:27
  
  Bisa aja, tapi nanti submenu nya jadi kacau.
  Coba aja pasang kode ini:
```
<style>
#zfpm_div { bottom:auto !important; top:7px !important; }
</style>
```
  .
  Reply
azka says:

12/05/2011 at 21:41

om spot untuk iklan dan tombol closenya tidak berfungsi.. tolong update om.. masa iklannya ga bisa di close.. terimakasih..

Reply
- zon says:
  
  13/05/2011 at 00:20
  
  lihat komentar no. 8 gan
  
  .
  
  Reply
  - azka says:
    
    14/05/2011 at 11:45
    
    iya gan tetap ga bisa gan gua coba.. , jadi ga bisa di close iklannya.. tombol closenya ga berfungsi update ya thanks
    
    Reply
Kode BLogger says:

14/05/2011 at 10:49

Mantep gann…
Ijin Share yaa gan… link sumber pasti ditancap

Reply
Kustommanga says:

16/05/2011 at 08:28

sebenarnya gw mau cari cara membuat tombol like facebook, Eh….. malah nemuin cara membuat menu zFP, keren gan!!! lihat di blog ku ni Baca Manga Indonesia

Reply
rembezz says:

26/05/2011 at 04:06

sob mau tny?
gimana caraya gnt misal blog bebas thu br klik msuk ke blog bebas..
mohon pencerahanya sob… thanx

Reply
rembezz says:

26/05/2011 at 17:50

var zfpm_customBackgroundImage = ”; valid input: full URL of an image.????

<< gag ngrt help

Reply
risky says:

04/06/2011 at 10:51

mas kalo di wordpress kodenya di taruh di mn ?? soalnya saya taruh di tag ga muncul muncul ??

Reply
risang says:

05/06/2011 at 10:12

ijin sedot mas bro

Reply
Mudztova says:

09/06/2011 at 18:28

gan, kok kalo dipake HORIZONTAL MENU yang schildrennya gak muncul? gimana nih?

Reply
Mudztova says:

09/06/2011 at 18:43

menu yang di atas tuh. coba buka blog saya, periksa deh

Reply
dy lc says:

19/06/2011 at 12:16

Mas.. mau nanya, kalau mau ditambahin kolom search gimana ya..
soalnya di blog ku ga ada kolom searchnya

dan kalau nambahin script kaya gitu disisipinnya di sebelah mana ya ? thanks..

Reply
riytshack says:

25/06/2011 at 12:23

klo d pasang di atas bisag y??

Reply
banjarnegara says:

01/07/2011 at 21:14

ijin nyoba mas

Reply
Andy says:

02/07/2011 at 16:35

keren boss, izin tester nih..

Reply
иня тнє яіррєя says:

05/07/2011 at 13:59

Tq Mas …
udah q pasang di blog aq

Reply
lab komputer sorong says:

23/07/2011 at 10:35

thks gan atas skriptx..izin copas gan…dan izin share artikelx pada blogku..

Reply
Busy Bee says:

29/07/2011 at 14:45

Thanks you so much..

Reply
duniaku says:

31/07/2011 at 22:43

matur nuwun sanget

Reply
Mario Zoner says:

08/08/2011 at 04:27

mantab gan…izin copas y..
tidak lupa saya sertakan sumbernya http://inimu.com/wp-includes/images/smilies/icon_smile.gif

Reply
myworld says:

19/08/2011 at 17:47

bro..kalau untuk WORDPRESS gimana cara pasangnya?…
thanks..

Reply
ghalih says:

28/08/2011 at 11:44

kalo mau pasang di wordpress gimana caranya gan

Reply
Android90 says:

16/09/2011 at 08:16

thx gan…..
lgsg gw pasang….

Reply
CowoBaek says:

25/09/2011 at 11:05

Maaf gan mau nanya, bikin sub-menu kaya punya agan yg “Ocehan Hari Ini” itu gmn biar box nya ga keluar dari batas halaman blog kita?
Soalnya kemarin aku coba, box nya kesamping keluar dari batas halaman blog kita.
Lihat disini dan ATPA soft

Reply
muhaziz97 says:

22/10/2011 at 10:00

Akhirnya berhasil juga blog ane di pasang begituan gaN,, Thanks yah
::: Download software :: Download game :: Blog tutorial :: IPTEK :::

Reply
ariss says:

28/10/2011 at 19:22

mas, ijin praktek sedot ya

and setelah aq pake, tampilannya sich bagus banget tapi aq ga bisa nge-link-kan ke yg bersangkutan , maklum newbie , silahkan cek ke http://setyawansaja.blogspot.com makasih…

Reply
terzier says:

09/11/2011 at 01:19

widgetnya sangat menarik.
yang jadi pertanyaan, bisa gak posisinya widget’nya itu berada di kiri atas. kalo bisa, code’nya apa?

rencananya, kalo emang bisa, mau aku pasang di website komunitasku tentunya, credit tetap aku utamakan

Reply
agung says:

18/11/2011 at 00:40

bro ane mau tanya nih,,biar menunya itu bisa di klik jadi link gmana ya,soalnya pas ane sedot trus paste.ane klik salah satu contoh menunya,eehh g da apa apanya,,,sory msh pemula banget, ,
maju trus pkoke bwad inimu.com

Reply
Rizky Gunawan says:

01/12/2011 at 15:50

terima kasih atas infonya.
langsung saya praktekin nih

Reply
nyobadownlod says:

01/12/2011 at 19:18

mantab bozzzz…………..appnya saya pakai………..

Reply
Aby says:

11/12/2011 at 21:31

makasih mas tutorialnya . . .
saya coba praktekin dulu . . .

Reply
numan says:

22/12/2011 at 05:31

admin if we want to hide it and then want to see
is there any option

Reply
Black Angel Syndicate says:

26/12/2011 at 12:50

Mantap gan… Berbagi Hacking, Tweaking, Source Code, Software, Game, Tips n Trick, dll

Reply
cipil says:

02/01/2012 at 09:45

izin coba gan……………

mohon panduanya ya

orang baru soalnya

Reply
Game Adult says:

03/01/2012 at 22:53

Nice Share , Visit Back gan.

Reply
ivan says:

12/01/2012 at 11:59

Salam kenal Bro, mau nanya soal hostingan zfpmenu.js,kira2 bisa nggak klo kita mau costum sendiri,soalnya sudah tak coba tapi malah ilang tuch menu,aq coba hosting di google code. soalnya aq mau custom itu gambar [http://inimu.com/0-etc/zfpmenu/img/info.png]

Reply
dody arya says:

30/01/2012 at 23:11

bang kalau mau taruh di sebelah kiri kodenya apa ya ?

Reply
zenald says:

03/02/2012 at 18:44

kalo masang itu di WP gimana mas??

Reply