Baca: Cara Membuat Menu Navigasi Tetap Walaupun di Scroll
Khasiat dari widget yang dibuat sticky merupakan agar pengunjung dapat dengan terang melihat apa yang ditaruh di widget tersebut, sebab biasanya pengunjung cenderung lebih fokus ke artikel dan tak memerhatikan widget di sedebar. Jadi apa yang kita taruh di widget sidebar seperti artikel terbaru, popular post ataupun banner iklan kurang diperhatikan oleh pengunjung. Tapi apabila kita menciptakannya menjadi sticky dapat dipastikan akan menarik perhatian penjung sebab selalu terlihat walaupun discroll.
Untuk menciptakan widget di sedebar menjadi sticky sebenarnya tak terlalu sulit, sebab kita hanya sedikit menambah kode script dan CSS lalu memasukkan kode HTML widget yang bersangkutan dan widgetpun akan menjadi sticky. Nah, buat Anda yang ingin menjadikan salah satu widget menjadi sticky dapat diikuti tutorial yang akan admin berikan kali ini. Namun, perlu diperhatikan bahwa tutorial ini hanya dapat untuk satu widget saja, berikut tutorialnya.
Cara Membuat Sticky Widget di Blog
1. Pertama silahkan masuk ke Blogger.2. Kemudian masuk ke menu Tema - Edit HTML.
3. Selanjutnya cari kode ]]></b:skin> lalu copy kode CSS dibawah ini dan paste tepat diatas kode tersebut.
.sticky {
position:fixed;
top:10px;
z-index: 100;
}
4. Selanjutnya copy lagi kode script dibawah ini lalu paste tepat diatas kode </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 kode widget (HTML11) bewarna merah dengan kode widget blog Anda yang ingin di buat sticky.
5. Untuk cara melihat kode HTML widget dapat masuk ke menu Tata Letak lalu "Edit" pada widget yang ingin dibuat sticky. Lalu lihat kode widget yang letaknya dibagian akhir URL.
Nah apabila sudah simpan tema dan lihat hasilnya, cara tersebut sudah terbukti berhasil sebab admin juga menggunakan kode tersebut untuk menciptakan sticky widget. Demikian artikel seputar tutorial blog yang dapat admin begikan dan semoga bermanfaat. Terus kunjungi blog hhandromax.com agar selalu update dengan info menarik seputar android, dan gadget lainnya..
