Cara Membuat Sticky WIdget (Melayang) di Sidebar Blog

Cara mudah menciptakan sticky widget di blog - Bagi Anda pemilik Blog atau Web, tahukah Anda yang dimaksud dengan sticky widget? Sticky widget merupakan Widget blog yang dimodifikasi dengan tambahan script yang menciptakan 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

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..

0 Response to "Cara Membuat Sticky WIdget (Melayang) di Sidebar Blog"

Post a Comment

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel