Bagi kita para pelik Blog atau Web, tahukah apa yang dimaksud dengan sticky widget? Sticky widget ialah Widget blog yang dimodifikasi dengan script atau yang menciptakan widget itu melayang pada saat discroll ke bawah.
Biasanya widget sticky letaknya di sidebar blog, dan bila halaman di scroll ke bawah widget itu masih melayang atau mengikuti.
Manfaat dari widget yang melayang atau sticky ialah agar pengunjung bisa dengan jelas menyaksikan apa yang diletakkan di widget tersebut, karena seringkali pengunjung ingin lebih konsentrasi ke tulisan dan tidak memerhatikan widget di sedebar.
Jadi, apa yang anda taruh di widget sidebar seperti Recent Post, Popular Post, ataupun banner iklan kurang diacuhkan oleh pengunjung. Tapi andai kita membuatnya menjadi sticky dapat dipastikan akan unik perhatian penjung sebab selalu tampak walaupun discroll.
Untuk membuat widget di sedebar menjadi sticky sebenarnya tidak terlalu sulit, karena kita hanya sedikit menambah kode.(akan di jelaskan di bawah)
Nah, buat Anda yang ingin menjadikan salah satu widget menjadi sticky bisa diikuti tutorial yang akan saya berikan kali ini. Namun, perlu diperhatikan bahwa anda harus mengetahui id widget yang akan kita buat sticky, berikut tutorialnya.
1. Login ke Blogger
2. Buka Menu Tema Lalu Edit HTML
3. Tambahkan kode di bawah ini sebelum </body>
4. Tambahkan lebar pada konten atau widget yang dibuat sticky dengan CSS. Misalkan di sini saya memberikan 300px untuk lebar sticky, contoh :
Untuk demo tampilan Sticky Widget, silakan lihat widget Recent Post atau Artikel Terbaru Blog ini.
Cukup mudah Bukan? Selamat mencoba dan salam Blogger.
Biasanya widget sticky letaknya di sidebar blog, dan bila halaman di scroll ke bawah widget itu masih melayang atau mengikuti.
Manfaat dari widget yang melayang atau sticky ialah agar pengunjung bisa dengan jelas menyaksikan apa yang diletakkan di widget tersebut, karena seringkali pengunjung ingin lebih konsentrasi ke tulisan dan tidak memerhatikan widget di sedebar.
Jadi, apa yang anda taruh di widget sidebar seperti Recent Post, Popular Post, ataupun banner iklan kurang diacuhkan oleh pengunjung. Tapi andai kita membuatnya menjadi sticky dapat dipastikan akan unik perhatian penjung sebab selalu tampak walaupun discroll.
Untuk membuat widget di sedebar menjadi sticky sebenarnya tidak terlalu sulit, karena kita hanya sedikit menambah kode.(akan di jelaskan di bawah)
Nah, buat Anda yang ingin menjadikan salah satu widget menjadi sticky bisa diikuti tutorial yang akan saya berikan kali ini. Namun, perlu diperhatikan bahwa anda harus mengetahui id widget yang akan kita buat sticky, berikut tutorialnya.
Cara Membuat Sticky Widget (Melayang) di Sidebar Blog
1. Login ke Blogger
2. Buka Menu Tema Lalu Edit HTML
3. Tambahkan kode di bawah ini sebelum </body>
<script type='text/javascript'>
//<![CDATA[
$(function() {
if ($('#sticky').length) { // Ganti "#sticky" dengan ID tertentu
var el = $('#sticky');
var stickyTop = $('#sticky').offset().top;
var stickyHeight = $('#sticky').height();
$(window).scroll(function() {
var limit = $('#footer-wrapper').offset().top - stickyHeight - 20; // Jarak berhenti dari "Footer"
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>Perhatikan kode yang ditandai, ganti kode tersebut dengan ID yang akan dibuat sticky sesuai template yang digunakan
#sticky : ID dari konten atau widget yang akan dibuat sticky
#footer-wrapper : Tentukan ID untuk membatasi fungsi sticky
4. Tambahkan lebar pada konten atau widget yang dibuat sticky dengan CSS. Misalkan di sini saya memberikan 300px untuk lebar sticky, contoh :
#sticky{width:100%;max-width:300px}#HTML1{width:100%;max-width:300px}Tentukan lebar sesuai dengan lebar sidebar dari template yang sobat gunakan
Untuk demo tampilan Sticky Widget, silakan lihat widget Recent Post atau Artikel Terbaru Blog ini.
Cukup mudah Bukan? Selamat mencoba dan salam Blogger.
