Membuat Widget Related Post Valid Amp
Cara Membuat Widget Related Post valid AMP Tanpa Javascript
-Widget merupakan salah satu elemen penting bagi sebuah Blog, khususnya Blogger. Dengan menampilkan widget, tampilan blog akan semakin menarik dan rapih mempermudah user untuk mencari sesuatu.
Banyak widget yang disediakan oleh Blogger.com, namun tidak ada widget yang berisi Related Posts. Tapi, banyak Blogger yang mengakali pembuatan widget Related Post dengan memakai javascript.
Jika template anda berbasis AMP HTML tentunya ini akan menciptakan blog anda menjadi tidak valid AMP. Karena penggunaan Javascript pihak ketiga tidak diperbolehkan dalam halaman AMP.
Tapi, hal ini ternyata dapat diakali dengan memanfaatkan komponen <amp-iframe> dan juga hosting file di Github. Dan demo widget Related Post ini dapat anda lihat di tamat artikel ini.
Banyak widget yang disediakan oleh Blogger.com, namun tidak ada widget yang berisi Related Posts. Tapi, banyak Blogger yang mengakali pembuatan widget Related Post dengan memakai javascript.
Jika template anda berbasis AMP HTML tentunya ini akan menciptakan blog anda menjadi tidak valid AMP. Karena penggunaan Javascript pihak ketiga tidak diperbolehkan dalam halaman AMP.
Tapi, hal ini ternyata dapat diakali dengan memanfaatkan komponen <amp-iframe> dan juga hosting file di Github. Dan demo widget Related Post ini dapat anda lihat di tamat artikel ini.
Related
Widget Related Post Valid AMP
Buka Editor template (Edit HTML) pada dashboard Blogger.com.
Pastikan anda sudah memasang komponen amp-iframe sebelum instruksi </head>. Jika belum, silahkan copy - paste instruksi ini:
Copy instruksi berikut ini di tamat artikel, atau sehabis selector Footer template anda.
Class footernya yaitu footer-info . Kaprikornus aku copy sehabis instruksi <div class='footer-info'>
Keterangan:
Untuk menciptakan style pada Heading Related Posts, silahkan copy CSS berikut ini di dalam <style amp-custom='amp-custom'>
Untuk mengakhiri proses, SAVE perubahan pada template anda.
Pastikan anda sudah memasang komponen amp-iframe sebelum instruksi </head>. Jika belum, silahkan copy - paste instruksi ini:
<script async='async' custom-element='amp-iframe' src='https://cdn.ampproject.org/v0/amp-iframe-0.1.js'></script>Copy instruksi berikut ini di tamat artikel, atau sehabis selector Footer template anda.
Class footernya yaitu footer-info . Kaprikornus aku copy sehabis instruksi <div class='footer-info'>
<div id='related-post'> <h4 class='relate'>Related Posts</h4> <amp-iframe src='https://cdn.rawgit.com/hafidm93/HTML/0a97af9b/relatedalinux.html?labels=<b:loop values='data:post.labels' var='label'><data:label.name/><b:if cond='data:label.isLast != "true"'>,</b:if></b:loop>&num=6&url=https://www.amp-blogger&pos=<data:post.url.canonical/>' frameborder='0' height='420' layout='fixed-height' sandbox='allow-scripts allow-same-origin allow-popups'></amp-iframe> </div>Keterangan:
- Ganti URL https://www.amp-blogger.com dengan url blog anda. Jika tidak diganti, maka widget akan error dan related posts tidak muncul.
- Pastikan anda sudah mengaktifkan SSL / HTTPS pada blog anda. Silahkan baca artikel Cara mengaktifkan SSL Blogger kalau belum mengaktifkannya.
Untuk menciptakan style pada Heading Related Posts, silahkan copy CSS berikut ini di dalam <style amp-custom='amp-custom'>
.relate { font-size: 20px; padding-top: 15px; border-bottom: solid 3px #019688; width: 23%; position: relative; margin: 0 0 10px; color: #444; font-weight: 500; letter-spacing: 1px; }Untuk mengakhiri proses, SAVE perubahan pada template anda.
Sumber https://www.merpatih.com/
