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 adalah AMP Sticky Ad. Iklan jenis ini akan tampil overlay pada bagian bawah layar. Tapi pengunjung bisa tetap menghilangkan iklan tersebut dengan menekan tombol close yang terdapat pada layout amp-sticky-ad.Disinilah masalahnya, yang membuat iklan sering diabaikan. Untuk itulah perlu memodifikasi layout-nya agar iklan terlihat lebih menarik. Dengan menggunakan CSS, hal tersebut tentu bisa dilakukan. Hanya dengan melakukan '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 adalah
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, kemudian cari
Maka tampilan button Close akan berubah seperti gambar di bawah ini:
Selanjutnya saya akan modifikasi tampilan border agar mirip dengan sticky ad pada Auto Ads AdSense. Copy dan tempelkan CSS berikut di bawah kode
Hasil seperti 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 adalah
amp-sticky-ad dan amp-sticky-ad-close-button agar tampilan mirip 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, kemudian cari
<style amp-custom='amp-custom'> . Copy kode CSS berikut ini untuk mengubah tampilan button close pada amp-sticky-ad, tempelkan setelah kode <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 seperti gambar di bawah ini:
Selanjutnya saya akan modifikasi tampilan border agar mirip dengan sticky ad pada Auto Ads AdSense. Copy dan tempelkan CSS berikut di bawah kode
<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 seperti 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: