Custom Anchor Ads for Blogger

Posted by Yanuar Zhaldy Gemilang Addson at October 22, 2024

0

"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'; } }); } });