Memasang Fungsi Sticky Pada Widget Blogger

Memasang Fungsi Sticky Pada Widget Blogger - Sebelum membahas perihal 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 menyebarkan tips perihal cara memasang fungsi sticky pada widget blogger, fungsi dari sticky pada widget ini mempunyai kegunaan bagi sahabat yang menginginkan sebuah widget pada blog biar 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 aba-aba di bawah ini sempurna sebelum </body>

Sebagai pola widget yang akan dibentuk sticky yakni 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 aba-aba yang ditandai.

Baca juga : Beberapa Fungsi Tag Kondisional Pada Widget

2. Selanjutnya simpan aba-aba 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 aba-aba di atas sesuai selera.

3. Simpan template dan lihat hasilnya.


CARA 2

1. Atau dapat juga memakai aba-aba ini, sebagai pola widget yang akan dibentuk sticky yakni 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 aba-aba yang ditandai.

2. Simpan aba-aba 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 sahabat 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 aba-aba di bawah ini sesuai template yang sahabat 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.

Tweet

Subscribe to receive free email updates: