Cara Membuat JQuery Floating Menu - Blog Kang Fatur

Cara Membuat JQuery Floating Menu

Assalamu'alaikum semuanya, gimana kabar sore hari ini tepat di Hari Raya Idul Kurban, sebelumnya saya mao ngucapin Selamat Hari raya Idul Kurban kepada apra sobat semua tanpa terkecuali.

Sore ini ksaya akan mengetengahkan kepada para sahabat blogger semua yang masih demen dan suka mampir mampir ke tempat saya yang sederhana ini. kali ini yang saya akan ketengahkan adalah tentang cara Membuat JQuery Floating Menu. Mungkin bagi para sahabat tentang postingan ini sudah tidak aneh lagi di dunia maya, dan mungkin sudah pada punya / pasang di blognya masing masing, tapi mungkin juga bagi blogger pemula masih ada yang belum dan mencoba tips ini.

Flaoting Menu adalah menu navigasi melayang yang selalu mengikuti halaman kemanapun kita scrool dia akan selalu mengikutinya. Baik mungkin para sobat juga mengerti walaupun penjelasannya kurang untuk dimegnerti. Kalau sobat belum ngerti dan kurang puas mari kita pasang Floating Menu ini di blog kita dengan mengikuti langkah langkah sebagai berikut :

1. Login ke blogger dengan id sobat
2. Masuk ke menu Tata Letak
3. Pada tab menu, klik Edit HTML
4. Backup template sobat, klik Download Template Lengkap (buat jaga jaga)
5. Selanjutnya cari kode ]]></b:skin> dan letakan kode CSS dibawah ini tepat di atas kode tersebut :


#bgsGR_JQmenu{
border-top:40px solid #797878;
border-left:6px double #999999;
border-right:6px double #999999;
border-bottom:20px ridge #999999;
border-radius-topright:10px;-moz-border-radius-topright:10px;
-webkit-border-radius-topright:10px;-goog-ms-border-radius-topright:10px;
border-radius-bottomright:10px;-moz-border-radius-bottomright:10px;
-webkit-border-radius-bottomright:10px;-goog-ms-border-radius-bottomright:10px;
overflow:auto;
position:absolute;
margin-top:150px;
left:5px;
width:250px;
height:325px;
background: url(http://i29.tinypic.com/21ndqav/gubhugreyot/images/bg_bgsGR-FJQmenu.jpg) top repeat-x;
text-align:center;
color:#fff;
font-size:18px;
}
#bgsGR_JQmenu ul {
list-style:none;
}
#bgsGR_JQmenu li {
font-size:12px;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-weight:normal;
color: #0000FF;
text-align:left;
}
#bgsGR_JQmenu li a {
color:#FFFF66;
text-decoration:none;
padding-left:20px;
background:url(http://i49.tinypic.com/xbepm1/gubhugreyot/images/bgMenuAnima.gif) left no-repeat;
background-position:0 5px;
}
#bgsGR_JQmenu li a:hover {
color:#00FF00;
text-decoration:none;
background:url(http://i27.tinypic.com/10qffux/gubhugreyot/images/MiniLoader.gif) left no-repeat;
background-position:0 0;
}



6. Selanjutnya Copy paste link jQuery.1.3.2.js di bawah ini dan letakkan di bawah KODE <head>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>


7. Kemudian Letakkan javascript di bawah ini tepat di atas KODE </body>


<script type="text/javascript">
//<![[CDATA[
$.fn.bgsGR_JQmenuFloater = function(options) {var opts = $.extend({ startFrom: 0, offsetY: 0, attach: '', duration: 50 }, options);var $obj = this;$obj.css({ position: 'absolute' });var parentBottomPoint = $obj.parent().offset().top + $obj.parent().height();$(window).scroll(function () { $obj.stop();var isAnimated = true;var objTop= $obj.offset().top;var objBottomPoint = objTop + $obj.outerHeight();if ( ( $(document).scrollTop() > opts.startFrom || (objTop - $(document).scrollTop()) > opts.startFrom ) && ( $obj.outerHeight() < $(window).height() ) ){var adjust;( $(document).scrollTop() < opts.startFrom ) ? adjust = opts.offsetY : adjust = -opts.startFrom + opts.offsetY;$obj.animate({ top: ($(document).scrollTop() + adjust ) }, opts.duration, function(){ isAnimated = false } );} else {$obj.stop();}});};$('#bgsGR_JQmenu').bgsGR_JQmenuFloater({duration: 700, opacity: 1, offsetY: 10, startFrom:0});
//]]>
</script>


