Skip to main content

follow us


www.azid.web.id - Cara Membuat Iklan Sticky Pada Desktop Di Blog Non AMP dan AMP. Sebelumnya saya telah membuat iklan sticky non AMP seperti AMP di mobile, sekarang saya akan share iklan sticky untuk versi desktop. Bagi sobat yang sudah pernah berkunjung ke blog kompiajaib.com, maka sobat akan ditampilkan iklan sticky dengan ukuran 728x90 dibagian footer blog yang dapat melayang dan terlihat tatkala sobat menscroll kebawah.

Baca Juga: Template Gratis Kompi Minimalis AMP Versi 6

Iklan ini sebeneranya merupakan iklan sticky yang tampil hanya pada versi mobile dengan mengkaktifkan iklan otomatis dan meletakkan kode iklan pada blog kita. Dengan begitu saat pada versi mobile jika ada pengunjung maka otomatis akan ditampilkan iklan pada blog sobat. Lantas apakah bisa tampil pada versi dekstop?, sebagaimana yang saya jelaskan tadi bahwa iklan ini akan tampil hanya versi mobile jadi tidak akan tampil pada versi dekstop. Lantas bagaimana membuat iklan sticky pada versi desktop?. Untuk menampilkan iklan sticky pada versi dekstop sobat harus membuatnya secara manual dengan menggunakan kode CSS dan JavaScript.

Iklan sticky ini dapat tampil pada blog Non AMP dan AMP dengan ketentuan jika AMP sudah di setting dengan hanya tampil pada versi mobile "m=1" atau halaman khusus "amp=1".

Baca Juga: Cara membuat blog AMP pada halaman khusus "amp=1"

Jika sobat berminat membuat iklan sticky pada versi Dekstop sobat bisa mengikuti langkah-langkah berikuti ini:

Pertama, Sobat masuk pada menu template dan klik Edit HMTL. Setalah itu letakkan kode berikut ini tepat diatas kode </body>


<b:if cond='data:blog.homepageUrl != data:blog.url'><b:if cond='data:blog.pageType not in {&quot;static_page&quot;,&quot;error_page&quot;} and data:blog.isMobileRequest == &quot;false&quot; and not data:blog.searchQuery'>
<div class='sticky-ad fade-in' id='sticky-ad'>
<!-- Kode iklan silahkan simpan di bawah ini -->
<ins class='adsbygoogle' data-ad-client='ca-pub-xxxxxxx' data-ad-slot='xxxxxxx' style='display:inline-block;width:728px;height:90px'/>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
<button aria-label='Close this ad' class='sticky-ad-close-button' onclick='document.getElementById(&apos;sticky-ad&apos;).style.display=&apos;none&apos;;removeClassBody()'/>
</div>
<style>
/*<![CDATA[*/
.sticky-ad>div{margin:0 auto!important}
body.sticky,body.sticky #sidebar-wrapper{padding-bottom:100px}
.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:0;left:0;width:100%;z-index:995;max-height:104px;background-image:none;background-color:transparent;box-shadow:0 0 5px 0 rgba(0,0,0,.2);margin-bottom:0;padding-top:4px;display:none}.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:transparent;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}.fade-in{-webkit-animation:fade-in 1.2s cubic-bezier(.39,.575,.565,1.000) both;animation:fade-in 1.2s cubic-bezier(.39,.575,.565,1.000) both}@-webkit-keyframes fade-in{0%{opacity:0}100%{opacity:1}}@keyframes fade-in{0%{opacity:0}100%{opacity:1}}
/*]]>*/
</style>
<script>
//<![CDATA[
var lazyadsense = false;
window.addEventListener("scroll", function(){
if ((document.documentElement.scrollTop != 0 && lazyadsense === false) || (document.body.scrollTop != 0 && lazyadsense === false)) {
document.getElementById('sticky-ad').style.display = "block";
document.body.className += " sticky";
lazyadsense = true;
  }
}, true);
function removeClassBody() {
    var element = document.body;
    element.className = element.className.replace(/\bsticky\b/g, "");
}
//]]>
</script>
</b:if>

Kedua, Jika sudah langkah terkhir adalah Save Template sobat.

KETERANGAN:
Pastikan tanda xxxxx ganti dengan kode ID Adsense sobat dan kode slot iklan sobat.

Demikianlah artikel saya tentang Cara Membuat Iklan Sticky Pada Desktop Di Blog Non AMP dan AMP. Semoga bermanfaat. Amin.
PERHATIAN!: setiap link template pada blog ini di direct 5 -7 kali jadi harap bersabar.

You Might Also Like:

Comment Policy: Silahkan tuliskan komentar Anda yang sesuai dengan topik postingan halaman ini. Komentar yang berisi tautan tidak akan ditampilkan sebelum disetujui.
Buka Komentar