Iklan banner melayang mungkin banyak kamu temui di web besar seperti, detik, kompas bahkan jika kamu melihat blog yang menggunakan AMP HTML pasti kebanyakan akan di temui iklan melayang dengan tombol close.
Fungsi tombol close berfungsi sebagai jika pengungjung merasa terganggu oleh tampilan iklan yang menutupi konten makapengungjung bisa close iklan tersebut.
Iklan Melayang di Bawah Blog ini akan muncul setelah pengunjung men-scroll atau menggulung halaman ke bawah yang ketinggian kemunculannya bisa kita atur pada javascript.
Perlu di ketahui juga, sebenarnya Adsense sudah ada fitur Auto Ads yang sangat mudah untuk menerapkanya di blog, tapi pastinya sudah banyak yang mengerti, jika menggunakan Auto Ads maka makin banyak space kosongnya hingga tampilan blog ketika auto ads tapil akan mengurangi kecantikan blg.
Nah jika kamu ingin memasangnya di blog kamu, silahkan simak tutorialnya di bawah ini. sebelumnya jika kamu menggunakan template AMP HTM maka untuk menerapkan stick ads bisa baca Alternatif Iklan Page-Level Ads Untuk Blog AMP
Membuat Iklan Melayang di Bawah Blog Seperti Amp-Sticky-Ad
1. Letakkan kode di bawah ini di atas kode </head>
<b:if cond='data:blog.pageType not in {"static_page","error_page"} and data:blog.isMobileRequest == "true" and not data:blog.searchQuery'>
<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: fixed;
text-align: center;
bottom: -104px;
left: 0;
width: 100%;
z-index: 999;
max-height: 104px;
background-image: none;
background-color: #fff;
box-shadow: 0 0 5px 0 rgba(0, 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, 0.2);
border: none;
border-radius: 12px 0 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>
Kode di atas tidak ditampilkan di halaman static, halaman error, dan halaman hasil pencarian dan ditampilkan hanya di versi mobile.
2. Selanjutnya letakkan kode di bawah ini diatas kode </body>
<b:if cond='data:blog.pageType not in {"static_page","error_page"} and data:blog.isMobileRequest == "true" and not data:blog.searchQuery'>
<div class="sticky-ad" id="sticky-ad">
<!-- Kode iklan silahkan simpan di bawah ini --><button class=”sticky-ad-close-button” onclick=”document.getElementById(‘sticky-ad’).style.display=’none’;” aria-label=”Close this ad”></button>
</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>
Iklan di atas tidak ditampilkan di halaman static, halaman error, dan halaman hasil pencarian dan ditampilkan hanya di versi mobile. Silahkan gunakan unit iklan horizontal dan pilih iklan mobile 320×50 atau 320×100.
Leave a Reply