Cara Memasang Fungsi Sticker Widget Blogger


Hallo pada kali ini saya akan share lagi tutorial pada kamu semua yaitu Cara Memasang Fungsi Sticker Widget Blog, yanga mana mungkin kamu desain blog yang beda dari lain. 

Fungsi widget sticky ini agar bisa bergulir mengikuti halam saat di gulir ke bawah, bagaimana caranya kamu bisa langsung simak aja tutorial berikut ini. 



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

Sebagai contoh widget yang akan dibuat sticky adalah widget dengan ID #HTML1

<script>
//<![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 kode yang ditandai.

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

3. Simpan template dan lihat hasilnya.

Langkah Kedua

1. Atau bisa juga menggunakan kode ini, sebagai contoh widget yang akan dibuat sticky adalah widget dengan ID #sidecontent

<script>
//<![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 kode yang ditandai.

2. Simpan kode 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 saat halaman digulirkan top: 20px;

3. Simpan template dan lihat hasilnya.

Pada widget


Pada menu horizontal


Pada widget dan menu horizontal


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 bisa sobat pasang di widget atau konten apa saja sesuai kebutuhan.


Tambahan :

Penerapan fungsi sticky pada menu horizontal hanya dengan CSS

4. Tentukan class atau ID pada kode di bawah ini sesuai template yang sobat 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.

Post a Comment for "Cara Memasang Fungsi Sticker Widget Blogger"