Menu Drop Up Melayang (Fixed Navigation Menu)

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 I

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

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

<!-- 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,