Friday, August 3, 2018

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.

Saya akan menjelaskan cara customize AMP Sticky Ad dengan menggunakan CSS di bawah ini.

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: 

Disqus Comments