Cara Membuat Sticky Ads Pada Sidebar Blog AMP

Cara membuat sticky ads di blog, pada postingan kali ini saya akan membahas tentang cara membuat sticky ads pada sidebar blog AMP ataupun Non AMP. Nantinya sidebar ini akan tetap diam walaupun discroll kebawah hingga mendekati footer blog.

Sebelumnya saya juga telah membahas Update Google Adsense Tentang Stciky Ads, tentunya ini adalah kabar baik bagi para publisher adsense yang ingin menerapkan sticky ads.

Sebagai contohnya bisa dilihat blog ini, terdapat sidebar yang menggunakan sticky ads. Bisa dicoba dengan melakukan scroll kebawah.

Bagi yang mau mencobanya silahkan ikuti panduannya dibawah ini.

Membuat Sticky Ads Sidebar Blog AMP dan Non AMP

1. Masuk ke akun blogger kalian

2. Pilih Tema, kemudian pilih Edit HTML

3. Letakan kode dibawah ini, diatas kode </head>

<style type='text/css'>
#sidebar-sticky {
  width: 300px;
  float: right;
  padding: 0;
  margin: 0 auto;
  position: -webkit-sticky;
  position: sticky;
  top: 10px;
}
</style>

4. Silahkan atur lebar atau widht-nya sesuai dengan lebar sidebar kalian

5. Letakan kode dibawah ini, setelah kode </aside>

<div id='sidebar-sticky'>
  <b:section class='sticky_sidebar' id='sticky_sidebar' preferred='yes'/>
  </div>

Sehingga hasilnya seperti dibawah ini

<aside   >
<div id='sidebar-right'>
...........
...........
...........
</div>
</aside>
<div id='sidebar-sticky'>
  <b:section class='sticky_sidebar' id='sticky_sidebar' preferred='yes'/>
  </div>

6. Kemudian Save Template

7. Kemudian masuk lagi ke Tata Letak, Silahkan masukan tambahkan kode iklan pada gadget yang tersedia.

Template Blogger Terbaik Rekomendasi

8. Lihat hasilnya.

Membuat Sticky Widget Berhenti Diatas Footer Blog Non AMP

1. Masuk ke akun blogger kalian

2. Pilih Tema, kemudian pilih Edit HTML

3. Letakan kode dibawah ini diatas kode </body>

<script>
//<![CDATA[
$(function(){ // document ready
   if ($('#sticky').length) { // make sure "#sticky" element exists
      var el = $('#sticky');
      var stickyTop = $('#sticky').offset().top; // returns number
      var stickyHeight = $('#sticky').height();
      
      $(window).scroll(function(){ // scroll event
          var limit = $('#footer').offset().top - stickyHeight - 20;
          
          var windowTop = $(window).scrollTop(); // returns number
          
          if (stickyTop < windowTop){
             el.css({ position: 'fixed', top: 0 });
          }
          else {
             el.css('position','static');
          }
          
          if (limit < windowTop) {
          var diff = limit - windowTop;
          el.css({top: diff});
          }
        });
   }
});
//]]>
</script>

4. Atau dengan menambahkan class seperti dibawah ini

<script>
//<![CDATA[
$(function(){ // document ready
   if ($('#sticky').length) { // make sure "#sticky" element exists
      var el = $('#sticky');
      var stickyTop = $('#sticky').offset().top; // returns number
      var stickyHeight = $('#sticky').height();
      
      $(window).scroll(function(){ // scroll event
          var limit = $('#footer').offset().top - stickyHeight - 20;
          
          var windowTop = $(window).scrollTop(); // returns number
          
          if (stickyTop < windowTop){
             el.css({ position: 'fixed', top: 0 });
             el.addClass("intro");
          }
          else {
             el.css('position','static');
             el.removeClass("intro");
          }
          
          if (limit < windowTop) {
          var diff = limit - windowTop;
          el.css({top: diff});
          el.removeClass("intro");
          }
        });
   }
});
//]]>
</script>

5. Kemudian letakan CSS dibawah ini

.intro {
   ..................
   ..................
   ..................
}

6. Apabila ingin memakai warna background tinggal menambahkan pada CSS-nya seperti dibawah ini.

.intro{background:red!important}

Kesimpulan

Google membolehkan penempatan Sticky Ads asalkan harus sesuai dengan persyaratan. Bahkan untuk blog amp, sudah disupport dengan adanya amp-sticky-ad.

Bagi kalian yang mempunyai blog amp seperti saya, memang terasa sulit menerapkan berbagai kode agar valid amp, karena saya memakai blogspot bukan wordpress.

Untuk kalian para pengguna wordpress sangatlah beruntung, karena tinggal memakai plugin untuk mendukung blog sesuai keinginanmu.

Share:

admin

Halo perkenalkan nama saya Mangaip. Saya merupakan konten kreator, influencer, dan penulis di blog ini.

Leave a Reply

Your email address will not be published. Required fields are marked *

Ibu Guru Pasti Meleleh, Ini Puisi Hari Guru Nasional Berbagai Macam Peralatan Kantor Serta Fungsinya