Loading...

Cara Menciptakan Sticky Widget (Melayang) Di Sidebar Blog

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

Manfaat dari widget yang dibentuk sticky ialah semoga pengunjung sanggup dengan terang melihat apa yang ditaruh di widget tersebut, alasannya ialah biasanya pengunjung cenderung lebih fokus ke artikel dan tidak memerhatikan widget di sedebar. Kaprikornus apa yang kita taruh di widget sidebar menyerupai artikel terbaru, popular post ataupun banner iklan kurang diperhatikan oleh pengunjung. Tapi kalau kita membuatnya menjadi sticky sanggup dipastikan akan menarik perhatian penjung alasannya ialah selalu terlihat walaupun discroll.


Untuk menciptakan widget di sedebar menjadi sticky bersama-sama tidak terlalu sulit, alasannya ialah kita hanya sedikit menambah instruksi script dan CSS kemudian memasukkan instruksi HTML widget yang bersangkutan dan widgetpun akan menjadi sticky. Nah, buat Anda yang ingin menyebabkan salah satu widget menjadi sticky sanggup diikuti tutorial yang 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 sajian Tema - Edit HTML.
3. Selanjutnya cari kode ]]></b:skin> kemudian 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 kemudian 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 sanggup masuk ke sajian Tata Letak kemudian "Edit" pada widget yang ingin dibentuk sticky. Lalu lihat instruksi widget yang letaknya dibagian final URL.



Nah kalau sudah simpan tema dan lihat hasilnya, cara tersebut sudah terbukti berhasil alasannya ialah aku juga memakai instruksi tersebut untuk menciptakan sticky widget. Demikian artikel mengenai tutorial blog yang sanggup aku begikan dan semoga bermanfaat.


Sumber http://www.blogespada.net/

Disclaimer: Beberapa artikel di blog ini terkadang berisi informasi dari berbagai macam sumber. Hak cipta berupa gambar, teks, dan link sepenuhnya dimiliki oleh web tersebut. Jika ada masalah terkait hal ini, Anda dapat menghubungi kami melalui contact menu.

Previous
Next Post »