Sampai disini Simpan Template sobat dulu.

Langkah Terakhir
1. Klik Tab Elemen Laman
2. Klik "Add a Gadget" (yang mana aja oke), kemudian pilih "HTML/JavaScript",
3. Lalu Copy-paste kode di bawah ini:

<div id="bgsGR_JQmenu"><h3>bgsGR_JQmenu</h3>
<ul>
<li><a href="Link_Kang_JQmenu-1">JQmenu-1</a></li>
<li><a href="Link_Kang_JQmenu-2">JQmenu-2</a></li>
<li><a href="Link_Kang_JQmenu-3">JQmenu-3</a></li>
<li><a href="Link_Kang_JQmenu-4">JQmenu-4</a></li>
<li><a href="Link_Kang_JQmenu-5">JQmenu-5</a></li>
<li><a href="Link_Kang_JQmenu-6">JQmenu-6</a></li>
<li><a href="Link_Kang_JQmenu-7">JQmenu-7</a></li>
<li><a href="Link_Kang_JQmenu-8">JQmenu-8</a></li>
</ul>
</div>
4. Lalu klik Save (Simpan) selesai, sekarang tinggal lihat hasilnya

KETERANGAN
Ganti kode yang berwarna merah dengan alamat link sobat, misalnya http://ade-tea.blogspot.com dan untuk kode yang berwarna kuning ganti dengan nama Link yang dituju sobat, misalnua Blog Kang Fatur.


Selamat mencoba semoga bermanfaat

KOMENTAR ANDA SANGAT BERMANFAAT BAGI PERKEMBANGAN BLOG INI

18 comments:

  1. nice post sobat.....
    salam knl ya......
    jika berkenan silahkan mampir balik...

    ReplyDelete
  2. sob , demo nya ada gak ? soalnya saya masih belum ngerti maksud tutorialnya ini , hehehe

    ReplyDelete
  3. baru mahu diedit semula templatenya...lg error di IE gambar b/ground ngak muncul blank aja yg keluar.

    ReplyDelete
  4. bagus gan, kunjungi dheaarokhman.blogspot.com, komen ya gan

    ReplyDelete
  5. keren lah oom . . . maju terus dan terus update yaa :)

    kunjung ke sini kalo sempet .

    ReplyDelete
  6. mantab sob tips n blognya, sdh 2 x mampir, thx sdh mau berbagi

    ReplyDelete
  7. Kenapa ya kalau Simpan Template mesti ada tulisan "Template Anda tidak dapat diparse karena tidak well-formed. Harap pastikan bahwa semua elemen XML ditutup dengan benar.
    Pesan error XML: The content of elements must consist of well-formed character data or markup."
    tolong bantuannya dunkzz Kang...

    ReplyDelete
  8. @Rechker Biasanya itu ada kesalahan peletakkan kode Gan!.

    ReplyDelete
  9. bisa ga Kang..cara buat blog jadi bercahaya,, jadi kaya sedang party (banyak lampu yg berkedip-kedip kesana-kemari)..
    tolong dunkzz kalau bs..

    ReplyDelete
  10. Thx Kang..bagus bgd artikelnya,... :D
    Kang Blog saya berat niie,, bs ga solusinya spy tdk berat?(tanpa mengurangi apapun)

    bs coba liat disini:
    www.rechkercommunity.co.cc

    kalau ada yg kurang silahkan komentar di Shoutbox milik saya...
    Thx..

    ReplyDelete
  11. wuih,,banyak amat script kodenya sob,,,,apa nggak bikin blog tambah berat sob..?

    ReplyDelete
  12. makasih banyak buat infonya gan,,nice post..

    http://goo.gl/4lKCNU

    ReplyDelete

Subscribe Our Newsletter

Notifications

Disqus Logo