.jpg)
Kalau diposting sebelumya sudah kita sajikan floating menu berbeban entheng, untuk posting kali ini kita akan coba buat yang sedikit lebih kompleks. JQuery Floating Menu masih memanfaatkan jQuery.1.3.2.js dengan pertimbangan supaya tidak terlalu banyak jenis javascript harus kita tempatkan di blog karena tentu saja akan membuat blog semakin bertambah berat. Untuk membangun menu ini selain jQuery kita masih menambahkan sedikit CSS dan javascript pendukung. Seperti biasanya, KODE CSS diletakkan di atas KODE ]]><b/:skin> sedang jQuery.1.3.2.js diletakkan di bawah KODE </head>.
Cari juga KODE </body>, kemudian letakkan javascript pendukung tepat di atasnya.
Oke..., sebelum mencobanya kamu boleh melihat hasil yang telah jadi dengan membuka di DEMO. Jangan lupa setelah semua KODE CSS, jQuery dan javascript ditempatkan dengan teliti di template, silahkan simpan kode dan script tersebut dengan KLIK Simpan Template. Sekali lagi sebelum semua dimulai jangan lupa untuk mengamankan template terlebih dahulu (backup template) dengan cara
D E M O
Cari juga KODE </body>, kemudian letakkan javascript pendukung tepat di atasnya.
Oke..., sebelum mencobanya kamu boleh melihat hasil yang telah jadi dengan membuka di DEMO. Jangan lupa setelah semua KODE CSS, jQuery dan javascript ditempatkan dengan teliti di template, silahkan simpan kode dan script tersebut dengan KLIK Simpan Template. Sekali lagi sebelum semua dimulai jangan lupa untuk mengamankan template terlebih dahulu (backup template) dengan cara
Login di Blogger --> Tata Letak --> Edit HTML
--> KLIK Download Template Lengkap --> Simpan File di Folder PC
D E M O
KODE CSS JQuery Floating Menu
<style type="text/css">Copy paste link jQuery.1.3.2.js di bawah ini dan letakkan di bawah KODE <head>
#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;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
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>
Gunakan xHTML berikut sebagai dasar penyusunan menu di bagian body.
Simpan melalui widget atau Tambah Gadget di Elemen Laman.<div id="bgsGR_JQmenu"><h3>bgsGR_JQmenu</h3>
<ul>
<li><a href="Link_bgsGR_JQmenu-1">JQmenu-1</a></li>
<li><a href="Link_bgsGR_JQmenu-2">JQmenu-2</a></li>
<li><a href="Link_bgsGR_JQmenu-3">JQmenu-3</a></li>
<li><a href="Link_bgsGR_JQmenu-4">JQmenu-4</a></li>
<li><a href="Link_bgsGR_JQmenu-5">JQmenu-5</a></li>
<li><a href="Link_bgsGR_JQmenu-6">JQmenu-6</a></li>
<li><a href="Link_bgsGR_JQmenu-7">JQmenu-7</a></li>
<li><a href="Link_bgsGR_JQmenu-8">JQmenu-8</a></li>
</ul>
</div>
Keterangan/Catatan :
- Apabila kode CSS disimpan di atas kode ]]></b:skin> , hilangkan kode (tag)
<style type="text/css"> dan tag penutupnya :
</style> - Apabila mengalami kesulitan dalam pemasangan dan penyimpanan kode dengan cara di atas, gunakan cara seperti ini :
- Login ke blogger
- Dasbor : KLIK Layout/Tata Letak atau Design/Rancangan.
- KLIK Add Gadget (Tambah Gadget).
- KLIK HTML/Javascript.
- Copy-Paste Semua Kode Secara berurutan dan pastekan di box widget yang tersedia : JQuery, Javascript Pendukung, Kode CSS dan xHTML.
- KLIK SAVE Settings/Simpan.
- Setelah berhasil, silahkan jQuery bisa di pindah di bawah kode <head>
- Bila sampeyan sudah menggunakan JQuery-1.3.2.js atau JQuery-1.3.2.min.js, hapus saja JQuery yang aku sertakan di sini.
- Sampeyan juga bisa pindahkan kode CSS di atas kode ]]></b:skin> (hilangkan tag pembuka dan penutup style). - Untuk menyesuaikan dengan kolom yang tersedia di halaman blog, lebar (width) dan tinggi (height) pada KODE CSS bisa di rubah.
- Link_Menu-1 s/d Link_Menu-8 merupakan URL dari menu yang ditampilkan. Ganti link-nya dan nama menunya untuk disesuaikan dengan link dan nama menu milik sampeyan.
Silahkan juga buka Tutorial lain yang sangat menarik dan patut di ikuti sampeyan semua. Akses melalui link di bawah ini :
» Happy Blogging - gubhugreyot «
Kok ga bisa disimpan ya pak ya??? masih terdeteksi ada kesalahan skripnya... mohon pencerahannya.nuwun
BalasHapusCoba saja lagi! Tutorial ini sudah saya coba dan hasilnya sempurna. Beberapa kode baru juga telah ditambahkan supaya terlihat semakin cantik. Aku sertakan juga cara pasang paling mudah dan cepat lewat widget. Oye?
BalasHapusSalam ...
gubhug reyot
mantap2 tipsnya trima kasih jangan lupa kunjungi juga blog aq sin1aja.blogspot.com aku tunggu
BalasHapusada demo nya gx
BalasHapusohh maaf udah ada demo nya to,gx nglihat,..hehe
BalasHapus