Tutorial Mudah Membuat Widget Melayang atau Widget Sticky






Halo sobat Gilailmu, apa kabar? Semoga semua kita tetap sehat-sehat saja dan banyak rezeki ya. Jadi kali ini, saya akan membahas tentang, Bagaimana sih caranya memb aut Widget Sticky atau yang biasa banyak orang sebut widget melayang pada sidebar atau tempat lainnya pada blog . Seperti yang kita tahu, Tampilan widget melayang pada sidebar ini, akan terus mengikuti tampilan laman, walaupun alaman di scroll akan selalu melayang. Pada dasarnya, hal ini bertujuan agar dapat mengisi kekosongan saat seseorang mengunjungi halaman blog atau melakukan scroll.
Selain untuk mengisi kekosongan pada halaman saat di scroll, widget sticky atau widget melayang ini juga sangat bermanfaat dalam hal memodifikasi atau memasimalkan tampilan blog anda. Pengunjung blog akan diberikan tampilan menarik pada sidebar blog ketika membaca artikel sampai dengan selesai, sehingga pengunjung pun akan merasa lebih nyaman.

Sticky sidebar atau Widget Sidebar Melayang pada dasarnya bisa anda gunakan pada semua widget yang ada di sidebar, misalnya widget popular post, recent post, label, iklan blog dll. Jadi anda bisa sesuaikan dengan kebutuhan.

Baiklah, langsung saja kita ke topik utamanya . Dalam hal ini, caranya sangatlah mudah. Yang pertama, Untuk dapat membuat Widget yang melayang, element yang dibutuhkan adalah ID Widget. Jadi yang perlu kamu lakukan adalah, silahkan tentukan ID tersebut terlebih dahulu sebelum memasangnya diblog. caranya sebagai berikut:

Tentukan widget yang ingin dibuat Sticky (melayang), kemudian ambil ID widget tersebut. misalkan saya ingin membuat sticky pada widget Artikel Terbaru pada blog saya kemudian klik kanan pada title widget dan pilih “Inspect Element“, maka cara mengambil ID widget sebagai berikut:



  

Cara Mudah Memasang Kode Sticky di blog

1. Yang pertama adalah login akun blogger anda.
2. Pilih tab Template kemudian dilanjutkan dengan Edit HTML, kemudian pasang kode berikut ini tepat diatas kode ]]></b:skin>

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


3. Kemudian dilanjutkan dengan menambahkan kode CSS berikut tepat diatas kode </body>


<script type='text/javascript'>
$(document).ready(function() {
var stickyWidgetTop = $('#HTML4').offset().top;
var stickyWidget = function(){
var scrollTop = $(window).scrollTop();
if (scrollTop > stickyWidgetTop) {
$('#HTML4').addClass('sticky');
} else {
$('#HTML4').removeClass('sticky');
}
};
stickyWidget();
$(window).scroll(function() {
stickyWidget();
});
});
</script>
 
Mulailah dengan ganti semua kode #HTML4 dengan ID widget yang akan dibuat sticky.
 


Dan semuanya  telah selesai, bagaimana teman? semoga cara diatas bisa membantu buat kamu yang masih bingung untuk membuat Widget melayang ya. Dan jangan lupa untuk meninggalkan komentar jika informasi diatas berguna untuk kamu. Salam !

 
 

Subscribe to receive free email updates: