Ditulis oleh: Ditulis pada: 7/17/2019
Cara Merubah Sticky Ads Non AMP Pada Template Kompi Ajaib AMP v3 - Sebelumnya ada pengguna Template Kompi Ajaib AMP v3 yang menanyakan cara merubah sticky ads non AMP menjadi tidak lebar penuh seperti pada blog Kompi Ajaib sekarang.
Dasar sticky ads yang digunakan pada template Kompi Ajaib AMP v3 ini adalah dari postingan cara membuat sticky ads non AMP ala amp-sticky-ad ini.
Untuk merubah sticky ads non AMP pada Template Kompi Ajaib AMP v3 menjadi tidak lebar penuh seperti pada blog Kompi Ajaib sekarang, silahkan ikuti langkah berikut ini. Atau silahkan tonton video yang saya buat sekalian belajar ngoding untuk memodifikasi sticky ads ini sehingga jadi lebih mengerti dan menyenangkan.
Silahkan cari CSS berikut:
.sticky-ad{display:-webkit-box;display:-ms-flexbox;display:flex;-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:fixed;text-align:center;bottom:0;left:0;width:100%;z-index:995;max-height:104px;background-image:none;background-color:#fff;box-shadow:0 0 5px 0 rgba(0,0,0,.2);margin-bottom:0;padding-top:4px;display:none}Silahkan ganti dengan CSS berikut ini:
.sticky-ad{display:-webkit-box;display:-ms-flexbox;display:flex;-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:fixed;text-align:center;bottom:0;left:50%;width:736px;z-index:995;max-height:104px;background-image:none;background-color:rgba(255,255,255,.7);box-shadow:0 0 5px 0 rgba(0,0,0,.2);margin-bottom:0;padding-top:4px;display:none;margin-left:-368px}Kemudian cari lagi kode CSS berikut:
.sticky-ad-close-button{position:absolute;width:28px;height:28px;top:-28px;right:0;background-image:url("data:image/svg+xml;charset=utf8,%3csvg width='13' height='13' viewBox='341 8 13 13' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3e%3cg%3e%3cpath style='fill:%234F4F4F' d='M354 9.31L352.69 8l-5.19 5.19L342.31 8 341 9.31l5.19 5.19-5.19 5.19 1.31 1.31 5.19-5.19 5.19 5.19 1.31-1.31-5.19-5.19z'%3e%3c/path%3e%3c/g%3e%3c/svg%3e");background-size:13px 13px;background-position:9px;background-color:#fff;background-repeat:no-repeat;box-shadow:0 -1px 1px 0 rgba(0,0,0,.2);border:none;border-radius:12px 0 0;cursor:pointer}Silahkan ganti dengan CSS berikut ini:
.sticky-ad-close-button{position:absolute;width:28px;height:28px;top:-28px;right:0;background-image:url("data:image/svg+xml;charset=utf8,%3csvg width='13' height='13' viewBox='341 8 13 13' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3e%3cg%3e%3cpath style='fill:%234F4F4F' d='M354 9.31L352.69 8l-5.19 5.19L342.31 8 341 9.31l5.19 5.19-5.19 5.19 1.31 1.31 5.19-5.19 5.19 5.19 1.31-1.31-5.19-5.19z'%3e%3c/path%3e%3c/g%3e%3c/svg%3e");background-size:13px 13px;background-position:9px;background-color:rgba(255,255,255,.7);background-repeat:no-repeat;box-shadow:0 -1px 1px 0 rgba(0,0,0,.2);border:none;border-radius:12px 12px 0 0;cursor:pointer}Selesai.
Agar lebih mengerti, silahkan simak videonya berikut ini.
Oh... ada yang kelewat, silahkan cari CSS berikut dan kemudian silahkan hapus.
body.sticky,body.sticky #sidebar-wrapper{padding-bottom:100px}Semoga bermanfaat.