Cara Membuat JQuery Floating Menu

11/16/2010 Blogger JQuery Tips Trik Blog Tutorial Blogger Widget
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

Artikel Terkait

Previous
Next Post »
Penulisan markup di komentar
  • Untuk menulis huruf bold silahkan gunakan <strong></strong> atau <b></b>.
  • Untuk menulis huruf italic silahkan gunakan <em></em> atau <i></i>.
  • Untuk menulis huruf underline silahkan gunakan <u></u>.
  • Untuk menulis huruf strikethrought silahkan gunakan <strike></strike>.
  • Untuk menulis kode HTML silahkan gunakan <code></code> atau <pre></pre> atau <pre><code></code></pre>, dan silahkan parse dulu kodenya pada kotak parser di bawah ini.

Blogger
Disqus
Pilih Sistem Komentar Yang Anda Sukai

19 comments

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

Balas

Nice info.... visit me back please, http://balindotours.com

Balas

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

Balas

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

Balas

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

Balas

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

kunjung ke sini kalo sempet .

Balas

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

Balas

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...

Balas

@Rechker Biasanya itu ada kesalahan peletakkan kode Gan!.

Balas

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

Balas

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..

Balas

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

Balas

makasih banyak buat infonya gan,,nice post..

http://goo.gl/4lKCNU

Balas