
Custom Anchor Ads for Blogger
"Floating ad widgets at the bottom of the screen like Google Adsense Anchor Ads."

Details
Manual and Customizable Anchor Ads widget like google adsense. Original code from Median-UI template by Jagodesain.
This widget can be moved according to individual preferences.
Demo
Like in bottom of this page. |
Code
CSS
.sticky-ad { display: -webkit-box; display: -ms-flexbox; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; -webkit-box-pack: center; -ms-flex-pack: center; overflow: visible; bottom: -100%; left: 0; width: 100%; z-index: 999; background-image: none; background-color: var(--bg-card); box-shadow: 0 0 5px 0 rgba(0,0,0,.2); margin-bottom: 0; padding-top: 4px; transition: all .4s ease-in-out; }
.sticky-ad-close-button { width: 28px; height: 28px; top: -28px; right: 0; background-image: url("data:image/svg+xml;charset=utf8,%3csvg width='13' height='13' viewBox='341 8 13 13' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3e%3cg%3e%3cpath style='fill:%234F4F4F' d='M354 9.31L352.69 8l-5.19 5.19L342.31 8 341 9.31l5.19 5.19-5.19 5.19 1.31 1.31 5.19-5.19 5.19 5.19 1.31-1.31-5.19-5.19z'%3e%3c/path%3e%3c/g%3e%3c/svg%3e"); background-size: 13px 13px; background-position: 9px; background-color: var(--bg-card); background-repeat: no-repeat; box-shadow: 0 -1px 1px 0 rgba(0,0,0,.2); border: none; border-radius: 12px 0 0 0; }
.sticky-ad-close-button:before { position: absolute; content: ''; top: -20px; right: 0; left: -20px; bottom: 0; }
HTML
<div class="sticky-ad flex ai-c jc-c fixed ta-c column" id="sticky-ad">
<!--Kode iklan mulai dari sini-->
<a href="#" title="Banner ad here"><img alt="Banner iklan disini" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbfevxDfOsVLfyW8pnhD3aWUUNObqpJTjkl03YB_HG5R_vnqZMzB-hLEdVOcMfhyphenhyphenG3bGr2nvrbYHdLHRebdT7yXkzvsxyDm-uEYpN8lN-yvxxRwqM94Ivt_8BjSFDJZFP9t5EA43NHBUrw/s1600/arlina-tea.png" style="height: auto; max-width: 100%; vertical-align: middle;" /></a>
<!--Kode iklan sampai sini-->
<button aria-label="Close this ad" class="sticky-ad-close-button absolute"></button>
</div>
JavaScript
document.addEventListener('DOMContentLoaded', function() { window.addEventListener('scroll', function() { var e = document.getElementById('sticky-ad'); if (window.pageYOffset > 300 && e) { e.style.bottom = '0'; } }); var closeButton = document.querySelector('.sticky-ad-close-button'); if (closeButton) { closeButton.addEventListener('click', function() { var stickyAd = document.getElementById('sticky-ad'); if (stickyAd) { stickyAd.style.display = 'none'; } }); } });
Help Me Install
Harap berdiskusi dengan sopan dan sesuai pembahasan, jika mengirimkan spam link maka komentar akan dimoderasi. Terima kasih