Widget Related Post Valid Amp Blogger Di Footer
Cara Membuat Widget Related Post valid AMP Blogger di Footer tanpa Javascript
Widget merupakan salah satu elemen penting bagi sebuah Blog, khususnya Blogger. Dengan menampilkan widget, tampilan blog akan semakin menarik dan rapih.
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 final artikel ini.
Untuk mempercepat proses instalasi, aku sudah menciptakan dan mengupload file HTML di github yang nantinya akan kita gunakan untuk meng-embed widget Related Posts. Nantinya, anda hanya perlu mengganti URL menjadi alamat blog anda, tanpa harus mengupload file di github.
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 final artikel ini.
Untuk mempercepat proses instalasi, aku sudah menciptakan dan mengupload file HTML di github yang nantinya akan kita gunakan untuk meng-embed widget Related Posts. Nantinya, anda hanya perlu mengganti URL menjadi alamat blog anda, tanpa harus mengupload file di github.
Widget Related Post Valid AMP
Buka Editor template (Edit HTML) pada dashboard Blogger.com.
Pastikan anda sudah memasang komponen amp-iframe sebelum arahan </head>. Jika belum, silahkan copy - paste arahan ini:
Copy arahan berikut ini di final artikel, atau sehabis selector Footer template anda.
Contoh dalam template Alinux AMP, class footernya yaitu footer-info . Kaprikornus aku copy sehabis arahan <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 arahan </head>. Jika belum, silahkan copy - paste arahan ini:
<script async='async' custom-element='amp-iframe' src='https://cdn.ampproject.org/v0/amp-iframe-0.1.js'></script>Copy arahan berikut ini di final artikel, atau sehabis selector Footer template anda.
Contoh dalam template Alinux AMP, class footernya yaitu footer-info . Kaprikornus aku copy sehabis arahan <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.
