✔ 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 ibarat gambar di bawah ini:
Selanjutnya saya akan modifikasi tampilan border supaya ibarat dengan sticky ad pada Auto Ads AdSense. Copy dan tempelkan CSS berikut di bawah aba-aba
Hasil ibarat 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:
Sumber http://ampidn.blogspot.com
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 ibarat 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 aba-aba CSS berikut ini untuk mengubah tampilan button close pada amp-sticky-ad, tempelkan sesudah aba-aba <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 ibarat gambar di bawah ini:
Selanjutnya saya akan modifikasi tampilan border supaya ibarat dengan sticky ad pada Auto Ads AdSense. Copy dan tempelkan CSS berikut di bawah aba-aba
<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 ibarat 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:
0 Response to "✔ Modifikasi Tombol Sticky Ad Adsense Pada Blogger Amp"
Posting Komentar