Memasang Fungsi Sticky Pada Widget Blogger

Baca Juga

Memasang Fungsi Sticky Pada Widget Blogger - Sebelum membahas wacana tips kali ini, Saya selaku admin mengucapan selamat menjalankan ibadah puasa bagi umat muslim yang menjalankannya, dan semoga ibadah kita diterima oleh Allah SWT.

Ok, pada kesempatan kali ini Saya akan membuatkan tips wacana cara memasang fungsi sticky pada widget blogger, fungsi dari sticky pada widget ini berkhasiat bagi teman yang menginginkan sebuah widget pada blog supaya dapat melayang mengikuti halaman dikala digulirkan ke bawah dan akan kembali ke posisi semula dikala halaman digulirkan ke atas.

Kita pribadi saja ke cara penerapannya :


CARA 1

1. Buka Blogger > Klik Template > Edit HTML > Salin dan terapkan instruksi di bawah ini sempurna sebelum </body>

Sebagai pola widget yang akan dibentuk sticky ialah 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 pada instruksi yang ditandai.

Baca juga : Beberapa Fungsi Tag Kondisional Pada Widget

2. Selanjutnya simpan instruksi di bawah ini sebelum ]]></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;}

Silakan atur instruksi di atas sesuai selera.

3. Simpan template dan lihat hasilnya.


CARA 2

1. Atau dapat juga memakai instruksi ini, sebagai pola widget yang akan dibentuk sticky ialah widget dengan ID #sidecontent

<script type='text/javascript'> //<![CDATA[ // Sticky Widget $(function() {   var top = $('#sidecontent').offset().top - parseFloat($('#sidecontent').css('marginTop').replace(/auto/, 0));   var footTop = $('#footer').offset().top - parseFloat($('#footer').css('marginTop').replace(/auto/, 0));    var maxY = footTop - $('#sidecontent').outerHeight();    $(window).scroll(function(evt) {     var y = $(this).scrollTop();     if (y > top) {       if (y < maxY) {         $('#sidecontent').addClass('fixed').removeAttr('style');       } else {         $('#sidecontent').removeClass('fixed').css({           position: 'absolute',           top: (maxY - top) + 'px'         });       }     } else {       $('#sidecontent').removeClass('fixed');     }   }); }); //]]> </script>

Tentukan ID widget pada instruksi yang ditandai.

2. Simpan instruksi di bawah ini sebelum ]]></b:skin> atau </style>

#sidecontent {   width: 255px;   height: 200px;   margin: auto;   background: #fc4f3f;   position: absolute; } #sidecontent.fixed {   position: fixed;   top: 20px; }

Tambahkan atribut position: absolute; pada widget dan atur posisi widget dikala halaman digulirkan top: 20px;

3. Simpan template dan lihat hasilnya.

Pada widget

Result

Pada sajian horizontal

Result

Pada widget dan sajian horizontal

Result

Untuk menonaktifkan fungsi sticky pada media query tertentu

#sidecontent@media only screen and (max-width:640px){ .makesticking{position:relative!important;z-index:initial}}

Penggunaan sticky ini dapat teman pasang di widget atau konten apa saja sesuai kebutuhan.


Tambahan :

Penerapan fungsi sticky pada sajian horizontal hanya dengan CSS

4. Tentukan class atau ID pada instruksi di bawah ini sesuai template yang teman pakai

.arlinatop-wrapper{width:100%;max-width:970px;background:rgba(255,255,255,.98);z-index:99;position:fixed;overflow:hidden;margin:auto;border-bottom:1px solid #e6e6e6;-webkit-transform:translateZ(0)}

Cukup sekian mengenai cara Memasang Fungsi Sticky Pada Widget Blogger, selamat mencoba.