Membuat menu atau widget melayang “fixed” di halaman web, ini memiliki fungsi yang bermacam-macam selain berguna untuk mempercantik tampilan blog bisa juga digunakan untuk mempermudah pengunjung dalam mencari informasi,
Sebagai contoh kita ingin mencari artikel tetapi kolom pencariannya tidak “fixed” jadi pengunjung akan men scroll halaman dimana kolom pencarian tersebut tampil.
Disini akan kami bagikan secipt nya yaitu sebagai berikut :
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function() {
// Menentukan elemen yang dijadikan sticky yaitu #NavbarMenuAtas
var stickyNavTop = $('#menuyangmaudifixed ').offset().top;
var stickyNav = function(){
var scrollTop = $(window).scrollTop();
// Kondisi jika discroll maka menu akan selalu diatas, dan sebaliknya
if (scrollTop > stickyNavTop) {
$('#menuyangmaudifixed ').css({ 'position': 'fixed', 'top':0, 'z-index':9999});
} else {
$('#menuyangmaudifixed ').css({ 'position': 'relative' });
}
};
// Jalankan fungsi
stickyNav();
$(window).scroll(function() {
stickyNav();
});
});
//]]>
</script>
|
Caranya :
- Kita menentukan witget/menu/bagian yang lain dari blog
Contoh:
Jika kita ingin header menjadi fixed
Carilah kode CSS biasanya #header atau .header
Maka apapun yang ada di header akan menjadi fixed
- Copy Script di atas dan letakan diatas kode </body>
Masuk blogger – Template - Edit Template – Ctrl+F (untuk membuka kolom pencarian )
- Terus ubah #menuyangmaudifixed yang terdapat di script dengan kode witget yang kalian inginkan.
- Simpan.
Belum ada tanggapan untuk "MEMBUAT WIDGET ATAU MENU "FIXED" DI BLOGGER"
Posting Komentar