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 menggunakan javascript.

Jika template anda berbasis AMP HTML tentunya ini akan membuat blog anda menjadi tidak valid AMP. Karena penggunaan Javascript pihak ketiga tidak diperbolehkan dalam halaman AMP.

Tapi, hal ini ternyata bisa diakali dengan memanfaatkan komponen <amp-iframe> dan juga hosting file di Github. Dan demo widget Related Post ini bisa anda lihat di akhir artikel ini.

Untuk mempercepat proses instalasi, saya sudah membuat 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 kode </head>. Jika belum, silahkan copy - paste kode ini:

 <script async='async' custom-element='amp-iframe' src='https://cdn.ampproject.org/v0/amp-iframe-0.1.js'></script>

Copy kode berikut ini di akhir artikel, atau setelah selector Footer template anda.

Contoh dalam template Alinux AMP, class footernya adalah footer-info . Jadi saya copy setelah kode <div class='footer-info'>

 <div id='related-post'>
 <h4 class='relate'>Related Posts</h4>
 &lt;amp-iframe src=&#39;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 != &quot;true&quot;'>,</b:if></b:loop>&amp;num=6&amp;url=https://www.amp-blogger&amp;pos=<data:post.url.canonical/>&#39; frameborder=&#39;0&#39; height=&#39;420&#39; layout=&#39;fixed-height&#39; sandbox=&#39;allow-scripts allow-same-origin allow-popups&#39;&gt;&lt;/amp-iframe&gt;
 </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 jika belum mengaktifkannya.

Untuk membuat 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. 

Bagikan Artikel ini