Penting!! Sobat Blogger yang ingin re-post atau menulis kembali artikel kami diblog/website Anda, harap lihat halaman DISCLAIMER ( beberapa blog telah diproses di Google Removal Content ) Setiap tindakan pelanggaran hak cipta (COPAS) akan dilaporkan, TANPA pemberitahuan.


Membuat Menu Drop Up Melayang atau Fixed Costum Menu Navigasi yang berada di posisi bagian bawah Blog (dibawah footer). Menu Navigasi Horizontal ini unik karena umumnya menu drop down namun kali ini drop up ( menu mempunyai item-item menjulang ke atas) dengan posisi fixed di bagian paling bawah blog (fly fixed widget menu). Fixed Position Menu Drop Up ini juga dilengkapi fitur-fitur widget Artikel Terbaru, tombol share Twitter, Facebook, dll. serta fitur tombol navigasi scroll to top/bottom (scroll ke bagian paling atas/bawah halaman blog). Menu Navigasi ini memang keren Sob dan cukup lengkap mewakili banyak fitur-fitur pengting untuk Blogger, so langsung saja ikuti panduan membuatnya dibawah ini.
Satu lagi Menu Navigasi unik dan keren kembali saya sharing buat Sobat Blogger tentunya. Seperti yang telah disinggung diatas, Menu Drop Up Melayang ini, berfungsi serba guna (multi purpose) bisa juga dipasang box advertise (widget iklan) jika Anda menginginkannya. Seperti biasa langsung saja cek demonya berikut:


DEMO MENU DROP UP MELAYANG II (Share Button, Artikel terbaru, Box Iklan)


Demo diatas sudah disesuaikan menu-menu dan submenunya (sebagai contoh demo saja), Anda dapat merubahnya sesuai keinginan dan kebutuhan blog Anda. Untuk lebih jelasnya, ikuti saja penjelasannya dibawah ini.

Markup HTML Basic Menu 

<div id="zfpm_div" style="display:none;"> <div id="zfpm_upperBox"> Pasang ads,widget,text message, atau lainnya disini. </div> <ul id="zfpm_ul"> <!-- Menu Start --> <li><a href="">MENU-1</a></li> <li class="dir"><a href="">MENU 2 (mempunyai submenu)</a></li> <ul> <li class="dir"><a href="">SUBMENU 2.1 (mempunyai sub-submenu)</a></li> <ul> <li><a href="">SUB-SUBMENU 2.1.1</a></li> <li><a href="">SUB-SUBMENU 2.1.2</a></li> </ul> <li><a href="">SUBMENU 2.2</a></li> <li><a href="">SUBMENU 2.3</a></li> </ul> <li><a href="">MENU 3</a></li> <!-- Menu End --> </ul> </div>
Kode diatas adalah susunan menu pada awalnya, dari sini Anda dapat merubah dengan menu-menu, submenu atau sub-submenu Anda sendiri.

Untuk menambah menu baru, tambahkan kode berikut:
<li><a href="">Nama MENU</a></li>
Untuk menambah submenu, pasang attribute class="dir" didalam tag li, contoh:
<li class="dir"><a href="">Nama MENU</a></li> <ul> <li><a href="">SUBMENU 1</a></li> <li><a href="">SUBMENU 2</a></li> </ul>
Dalam kode div Box dengan ID zfpm_upperBox Anda dapat memasang widget, script iklan atau ads, gambar, tulisan pesan dsb. Anda juga bisa lihat contohnya pada Demo diatas.

Javascript jQuery

Karena menu drop up tersebut memiliki fitur-fitur yang cukup lengkap seperti opsi pilihan warna, menampilkan share button, serta fungsi tombol navigasi scroll to top/bottom, desain CSS menu, tentu ini membutuhkan script Javasccript dan jQuery.

<script type="text/javascript"> var zfpm_colorTheme = 'light'; // Pilih warna theme: 'dark' OR 'light' var zfpm_shareButton = 'no'; // Menampilkan button share? 'yes' OR '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>
script source: inimu.com

Pilihan atau opsi yang dapat Anda gunakan:

  • var zfpm_colorTheme = 'light'; untuk warna theme terang
  • var zfpm_colorTheme = 'dark'; untuk gelap
  • Valid input: 'light' or 'dark'
  • var zfpm_shareBox = 'yes'; untuk menampilkan Twitter ‘Retweet’, Facebook ‘Share’, and Facebook ‘Like’ buttons (using LinksAlpha’s widget).
  • var zfpm_shareBox = 'no'; untuk tidak menampilkan button share
  • Valid input: 'yes' or 'no'

Langkah Memasang Fixed Menu Drop Up

