Langsung ke konten utama

Membuat Iklan Sticky Adsense Melekat di Bawah

Memang Google melarang menggunakan sticky ads yaitu iklan yang melayang dan tampil terus ketika di scroll. Karena ini bisa mengganggu pengunjung blog.

Akan tetapi Google sendiri menyediakan iklan otomatis yang di dalamnya terdapat fitur iklan anchor yang di mana iklan akan tampil di bagian atas atau bawah layar.

Akan tetapi iklan anchor otomatis ini tidak mengganggu pengunjung, karena hanya memiliki tinggi 50px dan hanya tampil pada layar vertikal seperti pada smartphone dan jika pengunjung agak terganggu maka ada tombol untuk menyembunyikannya dengan mudah.

Serta juga kemunculan iklan anchor otomatis ini hanya di saat waktu yang optimal (sehingga tidak memberatkan pemuatan halaman).

Iklan sticky otomatis tentu tidak akan muncul halaman dekstop pc, maka solusinya ialah memasang dan membuat secara manual iklan sticky, yang akan muncul di bawah layar. Seperti pada gambar di atas, tampilannya dibuat mirip iklan sticky pada amp, cukup menarik untuk di coba.

Kalau masalah aman atau tidak, saya menganggapnya aman dengan syarat iklan tidak mengganggu pengunjung – baik itu iklan yang menutupi konten atau tata letak widget yang dapat menyebabkan klik tidak sengaja.

Dan jika tampilan iklan terlalu besar, itu yang tidak diperbolehkan. Bagaimana! apakah ingin mencoba membuat Iklan Sticky seperti amp sticky ad, berikut caranya:

Cara Membuat Iklan Melekat Sticky Ads Responsive

Simpah kode berikut di bagian paling bawah tag </body>, *penting.

Pilih Semua
<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-0000000000000000' data-ad-slot='9943136880' 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;;'/></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>

Setelah itu ganti kode iklan yang di mark dengan iklan Kamu. Saya sarankan untuk menggunakan kode iklan dengan lebar 970x90 atau 728x90. Karena dari percobaan saya unit yang 970x90 dapat tampil dengan baik, berbeda dengan unit responsive yang tidak muncul/tampil (bahkan iklan tidak di proses).

NB: Unit iklan 970x90 atau 728x90 juga dapat dimuat responsive secara otomatis.

Berikut yang mungkin harus anda tahu tentang script di atas:

Kode iklan di atas tidak akan ditampilkan pada halaman error dan statis/page. Serta hanya akan muncul di halaman dekstop, karena kalau halaman mobile cukup dengan iklan otomatis (anchor), serta jika iklan manual dengan tinggi 90px itu mungkin terlalu besar untuk tampilan mobile.

Iklan saya buat khusus, kode 300 untuk kondisi iklan akan muncul saat di scroll. Jelasnya, saat di scroll jika halaman sudah bergeser ke atas sepanjang 300px iklan akan muncul. Dan removeEventListener supaya script penampil iklan tidak berjalan lagi sehingga halaman menjadi lebih ringan.

Tidak menyertakan tombol tutup, akan tetapi tombol arah bawah maksudnya iklan tidak lagi ditampilkan secara sticky/melayang. Akan tetapi akan tampil di bagian paling bawah sesuai dengan letak kodenya. Itulah mengapa iklan harus diletakkan di bagian paling bawah.

Label:

Komentar

Posting Komentar

Postingan populer dari blog ini

Membuat Komentar Blogger Valid AMP dan Anti Backlink Spam

Umumnya komentar pada blog AMP menggunakan Disqus atau Facebook comment. Awalnya versi mobile blog ini juga menggunakan komentar Facebook, tapi sekarang menggunakan Threaded Comment Blogger yang tentunya sudah di custom valid AMP. Untuk versi dekstop juga ditambahkan fitur komentar Disqus (untuk diskusi). Sama seperti di posting sebelumnya komentar blogger ini menggunakan schema.org dan anti backlink untuk SEO. Schema komentar yang saya temukan hanya ada dua jenis yaitu https://schema.org/UserComments dan https://schema.org/comment. Karena usercomment mencantumkan sebagai cara lama untuk berinteraksi, maka diputuskan untuk menggunakan https://schema.org/comment, itu juga diperkuat lagi dengan digunakan oleh mastah blogger (platform wordpress). Blogger sudah menggunakan tag nofollow untuk setiap anchor link yang ada pada komemtar seperti yang sudah dijelaskan di blog resminya puluh tahun lalu. Tapi bagi saya itu tidak cukup, maka dengan Anti Backlink link apapun yang ada pada komentar a...
44 komentar
Baca selengkapnya

Perbedaan Windows 10 N, KN, Home, Pro, Enterprise dan VL

Perbedaan Windows 10 Pro dan Windows 10 Pro N? — banyak yang bertanya dengan pertanyaan itu, mungkin salah satunya ada kamu. Mana yang lebih bagus untuk dipilih dan apa maksudnya antara yang tidak ada N-nya dan yang ada N-nya. Memang Microsoft merilis beberapa edisi Sistem Operasi seperti pada Windows 10, ini tentunya memiliki alasan. Terkadang perbedaan ini akan membingungkan saat ingin mendownload, mau pilih yang mana windows 10 pro atau yang pro n. Ini juga sama di windows versi sebelumnya. Nah di artikel kali ini akan membahas tentang berbagai macam edisi Windows 10 dan mengetahui apa itu edisi Home, Pro, Enterprise, Education VL, N dan KN. Perbandingan setiap edisi Windows 10. Pilih mana Windows 10 atau Windows 10 N/KN Biar gak penasaran kita bahas dulu Apa itu Windows 10 N?. Windows 10 N adalah windows yang dirancang khusus bagi pengguna Eropa dan Swiss agar sesuai dengan hukum Uni Eropa. N berarti Not, merupakan Windows 10 yang "tidak disertakannya fitur atau aplikasi...
Posting Komentar
Baca selengkapnya

Mengatasi Item Data Terstruktur Hilang atau Tidak Valid pada Blog AMP

Sekarang Google memfokuskan konten dengan blog AMP pada pencarian mobile. Salah satunya dengan adanya validasi data terstruktur pada pengujian AMP milik google. Yang tidak valid akan ada " Missing or invalid structured data item " di bagian bawah, bagi yang akun google-nya di setting bahasa indonesia maka akan menggunakan peringatan "Item data terstruktur hilang atau tidak valid". Tapi ketika di cek di pengujian data terstruktur tidak ada error sama sekali. Setelah saya amati ternyata ada yang salah dalam penempatan schema, yang tentunya tidak sesuai pedoman. Tapi bagi yang sering berkunjung di blog kompi ajaib milik kang adhy akan mendapatkan penyelesaian masalah seputar blog. Salah satu contohnya yang dibahas di posting ini. Di blog kompi ajaib dalam Memperbaiki Item Data Terstruktur yang tidak valid menggunakan cara yang agak rumit, lalu bagaimana bagi yang belum terlalu paham dengan kode HTML. Tidak harus mengubah semua struktur data, seperti pada tutorial komp...
9 komentar
Baca selengkapnya