Widget Anchor Ads

"Widget iklan melayang di bawah layar seperti Anchor Ads Google Adsense."

YZG March 11, 2024

Details

Widget Anchor Ads manual seperti google adsense. Original code dari template Median-UI by Jagodesain. Widget iklan hanya akan muncul pada tampilan mobile device.

Demo

Install

<b:widget id='yzanchorads' locked='false' title='yzanchorads' type='HTML'>
        <b:includable id='main'>
          <b:if cond='data:blog.isMobileRequest'>
            <style>
              .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; }
            </style>
            <div class='sticky-ad flex ai-c jc-c fixed ta-c column' id='sticky-ad'>
              <data:content/>
              <button aria-label='Close this ad' class='sticky-ad-close-button absolute'></button>
            </div>
            <script>
              /*<![CDATA[*/
              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'; } }); } });
              /*]]>*/
            </script>
          </b:if>
        </b:includable>
      </b:widget>