Untuk memasang menu ini cukup mudah, saya ambil contoh menu yang sudah jadi (DEMO). Yang Anda lakukan hanya copy Final Code dibawah ini dan letakkan tepat di atas atau sebelum tag </body>.

Blogger > pilih Template > edit HTML > Control+F > cari tag </body> (paling bawah template)
> copy semua kode dibawah ini dan letakkan tepat di atas atau sebelum tag </body>.
Pratinjau > jika OK > Simpan Template

Final Kode Menu Drop Up I


Final Kode Menu Drop Up I<!-- zFPmenu START --> <div id='zfpm_div' style='display:none;'> <ul id='zfpm_ul'> <!-- Your menus start --> <li class='dir'> <a href='http://problogiz.blogspot.com/'>Pro</a> <ul style='width:130px;'> <li><a href='http://problogiz.blogspot.com/search/label/tutorial%20Blogger'>Blogger</a></li> <li><a href='http://problogiz.blogspot.com/search/label/tutorial%20SEO'>SEO Blogger</a></li> <li><a href='http://problogiz.blogspot.com/search/label/Blogger%20Template'>Templates</a></li> <li><a href='http://problogiz.blogspot.com/search/label/Making%20Money'>Adsense</a></li> <li><a href='http://problogiz.blogspot.com/search/label/Download%20Gratis'>Download</a></li> <li class='spacer'></li> <li class='spacer'></li> <li style='line-height: 30px ! important;'><a href='http://problogiz.blogspot.com/search/label/Blog%20Tool' style='display:inline !important;'>Tools</a> | <a href='http://problogiz.blogspot.com/p/tukar-link.html' style='display:inline !important;'>Links</a></li> <li style='line-height: 30px ! important;'><a href='http://problogiz.blogspot.com/p/contact.html' style='display:inline !important;'>Contact</a> | <a href='http://problogiz.blogspot.com/p/about-me_27.html' style='display:inline !important;'>Author</a></li> <li><a href='http://problogiz.blogspot.com/p/daftar-isi.html'>Site Map</a></li> <li class='spacer'></li> <li class='separator'></li> <li class='spacer'></li> <li><a href="#" onclick="window.open('http://www.facebook.com/pages/ProBlogiz/14681885212278','','width=1000,height=600,scrollbars=yes,menubar=yes,toolbar=yes'); return false;">Facebook Like</a></li> <li><a href="#" onclick="window.open('http://www.twitter.com/problogiz','','width=1000,height=600,scrollbars=yes,menubar=yes,toolbar=yes'); return false;">Twitter Follow</a></li> <li><a href="#" onclick="window.open('http://plus.google.com/104926254868019334563','','width=1000,height=600,scrollbars=yes,menubar=no,toolbar=no'); return false;">Follow me in Google+</a></li> <li><a href="#" onclick="window.open('http://feeds.feedburner.com/Problogiz','','width=1000,height=600,scrollbars=yes,menubar=no,toolbar=no'); return false;">RSS/Email Feed</a></li> <li class='spacer'></li> <li class='spacer'></li> <li class='dir nolink'>Komentar <ul id='zOcehanUl' style='left:75px;'> <li><script type="text/javascript" src="https://problogizjs.googlecode.com/files/ucapan.js"></script></li> </ul> </li> </ul> </li> <!-- Your menus end --> </ul></div> <script type="text/javascript"> var zfpm_colorTheme = 'dark' var zfpm_shareButton = '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 -->
kode yang berwarna biru adalah link-link atau menu item, ganti dengan link menu Anda sendiri.
kode yang berwarna merah ganti dengan URL Sosial Media punya Anda

Final Kode Menu Drop Up II (Light Theme. Share Button, Artikel Terbaru, dan Box Iklan)


