Cara Membuat Baca Juga di Blog Valid AMP

Cara Membuat Baca Juga di Blog Valid AMP - Postingan kali ini berawal dari salah satu kata kunci yang tak terduga masuk ke blog saya yaitu "memasang baca juga di blog valid amp", padahal saya belum pernah sama sekali membuat postingan dengan kata kunci tersebut. Akhirnya saya memutuskan untuk membuat postingan "Membuat Baca Juga di Blog Valid AMP", agar para pengunjung mendapatkan kata kunci yang di inginkannya.

"Baca Juga" menjadi komponen atau widget yang wajib ada pada template keluaran terbaru, karena widget ini dapat membuat pageview blog anda menjadi meningkat dengan tampilan yang khas ditengah postingan.


Kebanyakan widget Baca Juga ini biasanya akan terpasang secara otomatis pada bagian tengah postingan dengan menampilkan beberapa link yang berkaitan dengan postingan tersebut, namun hal itu akan membutuhkan javascript tambahan yang membuat widget tersebut tidak valid amp lagi. Disini saya akan membuat widget Baca Juga yang tidak membutuhkan javascript tambahan, yang membuat widget tersebut menjadi valid amp, namun dalam pemasanganya harus dilakukan secara manual, mulai dari memberikan link dan letak widget dalam postingan.

Widget Baca Juga ini telah saya terapkan di template terbaru saya, yaitu Alpha AMP Template. Yang tampilannya kurang lebihnya seperti ini :

Cara Membuat Baca Juga di Blog Valid AMP

Simpan CSS berikut pada custom-style template blog anda.

/* baca juga by www.kangkimin.com */
.bacajuga {width:90%;border:1px solid #7f5cf7;margin:25px 0 10px;padding:5px 15px 0px;position:relative;border-radius:3px;}
.bacajuga:before {display: block;content:"Baca Juga :";text-align:center;border-radius:3px;width:100px;background:#fff;position:absolute;border:1px solid #7f5cf7;left:15px;top:-15px;color: #7f5cf7;}
.bacajuga ul {padding-left:20px;}
.bacajuga ul li {border-bottom:1px dashed #7f5cf7;line-height:1.75em;}

Edit warna sesuai keinginan anda

Kemudian untuk menampilkan baca juga di postingan (HTML Mode), silahkan gunakan kode HTML dibawah ini, dan pastikan anda menempatkan kode tersebut di tempat yang benar, bisa ditengah postingan, maupun ditangah agak keatas maupun agak kebawah, agar tidak bentrok dengan iklan adsense bila anda memasang amp-auto-ads.

<div class="bacajuga">
<ul>
<li><a href="https://www.kangkimin.com/">Disini tempat menaruh link</a></li>
<li><a href="https://www.kangkimin.com/">Harus dipasang secara manual</a></li>
<li><a href="https://www.kangkimin.com/">Semoga kalian suka dengan widget ini</a></li>
</ul>
</div>

Lebih singkatnya, intinya anda hanya tinggal membuat list yang sudah dikasih link, lalu bungkus list tersebut dengan <div class="bacajuga">.

Sekian postingan singkat saya mengenai Cara Membuat Baca Juga di Blog Valid AMP. Semoga dapat bermanfaat bagi anda semua, selamat mencoba ^_^.