Membuat Sticky Ad dan Header Show Hide ketika di Scroll
Banyak sekali Artikel yang membahas tentang memasang Sticky Header Show Hide on Scroll. Namun tidak dengan Sticky Ad yang tampil ketika di Scroll ke bawah dan hilang ketika di scroll ke atas.
Salah satu keuntungan dari pemasangan fitur ini adalah memberikan kenyaman kepada pengguna dan memaksimalkan pendapatan dari Iklan Adsense.
Untuk kamu yang ingin mengetahui Cara Pemasangan Sticky Ad dan Header Show Hide on Scroll, bisa dilihat dibawah ini.
Memasang Sticky Ad dan Header Show Hide On Scroll
Untuk menerapkan fitur ini, kamu harus menambahkan Sticky Ad, Silahkan Copy kode css dibawah ini dan letakkan di atas
]]></b:skin> pada template kalian.
.ads-foot{position:fixed;left:0;right:0;bottom:0;z-index:10; position:-webkit-sticky;transition:bottom .5s ease}
#ads-foot.show{bottom:-100px}}
.closebtnads{font-weight:700;-webkit-border-top-right-radius:10px;-moz-border-radius-topright:10px;border-top-right-radius:10px;margin-top:-22px;margin-left:0;float:left;color:#000;padding:1px 10px 1px 10px;font-size:15px;line-height:20px;cursor:pointer;transition:.3s;background-color:#fff}
.alertads{background: #fff;}
.dark-mode, .dark-mode .alertads, .dark-mode .adsbygoogle > *:after{background-color:$(bg.night.colors)}
.sticky{animation:animatetop 1s;z-index:2;position:fixed;top:0;width:100%}
@keyframes animatetop{from{top:-300px;opacity:0}to{top:0;opacity:1}}
.ads-container{max-width:640px;margin-left:auto;margin-right:auto;}Selanjutnya pemasangan Javascript untuk Show Hide Sticky Ad On Scroll, Silahkan Copy kode JS dibawah ini dan letakkan di </body>
<script>/*<![CDATA[*/ var prevScrollpos = window.pageYOffset;window.onscroll = function(){var currentScrollpos = window.pageYOffset;if (prevScrollpos > currentScrollpos){document.getElementById("ads-foot").classList.add('show')}
else{document.getElementById("ads-foot").classList.remove('show')}
prevScrollpos = currentScrollpos}
/*]]>*/</script>Setelah itu, salin kode berikut dan letakkan di bawah <body>
<b:if cond='!data:view.isMobile'>
<div align='center' class='ads-foot' id='ads-foot'>
<div class='ads-container'>
<!--hapus kode ini jika ingin menampilkan iklan tanpa tombol close-->
<span class="closebtnads" onclick="this.parentElement.style.display='none';">Close Ads x</span>
<!--hapus kode ini jika ingin menampilkan iklan tanpa tombol close-->
<div class='alertads'>
<!-- kode Adsense disini -->
</div>
</div>
</div>
</b:if>Oke, sekarang Sticky Ad akan tampil ketika kamu Scroll kebawah dan hilang ketika Scroll keatas.
Selanjutnya adalah pemasangan Sticky Header, Manfaat dari Fitur ini adalah agar Sticky Ad yang tampil tidak memperkecil Screen untuk Scrolling.
Silahkan Copy css dibawah ini dan cari kode header, lalu ganti kodenya.
.header {position: fixed;top: 0;left: 0;z-index: 9999;-webkit-transition-duration: .5s;transition-duration: .5s;-webkit-transition-timing-function: cubic-bezier(.215, .61, .355, 1);transition-timing-function: cubic-bezier(.215, .61, .355, 1);-webkit-transition-property: -webkit-transform;transition-property: transform}
.header--hidden {-webkit-transform: translateY(-100%);-ms-transform: translateY(-100%);transform: translateY(-100%)}Jika id header berbeda, silahkan ganti kode tersebut sesuai dengan id Header kamu, jangan lupa untuk mengganti id .header pada Script JS nya agar tidak error.
Setelah itu, pasang kode JS dibawah ini agar Sticky Header berfungsi, letakkan kodenya di atas </body>
<script>
//<![CDATA[
;
(function(document, window, index) {
'use strict';
//ganti id header sesuai dengan Template kamu
var elSelector = '.header',
elClassHidden = 'header--hidden',
throttleTimeout = 500,
element = document.querySelector(elSelector);
if (!element) return true;
var dHeight = 0,
wHeight = 0,
wScrollCurrent = 0,
wScrollBefore = 0,
wScrollDiff = 0,
hasElementClass = function(element, className) {
return element.classList ? element.classList.contains(className) : new RegExp('(^| )' + className + '( |$)', 'gi').test(element.className);
},
addElementClass = function(element, className) {
element.classList ? element.classList.add(className) : element.className += ' ' + className;
},
removeElementClass = function(element, className) {
element.classList ? element.classList.remove(className) : element.className = element.className.replace(new RegExp('(^|\\b)' + className.split(' ').join('|') + '(\\b|$)', 'gi'), ' ');
},
throttle = function(delay, fn) {
var last, deferTimer;
return function() {
var context = this,
args = arguments,
now = +new Date;
if (last && now < last + delay) {
clearTimeout(deferTimer);
deferTimer = setTimeout(function() {
last = now;
fn.apply(context, args);
}, delay);
} else {
last = now;
fn.apply(context, args);
}
};
};
window.addEventListener('scroll', throttle(throttleTimeout, function() {
dHeight = document.body.offsetHeight;
wHeight = window.innerHeight;
wScrollCurrent = window.pageYOffset;
wScrollDiff = wScrollBefore - wScrollCurrent;
if (wScrollCurrent <= 0) // scrolled to the very top; element sticks to the top
removeElementClass(element, elClassHidden);
else if (wScrollDiff > 0 && hasElementClass(element, elClassHidden)) // scrolled up; element slides in
removeElementClass(element, elClassHidden);
else if (wScrollDiff < 0) // scrolled down
{
if (wScrollCurrent + wHeight >= dHeight && hasElementClass(element, elClassHidden)) // scrolled to the very bottom; element slides in
removeElementClass(element, elClassHidden);
else // scrolled down; element slides out
addElementClass(element, elClassHidden);
}
wScrollBefore = wScrollCurrent;
}));
}(document, window, 0));
//]]>
</script>Jika sudah, Simpan tema dan lihat hasilnya, Cukup singkat pembahasan tentang Cara membuat Memasang Sticky Ad dan Header Show Hide On Scroll, jika postingan ini mendapatkan respon yang baik, saya akan membagikan Cara Mempercepat Loading Blog hingga 90-100 Pagespeed. Semoga bermanfaat.
« Prev Post
Next Post »