Cara Membuat Iklan Anchor Sticky Untuk Tampilan Desktop Dan Mobile – Pada kesempatan kali ini saya akan membagikan sebuah tutorial dalam menampilkan iklan anchor sticky secara manual pada blog kalian, sebelumnya iklan otomatis ini merupakan iklan default untuk adsense dalam menempatkan iklan di situs sobat.
Salah satu iklan yang mencolok dari pandangan saya adalah iklan mengambang tersebut yang merupakan iklan anchor, iklan tersebut sering kali tampil hanya dalam tampilan mobile saja akan tetapi disini kita akan membuatnya tampil secara paksa pada blog kita dengan menggunakan script yang akan saya bagikan nanti.
Pertanyaan yang sering kali timbul adalah Amankah memasang iklan anchor sticky adsense tersebut untuk tampil secara paksa pada blog kita ? jawabannya adalah “Aman” selama hal tersebut tidak muncul secara tiba-tiba yang nantinya akan menimbulkan invalid klik pada iklan dan konten kalian sendiri kepada pengunjung blog.
Lantas bagaimana cara membuat iklan anchor sticky tersebut pada blog anda ? berikut di bawah tutorialnya :
Memasang Iklan Anchor Sticky Untuk Tampil Di Desktop.
1. Buka Blogger
2. Pilih Theme => Edit HTML
3. Lalu Tekan CTRL + F dan Ketik </body> atau </body>
4. Copy Kode Di Bawah Ini dan tempelkan tepat di atas kode </body> atau </body>
<b:if cond='data:blog.pageType not in {"static_page","error_page"} and data:blog.isMobileRequest == "false" and not data:blog.searchQuery'>
<style>
/*<![CDATA[mankoin.com*/
.sticky-ad {
display: none;
-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;
left: 0;
width: 100%;
z-index: 999;
max-height: 100px;
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 0.4s ease-in-out;
max-width: 100%;
height: 100px;
bottom: 0;
-webkit-animation: fade-in 1.2s cubic-bezier(0.39, 0.575, 0.565, 1) both;
animation: fade-in 1.2s cubic-bezier(0.39, 0.575, 0.565, 1) both;
}
@-webkit-keyframes fade-in {
0% {
bottom: -100px;
}
100% {
bottom: 0;
}
}
@keyframes fade-in {
0% {
bottom: -100px;
}
100% {
bottom: 0;
}
}
.sticky-ad-close-button {
position: absolute;
width: 28px;
height: 28px;
top: -28px;
right: 0;
background-size: 24px 24px;
background-position: 2px;
background-color: #fff;
background-repeat: no-repeat;
box-shadow: 0 -1px 1px 0 rgba(0, 0, 0, 0.2);
border: 0;
border-radius: 12px 0 0 0;
cursor: pointer;
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000000' d='M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z' /%3E%3C/svg%3E");
padding: 0;
} /*]]>*/
</style>
<div class="sticky-ad" id="sticky-ad">
<ins class="adsbygoogle" data-ad-client="ca-pub-XXXXXX" data-ad-slot="ID SLOT IKLAN" style="display: inline-block; width: 970px; height: 90px;" />
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
<button aria-label="Close this ad" class="sticky-ad-close-button" onclick="this.parentElement.style.position='relative';this.style.display='none';" />
</div>
<script>
//<![CDATA[ function stickyAd(){var e=document.getElementById("sticky-ad");300<window.pageYOffset&&(e.style.display="block",window.removeEventListener("scroll",stickyAd))}window.addEventListener("scroll",stickyAd);//]]>
</script>
</b:if> 5. Ganti Kode data-ad-client dengan Kode ID Adsense anda contohnya ca-pub-xxxxx dan data-ad-slot kalian dengan Bagian Nomor 6 Di Bawah ini.
6. Silahkan Masuk Ke Akun Google Adsense anda dan Buat Unit Iklan Baru Lalu Ubah Tampilan Iklan Resposive Menjadi Tampilan Iklan Tetap dengan dimensi lebar 728 tinggi 90. dan beri nama unit iklan anda, lalu ambil kode iklan dan masukan pada petunjuk nomor 5 diatas tadi.
7. Simpan Theme.
Menampilkan Unit Iklan Anchor Sticky Pada Tampilan Mobile
1. Buka Blogger
2. Pilih Theme => Edit HTML
3. Lalu Tekan CTRL + F dan Ketik </head> atau </head>
4. Copy Kode Di Bawah Ini dan tempelkan tepat di atas kode </head> atau </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 0.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> 5. Lanjut , setelah itu ketik CTRL + F lagi dan Ketik </body> atau </body>
6. Copy Kode di bawah Ini dan Tempelkan tepat di atas Kode </body> atau </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'>
<!-- letakkan kode iklan anda disini -->
<button aria-label='Close this ad' class='sticky-ad-close-button' onclick='document.getElementById('sticky-ad').style.display='none';'/>
</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> 7. Silahkan Masuk Ke Akun Google Adsense anda dan Buat Unit Iklan Baru Lalu Ubah Tampilan Iklan Resposive Menjadi Tampilan Iklan Tetap dengan dimensi lebar 320 tinggi 50. dan beri nama unit iklan anda, lalu ambil kode iklan dan masukan Kolom yang di Merahkan diatas
8. Simpan Tema anda.
Nah sampai disini artikel tentang cara membuat iklan anchor sticky untuk desktop dan mobile , jika ada hal yang perlu ditanyakan silahkan berkomentar di bawah ini , selamat mencobanya akhir kata terima kasih telah berkunjung semoga dapat bermanfaat.