Membuat sticky versi Net Mmc
Sebagian besar Blogger yang sudah senior tidak asing lagi cara membuat sticky pada blog, namun tidak jarang untuk pendatang Blogger baru yang masih kesulitan untuk membuatnya, cara ini sangat mudah, pastinya cocok untuk pemula Blogger yang masih belum banyak memahami coding html.
Sebelum kepembahasan utama, Saya akan sedikit memberi penjelasan apa itu sticky?. Sticky adalah berfungsi untuk mempercantik tampilan halaman web atau blog, yang mana ketika halaman digulir kebawah, maka sidebar yang dibuat sticky akan mengikuti guliran pada konten dan akan berhenti sesuai akhir dari pada konten tersebut dan pastinya akan membuat halaman blog akan terlihat lebih rapih. Kode sticky ini juga saya terapkan pada blog Saya ini.
Setelah tadi sedikit penjelasan apa itu sticky, sekarang lanjut ke bagaimana cara membuatnya?.
Pertama seperti biasa:
1. Buka dasbor blog Anda
2. Pilih tata letak (bila menggunakan bahasa Indonesia)
3. Edit HTML
4. Cari kode penutup </body> biasanya ada dibagian paling bawah
5. Copy dan paste kode dibawah ini tepat diatas kode </body>
<script type='text/javascript'>//<![CDATA[$(function() { if ($('#sticky-sidebar').length) { // Ganti "#sticky-sidebar" dengan ID tertentu var el = $('#sticky-sidebar'); var stickyTop = $('#sticky-sidebar').offset().top; var stickyHeight = $('#sticky-sidebar').height(); $(window).scroll(function() { var limit = $('#footer-wrapper').offset().top - stickyHeight - 20; // Jarak berhenti di "#footer-wrapper" var windowTop = $(window).scrollTop(); if (stickyTop < windowTop) { el.css({ position: 'fixed', top: 20 // Jarak atau margin sticky dari atas }); } else { el.css('position', 'static'); } if (limit < windowTop) { var diff = limit - windowTop; el.css({ top: diff }); } }); }});//]]></script>
Catatan:
Ganti kode #sticky-sidebar dengan ID widget Anda yang akan dibuat sticky
Ganti kode #footer-wrapper dengan ID widget untuk membatasi sticky
6. Cari kode ]]></b:skin> lalu copy kode dibawah ini dan paste diatas kode ]]></b:skin>
#sticky-sidebar{width:100%;max-width:300px}
Jangan lupa ganti kode yang ditandai dengan warna dengan ID widget Anda yang akan dibuat sticky sama dengan ID diatas tadi.
Terakhir simpan dan coba lihat hasilnya, jika ukuran lebar tidak sama dengan lebar sidebar Anda, Anda bisa ganti sesuai ukuran pada sidebar Anda.
Jika ada yang masih kesulitan bisa ajukan permintaan bantuan lewat komentar dibawah.
EmoticonEmoticon