Cara Membuat Iklan Melayang di Bawah Website

Table of Contents

ilustrasi iklan banner

Hai sobat blogger semua, kali ini saya akan membahas tentang cara membuat iklan melayang di bawah website. hal ini karena pengalaman saya juga yang pada waktu itu pusing banget mencari cara untuk membuat iklan popup di bawah website. 

Saya sudah baca-baca artikel, nonton video di youtube dan banyak lagi perjuangannya untuk hanya mendapatkan kode penampil iklan tersebut.

Akan tetapi saya akan sharing bagaimana mendapatkan iklan popup di bawah website dengan sangat mudah. Ikuti langkah-langkahnya ya, sob!

Langkah pertama

1. Masuk ke blogger.com
2. Pilih Theme / Tema
3. Pilih edit HTML
4. Masukkan kode HTML berikut ini:

Letakan kode berikut ini tepat di atas kode </head>

 <b:if cond='data:blog.isMobileRequest == &quot;false&quot;'>  
 <style>  
 /*<![CDATA[*/  
 .sticky-ad{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;overflow:visible;position:sticky;text-align:center;bottom:-104px;left:calc(50% - 368px);width:736px;z-index:999;max-height:104px;background-image:none;background-color:#fff;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{position:absolute;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:#fff;background-repeat:no-repeat;box-shadow:0 -1px 1px 0 rgba(0,0,0,.2);border:none;border-radius:12px 0 0;cursor:pointer}.sticky-ad-close-button:before{position:absolute;content:"";top:-20px;right:0;left:-20px;bottom:0}*{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}:active,:focus{outline:0}  
 /*]]>*/  
 </style>  
 </b:if>  

Langkah selanjutnya adalah memasukkan kode berikut ini tepat di atas </body>

 <b:if cond='data:blog.isMobileRequest == &quot;false&quot;'>  
 <div class='sticky-ad' id='sticky-ad'>  
 <!-- Kode Iklan Disini -->  
 <button aria-label='Close this ad' class='sticky-ad-close-button' onclick='document.getElementById(&apos;sticky-ad&apos;).style.display=&apos;none&apos;;'/>  
 </div>  
 <script>  
 //<![CDATA[  
 window.addEventListener("scroll",function(){  
  var target = document.getElementById('sticky-ad');  
  if(window.pageYOffset > 300){  
   target.style.bottom = "0";  
  }  
 },false);  
 //]]>  
 </script>  
 </b:if>  

Jangan lupa masukkan kode iklannya ya sob!

Setelah semuanya selesai, klik SAVE dan lihat hasilnya!

Semoga berhasil!