Widget Anchor Ads

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>