Membuat Widget Blog Melayang Dengan 2 Cara

Membuat Widget Blog Melayang Ketika di Scroll - Materi ini sebetulnya sudah banyak sekali tersebar dan mungkin saya termasuk terlambat dalam menulis artikel ini, tetapi untuk melengkapi konten blog yang belum dilengkapi materi ini dan juga saya menawarkan dua alternatif atau dua cara untuk membuat widget blog melayang ketika di scroll, jadi siapa tau menjadi solusi buat Agan yang sudah muter muter keliling blog mencari cara membuat widget melayang tapi belum berhasil mudah mudahan di sini akan berhasil. Nah langsung aja ke pokok pembahasannya ya..

Manfaat Widget Melayang (Sticky) Di Sidebar Blog

Sebuah widget yang dimodifikasi sehingga melayang (sticky) saat di scroll dalam sebuah blog memang bermanfaat untuk mengisi ruang kosong dalam blog tersebut sehingga blog terlihat berisi, apalagi jika kebetulan blog tersebut memiliki postingan yang cukup panjang. Selain itu Sticky widget atau widget melayang akan memudahakan pengunjung dalam menelusuri konten didalam blog tanpa harus scroll balik ke bagian atas.

Mengetahui Identitas (ID) HTML Widget

Penting untuk diketahui sebelum membuat widget nya menjadi melayang adalah kita harus tau bahwa setiap widget HTML/Javascript yang kita buat, masing masing memiliki ID HTML. Nah ID HTML ini lah yang akan kita gunakan dalam script sehingga membuat widgetnya menjadi melayang. Lalu bagaimana cara mengetahui ID HTML Widget? Simak langkah-langkahnya dibawah ini:

Silahkan masuk ke Blogger >> Tatal letak (layout)
Cobalah membuka widget HTML/Javascript yang sudah ada dengan cara klik edit
Dalam contoh kasus ini saya akan membuka widget Recent post yang sudah ada
Buatlah tampilan layarnya menjadi full
Di Address bar paling ujung sebelah kanan kita akan melihat tulisan Widget ID seperti contoh gambar dibawah ini

Widget id Recent post saya adalah HTML96, itulah caranya mengetahui widget ID HTML/Javascript. Silahkan ingat widget ID HTML milik agan yang akan dibuat sticky atau melayang.

Membuat Widget Melayang (Sticky) Dengan 2 Cara

Setelah kita tentukan widget mana yang akan dibuat melayang dan kita ketahui ID nya, selanjutnya adalah membuat tampilan widgetnya melayang saat halaman di scroll kebawah sehingga ruang kosong didalam blog menjadi terisi dan blog terlihat padat.

Yang dimaksud dengan 2 cara disini adalah kita akan menggunakan 2 script yang berbeda, silahkan pilih mana yang menurut Agan berhasil

Cara 1

1. Buka dashboard blogger kemudian pilih Tema (Theme) >> Edit HTML
2. Dengan menggunakan Ctrl+F cari kode ]]></b:skin>
3. Simpan kode dibawah ini tepat diatas kode]]></b:skin>


.makesticking{background:none!important;position:fixed!important;top:25px;z-index:99;-webkit-transform:translateZ(0);}
#HTML96 .widget-content {padding:1;margin:auto;}

4. Kemudian tambahkan script dibawah ini tepat diatas kode </body>


<script type='text/javascript'>
//<![CDATA[
// Sticky Widget
function makemeSticky(e){function t(){var e=s.getBoundingClientRect();e.top<0?(n.className=a+" makesticking",n.style.width=i+"px"):n.className=a}var n=document.getElementById(e),s=document.createElement("div");n.parentNode.insertBefore(s,n);var i=n.offsetWidth,a=n.className+" makesticky";window.addEventListener("scroll",t,!1)}makemeSticky("HTML96");
//]]>
</script>

Cara 2

1. Lakukan langkah 1 s.d 3 di Cara 1
2. Copy kode dibawah ini 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>

Itulah dua cara untuk membuat widget di sidebar blog menjadi melayang (sticky), oh iya jangan lupa untuk mengganti widget id HTML96 diatas dengan widget id milik Agan masing-masing. Semoga berhasil dan terimakasih.

Viomagz