Cara Pasang Dan Kustomisasi Iklan Adsense Sticky Pada Blogger Amp
Tutorial lengkap Cara Pasang dan Kustomisasi Iklan AdSense Sticky pada blogger AMP
Iklan Sticky / Melayang di bab bawah tampilan blog dianggap menjadi salah satu placement iklan paling efektif dan menghasilkan banyak klik. Bagi para blogger ibarat saya, tentunya adanya fitur ini sangat membantu meningkatkan klik iklan pada blog saya.Meskipun intinya jenis iklan ini diperbolehkan oleh Google AdSense, namun tetap ada batasan atau ketentuan dari AdSense. Contohnya, iklan sticky ini dihentikan menutupi layar atau tampilan website lebih dari 15%.
Kaprikornus disarankan, iklan tersebut mempunyai height atau tinggi 90px saja untuk tampilan desktop, dan maksimal 100px untuk tampilan mobile.
Lalu, bagamana cara memasang iklan sticky adsense ini? Tentunya anda harus menyediakan aba-aba CSS khusus dan input pada website anda semoga iklan sticky dapat tampil.
Tapi, untuk anda yang memakai halaman blogger valid AMP HTML, tidak perlu memakai aba-aba CSS khusus untuk memasang iklan sticky ad ini.
Cukup implementasi amp-sticky-ad saja, dan iklan sticky akan tampil pada blog AMP. Namun tidak menutup kemungkinan untuk kau dapat kostumisasinya dengan CSS.
Berikut ini saya jelaskan cara memasang Iklan Sticky Adsense di blog AMP dengan menggunakan
<amp-sticky-ad> .Sebelum memulai langkah memasang, pastikan anda sudah menciptakan unit iklan AdSense banner berukuran 320X100 atau 320x50 di dashboard Google AdSense anda. Lalu copy aba-aba unit iklan yang anda buat tersebut.
Setelah itu, hal yang pertama anda lakukan ialah memasang javascript AMP sticky ad berikut sebelum aba-aba </head>
Lalu cari kode </body> , dan tempelkan sempurna diatasnya:
<b:if cond='data:blog.pageType != "static_page" and data:blog.isMobileRequest == "true" and data:blog.pageType != "error_page"'> <amp-sticky-ad layout='nodisplay'> <amp-ad data-ad-client='ca-pub-4026188032600094' data-ad-slot='9962051559' data-auto-format='rspv' data-full-width='true' height='320' type='adsense' width='100vw'> <div overflow='true'/> </amp-ad> </amp-sticky-ad> </b:if>Note:
Pastikan anda sudah mengganti
data-ad-client dengan publisher AdSense anda, dan data-ad-slot dengan unit iklan sticky yang sudah anda buat sebelumnya.Nah, untuk anda yang ingin kostumisasi class amp-sticky-ad tersebut, boleh saja. Tinggal anda gunakan dan kostumisasi #amp-sticky-ad di
<style amp-custom='amp-custom'>. Kalau saya sendiri, menentukan kondusif dan hanya kostumisasi button close-nya saja. Berikut CSS yang saya gunakan.
/* Amp sticky Close Button */ .amp-sticky-ad-close-button{position:absolute;visibility:hidden;width:28px;height:28px;top:-28px;margin:auto;right:0;background-image:url(https://image.flaticon.com/icons/png/128/109/109702.png);background-size:13px 13px;background-position:9px center;background-color:transparent;background-repeat:no-repeat;box-shadow:0 0 5px 0 rgba(0,0,0,.2);border:none;border-radius:10px}Perlu diingat kembali bahwa, tutorial ini hanya akan menciptakan iklan amp-sticky-ad anda tampil bila visitor anda membuka blog via smartphone saja.
Semoga bermanfaat
