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.
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>4. Lalu klik Save (Simpan) selesai, sekarang tinggal lihat hasilnya
<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>
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
nice post sobat.....
ReplyDeletesalam knl ya......
jika berkenan silahkan mampir balik...
berkunjung ke sini
ReplyDeletesob , demo nya ada gak ? soalnya saya masih belum ngerti maksud tutorialnya ini , hehehe
ReplyDelete@Muhammad Chandra Demonya belum sempet saya bikin sob.
ReplyDeletekunjungansaob....nice info..
ReplyDeleteNice Info,ada contohnya?
ReplyDeletebaru mahu diedit semula templatenya...lg error di IE gambar b/ground ngak muncul blank aja yg keluar.
ReplyDeletebagus gan, kunjungi dheaarokhman.blogspot.com, komen ya gan
ReplyDeletekeren lah oom . . . maju terus dan terus update yaa :)
ReplyDeletekunjung ke sini kalo sempet .
mantab sob tips n blognya, sdh 2 x mampir, thx sdh mau berbagi
ReplyDelete:@
ReplyDeleteKenapa 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.
ReplyDeletePesan error XML: The content of elements must consist of well-formed character data or markup."
tolong bantuannya dunkzz Kang...
@Rechker Biasanya itu ada kesalahan peletakkan kode Gan!.
ReplyDeletebisa ga Kang..cara buat blog jadi bercahaya,, jadi kaya sedang party (banyak lampu yg berkedip-kedip kesana-kemari)..
ReplyDeletetolong dunkzz kalau bs..
@Rechker Bisa sob coba aja disini
ReplyDeleteThx Kang..bagus bgd artikelnya,... :D
ReplyDeleteKang 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..
wuih,,banyak amat script kodenya sob,,,,apa nggak bikin blog tambah berat sob..?
ReplyDeletemakasih banyak buat infonya gan,,nice post..
ReplyDeletehttp://goo.gl/4lKCNU