Modifikasi Tombol Sticky Ad Adsense Pada Blogger Amp
Custom AMP-Sticky-Ad dengan CSS di AMP Blogger template
Jenis iklan tersukses pada template Blogger valid Google AMP yaitu AMP Sticky Ad. Iklan jenis ini akan tampil overlay pada bab bawah layar. Tapi pengunjung sanggup tetap menghilangkan iklan tersebut dengan menekan tombol close yang terdapat pada layout amp-sticky-ad. Disinilah masalahnya, yang menciptakan iklan sering diabaikan. Untuk itulah perlu memodifikasi layout-nya supaya iklan terlihat lebih menarik. Dengan memakai CSS, hal tersebut tentu sanggup dilakukan. Hanya dengan melaksanakan 'overide' pada selector amp-sticky-ad, maka tampilan akan berubah.
Pada amp-sticky-ad, selector yang terdapat pada amp.css diantaranya
Yang akan saya coba modifikasi yaitu
Pastikan anda sudah memasang iklan amp-sticky-ad dengan ukuran height 150px. Baca artikel ini: Cara Pasang AMP Sticky Ad
Buka EDIT HTML pada dashboard Template Blogger anda, lalu cari
Maka tampilan button Close akan berubah menyerupai gambar di bawah ini:
Selanjutnya saya akan modifikasi tampilan border supaya menyerupai dengan sticky ad pada Auto Ads AdSense. Copy dan tempelkan CSS berikut di bawah instruksi
Hasil menyerupai gambar di bawah:
Untuk melanjutkan ke proses akhir, klik save. Untuk melihat apakah tampilan berubah, silahkan akses blog anda di smartphone.
Semoga bermanfaat :)
Baca lainnya:
Pada amp-sticky-ad, selector yang terdapat pada amp.css diantaranya
.amp-sticky-ad, .amp-sticky-ad-close-button dan .amp-sticky-ad-top-padding .Yang akan saya coba modifikasi yaitu
amp-sticky-ad dan amp-sticky-ad-close-button supaya tampilan menyerupai dengan sticky ad pada Auto Ads Google AdSense.Pastikan anda sudah memasang iklan amp-sticky-ad dengan ukuran height 150px. Baca artikel ini: Cara Pasang AMP Sticky Ad
Buka EDIT HTML pada dashboard Template Blogger anda, lalu cari
<style amp-custom='amp-custom'> . Copy instruksi CSS berikut ini untuk mengubah tampilan button close pada amp-sticky-ad, tempelkan sesudah instruksi <style amp-custom='amp-custom'>./* Amp sticky Close Button */ .amp-sticky-ad-close-button{position:absolute;visibility:hidden;width:28px;height:28px;top:-28px;margin:auto;left:0;background-image: url(data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2ZXJzaW9uPSIxLjEiIHZpZXdCb3g9IjAgMCAxMjkgMTI5IiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCAxMjkgMTI5IiB3aWR0aD0iMjRweCIgaGVpZ2h0PSIyNHB4Ij4KICA8Zz4KICAgIDxwYXRoIGQ9Im0xMjEuMywzNC42Yy0xLjYtMS42LTQuMi0xLjYtNS44LDBsLTUxLDUxLjEtNTEuMS01MS4xYy0xLjYtMS42LTQuMi0xLjYtNS44LDAtMS42LDEuNi0xLjYsNC4yIDAsNS44bDUzLjksNTMuOWMwLjgsMC44IDEuOCwxLjIgMi45LDEuMiAxLDAgMi4xLTAuNCAyLjktMS4ybDUzLjktNTMuOWMxLjctMS42IDEuNy00LjIgMC4xLTUuOHoiIGZpbGw9IiMwMDAwMDAiLz4KICA8L2c+Cjwvc3ZnPgo=);background-size:13px 13px;background-position:50% center;background-repeat:no-repeat;background-color:#969595;box-shadow:0 0 5px 0 rgba(0,0,0,.2);border:none;width:80px; border-radius: 50px 50px 0 0;}Maka tampilan button Close akan berubah menyerupai gambar di bawah ini:
Selanjutnya saya akan modifikasi tampilan border supaya menyerupai dengan sticky ad pada Auto Ads AdSense. Copy dan tempelkan CSS berikut di bawah instruksi
<style amp-custom='amp-custom'>/* DIV AMP-STICKY-AD */ amp-sticky-ad[visible]{border-top-style: solid; border-top-color: #969595; border-top-width: 10px;}Hasil menyerupai gambar di bawah:
Untuk melanjutkan ke proses akhir, klik save. Untuk melihat apakah tampilan berubah, silahkan akses blog anda di smartphone.
Semoga bermanfaat :)
Baca lainnya:
