Memasang Sticky (Menu/Widget) di Blogger

SiKudet - Sticky menggunakan javascript dan css , sering di kita lihat pada suatu blog ada salah satu menu nya di sticky atau widget yang sticky. Fungsi sticky fungsi dari sticky pada widget ini berguna bagi sobat yang menginginkan sebuah widget pada blog agar bisa melayang mengikuti halaman saat digulirkan ke bawah dan akan kembali ke posisi semula saat halaman digulirkan ke atas.

Untuk membuat menu atau widget menjadi sticky seperti tersebut tidaklah terlalu sulit sobat bisa menambahkan beberapa kode yang sudah saya siapkan dibawah ini, yuk kita coba membuat sticky widget diblog.

1. Buka Blogger > Klik template > Edit HTML > salin dan terapkan kode di bawah tepat sebelum kode </body>

sebagai contoh widget yang akan di buat adalah widget dengan ID HTML1

<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("HTML1");
//]]>
</script>

Tentukan ID widget yang di block di atas

2.Jika sudah, copy kode di bawah, tepat sebelum kode ]]></b:skin> atau </style>

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

silahkan atur kode css diatas sesuai selera

3. Simpan template, dan lihat hasilnya

Memasang Sticky (Menu/Widget) di Blogger

Demo

Cukup sekian tutorial mengenai sticky (menu/widget) di blogger

Salam blogger Indonesia, Terimakasih