Memasang Iklan Page Level Ads Amp-Sticky Ads Untuk Blog Non AMP

Cara ini aku dapatkan diblog Mas Adhy Suryadi Yaitu Blog Kompi Ajaib Yang mana iklan ini adalah output modifikasi sang beliu kang Adhy menurut Amp-sticky-Ads Dan sanggup anda pakai dalam blog Non AMP. Untuk Tampilannya sanggup anda lihat dibawah ini.

Jika Anda berminat silahkan ikuti cara mengolahnya dibawah ini.

Pertama Silahkan anda Copy Kode CSS dibawah ini dan Silahkan anda letakan di atas Kode </head>

<b:if cond='data:blog.pageType not in {&quot;static_page&quot;,&quot;error_page&quot;} and data:blog.isMobileRequest == &quot;true&quot; 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>

Kemudian Copy kode dibawah ini Dan Letakan Diatas Kode </body>

<b:if cond='data:blog.pageType not in {&quot;static_page&quot;,&quot;error_page&quot;} and data:blog.isMobileRequest == &quot;true&quot; 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>

Langkah Terakhir Simpan Template Dan silahkan Anda lihat pada Tampilan Mobile/Smartphone.

Hanya itu yang bisa saya bagikan kali ini tentang Cara Memasang Iklan Page Level Ads Amp-Sticky Ads Untuk Blog Non AMP. Semoga bermanfaat.

Sourch Code : www.kompiajaib.com

Berbagi :