Cara Membuat JQuery Floating Menu

Assalamu'alaikum semuanya, gimana kabar para sahabat blogger Sore ini saya 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://ucu-syarief.blogspot.com dan untuk kode yang berwarna kuning ganti dengan nama Link yang dituju sobat, misalnua Blog Karya Anak Kidoel.




Selamat mencoba semoga bermanfaat





Terima Kasih
Created By Syarief Hidayat



------------------------------------------------------------------------------------------
Label:

Blog Archive