Cara Membuat Widget Melayang ( Sticky ) Pada Sidebar Blog Sobat

Cara Membuat Widget Melayang  ( Sticky ) Pada Sidebar Blog Sobat

Widget Melayang/Menempel atau yang dikenal dengan istilah Sticky, sering kita temui pada sebuah Situs atau Blog, sebenarnya apa sih keuntungan dari Widget Sticky yang terpasang pada Blog. Sticky dipasang pada Blog seseorang memiliki 2 Alasan utama yakni :

1. Untuk mengisi kekosongan sisi Sidebar pada saat pengunjung situs melakukan Scroll Halaman kebagian bawah, maka Sticky itu akan terus mengikuti atau menutupi kekosongan pada sisi Sidebar blog sobat.
2. Agar Blog seseorang terlihat lebih elegan dan Dinamis

Namun yang perlu diingat, walau Widget Sticky tersebut melayang, widget ini tidak bisa di Close yah, karena dia bukan sebuah iklan, berbeda dengan iklan yang terpasang pada Blog atau situs.

Saya menyarankan bagi para Sobat Inspiratif yang akan merubah Widget pada Blognya menjadi Widget Sticky ( Melayang/Menempel ), lebih baik Widget yang terletak pada bagian yang paling bawah pada sisi sidebar Blog Sobat Inspiratif semua, karena apa jika kita membuat Widget Sticky pada widget yang bukan terletak di bagian paling bawah, maka nantinya Widget tersebut akan menutupi Widget yang lainnya, sangat disayangkan jika Widget yang tertutupi oleh Widget Sticky tersebut merupakan Widget yang cukup penting seperti ( Recent Posts,Popular posts,Random Posts atau bahkan Label ), karena widget-widget itu mempunyai peran yang sangat penting bagi Traffik pengunjung Blog Sobat. jadi sekarang sudah pahamkan, mau dipasang dimana Widget Sticky tersebut. Itu sih hanya saran saya, kembali lagi pada tujuan Sobat Inspiratif memanfaatkan Widget Sticky tersebut.

Mari kita mulai saja Tutorial saya mengenai "Cara membuat Widget Melayang ( Sticky ) pada Sidebar Blog Sobat".

Langkah pertama  :  Silahkan buka  Blogger ==> pilih Template ==> Edit HTML ( seperti gambar dibawah ini )

Langkah Kedua  :  Salin kode berikut ini lalu pastekan diatas kode ]]</b:skin>

.sticky { position:fixed; top:10px;/* jarak dari atas*/ z-index: 100;}

Langkah Ketiga  :  Cari kode </body > kemudian salin kde dibawah ini, lalu letakkan diatas kode </body>

<script type="text/javascript">
$(document).ready(function() {
var stickyWidgetTop = $('#HTML6').offset().top;
var stickyWidget = function(){
var scrollTop = $(window).scrollTop();
if (scrollTop > stickyWidgetTop) {
$('#HTML6').addClass('sticky');
} else {
$('#HTML6').removeClass('sticky');
}
};
stickyWidget();
$(window).scroll(function() {
stickyWidget();
});
});
</script>

Important !!!

• Ganti Kode yang berwarna merah dengan Id Widget yang ingin dibuat Sticky, tanda # jangan   dihapus

Langkah keempat  :  Klik Simpan Template ( Perhatikan gambar hasil akhir dibawah ini ).

 

Mudah bukan...

Sekian Tutorial Saya pada kali ini, jika Sobat bingung atau memiliki Trouble pada saat mempraktekannya. Silahkan berkomentar pada kolom yang telah Saya sediakan di bawah postingan ini, atau Sobat bisa mengirim pesan langsung kepada saya melalui halaman Kontak Saya yang berada pada menu Navigasi kami.

Terima kasih telah Berkunjung

Salam

Blog Inspiratif