Cara mudah membuat sticky widget di blog - Bagi Anda pemilik Blog atau Web, tahukah Anda yang dimaksud dengan sticky widget? Sticky widget yakni Widget blog yang dimodifikasi dengan aksesori script yang membuat widget tersebut melayang walaupun discroll ke bawah. Biasanya widget sticky letknya di sidebar blog, dan bila halaman di scroll ke bawah widget tersebut masih melayang.
Baca: Cara Membuat Menu Navigasi Tetap Walaupun di Scroll
Manfaat dari widget yang dibuat sticky yakni supaya pengunjung dapat dengan terperinci melihat apa yang ditaruh di widget tersebut, alasannya yakni biasanya pengunjung cenderung lebih fokus ke artikel dan tidak memerhatikan widget di sedebar. Makara apa yang kita taruh di widget sidebar menyerupai artikel terbaru, popular post ataupun banner iklan kurang diperhatikan oleh pengunjung. Tapi bila kita membuatnya menjadi sticky mampu dipastikan akan menarik perhatian penjung alasannya yakni selalu terlihat walaupun discroll.
Untuk membuat widget di sedebar menjadi sticky gotong royong tidak terlalu sulit, alasannya yakni kita hanya sedikit menambah instruksi script dan CSS lalu memasukkan instruksi HTML widget yang bersangkutan dan widgetpun akan menjadi sticky. Nah, buat Anda yang ingin mengakibatkan salah satu widget menjadi sticky mampu diikuti tutorial yang akan aku berikan kali ini. Namun, perlu diperhatikan bahwa tutorial ini hanya mampu untuk satu widget saja, berikut tutorialnya.
2. Kemudian masuk ke menu Tema - Edit HTML.
3. Selanjutnya cari kode ]]></b:skin> lalu copy instruksi CSS dibawah ini dan paste sempurna diatas instruksi tersebut.
4. Selanjutnya copy lagi instruksi script dibawah ini lalu paste sempurna diatas instruksi </body> (Letaknya dibawah sendiri)
Note: Silahkan ganti instruksi widget (HTML11) bewarna merah dengan instruksi widget blog Anda yang ingin di buat sticky.
5. Untuk cara melihat instruksi HTML widget mampu masuk ke menu Tata Letak lalu "Edit" pada widget yang ingin dibuat sticky. Lalu lihat instruksi widget yang letaknya dibagian tamat URL.
Nah bila sudah simpan tema dan lihat hasilnya, cara tersebut sudah terbukti berhasil alasannya yakni aku juga menggunakan instruksi tersebut untuk membuat sticky widget. Demikian artikel mengenai tutorial blog yang dapat aku begikan dan semoga bermanfaat.
Baca: Cara Membuat Menu Navigasi Tetap Walaupun di Scroll
Manfaat dari widget yang dibuat sticky yakni supaya pengunjung dapat dengan terperinci melihat apa yang ditaruh di widget tersebut, alasannya yakni biasanya pengunjung cenderung lebih fokus ke artikel dan tidak memerhatikan widget di sedebar. Makara apa yang kita taruh di widget sidebar menyerupai artikel terbaru, popular post ataupun banner iklan kurang diperhatikan oleh pengunjung. Tapi bila kita membuatnya menjadi sticky mampu dipastikan akan menarik perhatian penjung alasannya yakni selalu terlihat walaupun discroll.
Untuk membuat widget di sedebar menjadi sticky gotong royong tidak terlalu sulit, alasannya yakni kita hanya sedikit menambah instruksi script dan CSS lalu memasukkan instruksi HTML widget yang bersangkutan dan widgetpun akan menjadi sticky. Nah, buat Anda yang ingin mengakibatkan salah satu widget menjadi sticky mampu diikuti tutorial yang akan aku berikan kali ini. Namun, perlu diperhatikan bahwa tutorial ini hanya mampu 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 instruksi CSS dibawah ini dan paste sempurna diatas instruksi tersebut.
.sticky {
position:fixed;
top:10px;
z-index: 100;
}
4. Selanjutnya copy lagi instruksi script dibawah ini lalu paste sempurna diatas instruksi </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 instruksi widget (HTML11) bewarna merah dengan instruksi widget blog Anda yang ingin di buat sticky.
5. Untuk cara melihat instruksi HTML widget mampu masuk ke menu Tata Letak lalu "Edit" pada widget yang ingin dibuat sticky. Lalu lihat instruksi widget yang letaknya dibagian tamat URL.
Nah bila sudah simpan tema dan lihat hasilnya, cara tersebut sudah terbukti berhasil alasannya yakni aku juga menggunakan instruksi tersebut untuk membuat sticky widget. Demikian artikel mengenai tutorial blog yang dapat aku begikan dan semoga bermanfaat.
Cara Membuat Sticky WIdget (Melayang) di Sidebar Blog
4/
5
Oleh
IT Bisnis Papua
