Cara Membuat Iklan Sticky Untuk Mobile Seperti Tribun News -->

Cara Membuat Iklan Sticky Untuk Mobile Seperti Tribun News

12 Aug 2019, August 12, 2019
Gambar Hanya Ilustrasi

PCN MEDIA,Membuat Banner Yang di sesuaikan Untuk Blog atau Website kita memanglah tidak mudah.

Dengan Perkembangan dunia Digital seperti ini mencari sebuah Informasi tidaklah begitu sulit.

dan Bisanya kalian sudah taukan Biasanya ketika kita membuka suatu Website berita pasti dibawahnya ada Banner iklan berukuran Mobile Responsiv.

dan Banner tersebut banyak di pakai oleh banyak berita Medi Online untuk meningkatkan penghasilan mereka

Berikut cara Memasang Iklan banner Sticky di Mobile sangat gampang.

1.Masuk Ke Blogger atau Website kalian.
2.Klik Tema > lalu edit HTML
3.Cari </body>
4.Untuk mempermudahnya kalian bisa mencarinya menggunakan CTRL+F
5.lalu Copy kode di bawah ini di bagian Bawah </body>
6.Klik Simpan

Kode CSS dan HTML STICKY

<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'><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,.2);margin-bottom:0;padding-top:4px;transition:all .4s ease-in-out;max-width:100%;height:100px;bottom:0;-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%{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,.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-00000000000' data-ad-slot='00000000' 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=&apos;relative&apos;;this.style.display=&apos;none&apos;;'/></button></ins></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>

lalu sebagai Tambahan Terakhir kalian harus mengganti kode Berwarna Kuning yang sudah saya tandai dengan kode kalian sendiri.

1.Ca-pub-000000000'
2.data-ad-slot='0000000'

lalu langkag akhir klik simpan,lihat perubahan Yang terjadi.

TerPopuler