Final Kode Menu Drop Up II<!-- zFPmenu START --> <div id="zfpm_div" style="display: none;"> <div id="zfpm_upperBox"> <div id="spotIklan" style="width:470px;"> <!-- Isi iklan mulai --> ISI IKLAN atau Teks, Gambar, Dll <!-- 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> <ul id="zfpm_ul"> <!-- Your menus start --> <li><a href="#">HOME</a></li> <li class="dir"><a href="#">MENU Collection</a> <ul> <li class="dir"><a href="#">Drop Down</a> <ul> <li><a href="http://problogiz.blogspot.com/2012/10/10-menu-drop-down-keren-pure-css.html">Drop Down Pure CSS</a></li> <li><a href="http://problogiz.blogspot.com/2013/01/menu-navigasi-mega-dropdown-keren.html">Mega Drop Down</a></li> <li><a href="http://problogiz.blogspot.com/2013/02/menu-dropdown-efek-melayang-pure-css3.html">Fly Drop Down</a></li> </ul> </li> <li class="dir"><a href="#">Horizontal</a> <ul> <li><a href="http://problogiz.blogspot.com/2012/10/koleksi-menu-navigasi-horizontal-keren.html">Horizontal Keren I</a></li> <li><a href="http://problogiz.blogspot.com/2012/10/koleksi-menu-navigasi-horizontal-keren_7.html">Horizontal Keren II</a></li> <li><a href="http://problogiz.blogspot.com/2012/10/koleksi-menu-navigasi-horizontal-keren_4757.html">Horizontal Keren III</a></li> <li><a href="http://problogiz.blogspot.com/2012/12/simple-menu-navigasi-efek-hover-transisi.html">Efek Hover Transisi</a></li> <li><a href="http://problogiz.blogspot.com/2012/10/menu-navigasi-horizontal-efek-lavalamp.html">Efek Lavalamp</a></li> </ul> </li> <li><a href="http://problogiz.blogspot.com/2013/05/2-style-menu-multi-tab-view-keren.html">TAB View Menu</a></li> <li><a href="http://problogiz.blogspot.com/2013/04/menu-navigasi-rolling-door-style.html">Rolling Door Style</a></li> </ul> </li> <li class="box"> <a href="http://feeds.feedburner.com/Problogiz" target="_blank">Artikel Terbaru</a> <ul> <li> <div style="height: 400px; overflow: auto; width: 300px;"> <style>span.headline{font-weight:bold;}</style> <script src="http://feeds.feedburner.com/Problogiz?format=sigpro" type="text/javascript"></script> </div> </li> </ul> </li> <!-- Your menus end --> </ul> </div> <script type="text/javascript"> var zfpm_colorTheme = 'light' var zfpm_shareBox = 'yes'; </script> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script> <script src="http://zfpmenu.googlecode.com/svn/trunk/js/zfpmenu.js" type="text/javascript"></script> <!-- zFPmenu END -->
kode yang berwarna biru adalah link-link atau menu item, ganti dengan link menu Anda sendiri.
kode yang berwarna merah ganti dengan URL feed RSS punya Anda

Ok Sob, itu dua contoh Fixed Menu Drop Up yang telah saya sediakan, Anda bisa merubah link-link, menu item, dll. sesuai Blog Anda.

Catatan:
Script ini tidak desain untuk browser Internet Explorer 6.
Walaupun begitu, jika Anda menambahkan variabel  var zfpm_ieUpgradeMessage = 'yes'; pada script, ia akan menampilkan pesan pemberitahuan upgrade bagi  pengguna IE 6 di bagian atas halaman.


Selamat Mencoba:)
Salaam,


Artikel Terkait Lainnya:
Click here for comments

13 komentar

keren abis bro, nanti pegen coba deh. salam.

REPLY

thanks, sob
silahkan dicoba:)

REPLY

mantab nih, keren abiss...

REPLY

gan gimana caranya membuat artikel terkait dengan scroll blog ane kaga work mulu

REPLY

gan Buat artikel terbarunya gimana??? uda ane pasang feed tp tetep gag muncul pa ane yang gag ngerti.... terpaksa ane ilangin menu artikel terbaru,, ... kasi tau ok gan :D ke chombrosshare.b.com

REPLY

coba cek dulu setelan bloggernya > lainnya > umpan situs > Posting URL Pengubahan Arah Feed > cek apa sudah dibuat ...klo sudah akan Url RSS Feed terlihat seperti ini http://feeds.feedburner.com/Problogiz.

coba cek juga jquery.min.js, jika sudah mempunyai ditemplate tidak perlu dipasang lg yang atas.

thanks

REPLY

klo belum buat, buat dulu mas di feedburner,

REPLY

salam kenal mas salam sejahtera.....
http://samawaberbudaya.blogspot.com


salam hangat blogger sumbawa

REPLY

salam sejahtera
met kenal juga mas:)

REPLY

bang jin share.....
baru belajar bwt blog n bel scrip boz......

REPLY

mantap gan,,,
http://adingshahab79.blogspot.com
thank,,

REPLY

bagus memang menunya, ijin copas mau coba pasang di blog saya.

REPLY

Silahkan Berkomentar
Komentar/pertanyaan Sesuai Topik, Please NO SPAM, NO Promotion Links
Convert Kode HTML sebelum disisipkan

Convert

Google+ Followers

Submit email Anda, dapatkan update artikel:


Like Me

Artikel Terbaru

|Copyright © 2013| Problogiz |All Rights Reserved|