Cara gampang menciptakan sticky widget di blog - Bagi Anda pemilik Blog atau Web, tahukah Anda yg dimaksud dengan sticky widget? Sticky widget yaitu Widget blog yg dimodifikasi dengan pelengkap script yg menciptakan widget tersebut melayg walaupun discroll ke bawah. Biasanya widget sticky letknya di sidebar blog, serta bila halaman di scroll ke bawah widget tersebut masih melayg.
Baca: Cara Membuat Menu Navigasi Tetap Walaupun di Scroll
Manfaat dari widget yg dibentuk sticky yaitu biar pengunjung sanggup dengan terperinci melihat apa yg ditaruh di widget tersebut, sebab biasanya pengunjung cenderung lebih fokus ke artikel serta tidak memerhatikan widget di sedebar. Makara apa yg kita taruh di widget sidebar ibarat artikel terbaru, popular post ataupun banner iklan kurang diperhatikan oleh pengunjung. Tapi bila kita membuatnya menso sticky sanggup dipastikan akan menarik perhatian penjung sebab selalu terlihat walaupun discroll.
Untuk menciptakan widget di sedebar menso sticky sesungguhnya tidak terlalu sulit, sebab kita hanya sedikit menambah aba-aba script serta CSS kemudian memasukkan aba-aba HTML widget yg bersangkutan serta widgetpun akan menso sticky. Nah, buat Anda yg ingin mensokan salah satu widget menso sticky sanggup diikuti tutorial yg akan aku berikan kali ini. Namun, perlu diperhatikan bahwa tutorial ini hanya sanggup untuk satu widget saja, berikut tutorialnya.
Cara Membuat Sticky Widget di Blog
1. Pertama silahkan masuk ke Blogger.2. Kemudian masuk ke hidangan Tema - Edit HTML.
3. Selanjutnya cari kode ]]></b:skin> kemudian copy aba-aba CSS dibawah ini serta paste sempurna diatas aba-aba tersebut.
.sticky {
position:fixed;
top:10px;
z-index: 100;
}
4. Selanjutnya copy lagi aba-aba script dibawah ini kemudian paste sempurna diatas aba-aba </body> (Letaknya dibawah sendiri)
<script type='text/javascript'>
$(document).ready(function() {
var stickyWidgetTop = $('#HTML11').offset().top;
var stickyWidget = function(){
var scrollTop = $(window).scrollTop();
if (scrollTop > stickyWidgetTop) {
$('#HTML11').addClass('sticky');
} else {
$('#HTML11').removeClass('sticky');
}
};
stickyWidget();
$(window).scroll(function() {
stickyWidget();
});
});
</script>
Note: Silahkan ganti aba-aba widget (HTML11) bewarna merah dengan aba-aba widget blog Anda yg ingin di buat sticky.
5. Untuk cara melihat aba-aba HTML widget sanggup masuk ke hidangan Tata Letak kemudian "Edit" pada widget yg ingin dibentuk sticky. Lalu lihat aba-aba widget yg letaknya disektor simpulan URL.
Nah bila sudah simpan tema serta lihat hasilnya, cara tersebut sudah terbukti berhasil sebab aku pun memakai aba-aba tersebut untuk menciptakan sticky widget. Demikian artikel mengenai tutorial blog yg sanggup aku begikan serta semoga bermanfaat.