Blogger Related Post AMP Ringan Dengan Multi Label

Sekarang sudah banyak orang yang menggunakan blog amp. Untuk blogger masih belum support AMP, tapi walau belum support amp Blogger bisa dibuat support amp. Dalam hal related post dan comment sudah di atasi oleh Kang Ismet dan Adhy Suryadi agar support amp dengan menggunakan amp-iframe.

Update! sekarang blogger sudah bisa untuk HTTPS pada Custom Domain. Baca dan lihat tutotialnya di Blogger Mendukung Https untuk Custom Domain.

Dalam related post kebanyakan hanya menggunakan satu label seperti milik kompiajaib yang menggunakan FeedWind, bahkan saya belum tau untuk yang multi label. Sekarang akan membahas related post dengan label lebih dari satu (multi label) atau berlabel banyak.

Kisah pembuatannyaYang ini boleh dilewati!... 😉😏 Dalam pembuatan related post ini awalnya saya hanya mencoba-coba karena saya berfikir bahwa mungkin bisa untuk multi label dan ternyata hasilnya sukses. Dalam hal ini butuh waktu yang sangat lama karena saya juga masih belajar menggunakan javascript.

Pertamanya hanya 1 url dengan satu label dan 1 url lagi dengan dua label. Pos yang memiliki satu label menggunakan file hosting dengan script support 1 label saja dan yang memiliki dua label menggunakan file hosting dengan script support 2 label saja. Jadi pos yang memiliki satu label dan pos yang memiliki 2 label url hostingnya berbeda. Jika ingin yang menggunakannya akan kerepotan edit satu-persatu, apalagi saat menjelaskan di postingan.

Sebenarnya ingin share tapi kelihatan agak rumit, karena belum berpengalaman, akhirnya tidak ingin mempoting. Tapi setelah sudah lama kemudian saya mencoba otak-atik lagi dan hasilnya sukses dengan satu url file hosting bisa untuk banyak label. Dan akhir hasilnya ingin memposting tutorialnya.

Update! awalnya item yang ditampilkan bisa saja menampilkan halaman posting yang sedang dibuka. Pembaruan kali ini item related post tidak akan menampilkan halaman yang sedang dibuka. Intinya pilihan item related post di luar url yang sedang dibuka.

Cara membuat Artikel Terkait valid AMP dengan Multi Label

Itulah kisah yang akhirnya saya ingin share Related Post AMP Multi Label ini. Untuk kecepatan related post ini sudah cukup ringan.

Pastikan terdapat script amp-iframe dalam element <head>, Tapi jika tidak ada tambahkan scriptnya.

Script amp-iframe.

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

Bagi yang tidak ingin repot-repot menghosting filenya bisa menggunakan url hosting (github) yang telah disediakan. Salin kodenya di bawah kode postingan, atau mengganti kode related post lama dengan yang baru.

Berikut kodenya.

Active Select All
<div id='related-post'><h4>Baca Juga</h4>&lt;amp-iframe src=&#39;https://cdn.staticaly.com/gh/ManKoin/Hosting/accd1946/relatedpostssl.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=5&amp;url=https://www.mankoin.blog&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.mankoin.blog dengan url blog milikmu. Angka 5 adalah jumlah banyak tampilan yang akan muncul, bisa diganti sesuai keinginan. Akan tetapi jika lebih dari 5 maka akan terdapat scroll pada iframenya. Untuk menghilangkan scrollnya atur ukuran height 420 dan sesuai dengan tingginya.

Khusus Hosting Sendiri - Disarankan

Utamanya yang bisa script dan ini saya sarankan, karena selalu update dengan fitur lebih. Kalian bisa hosting sendiri di github, salin atau simpan kodenya berada di relatedpostsslmankoin, biar selalu update. Keterangan untuk menggunakannya.

Ganti kode url www.mankoin.blog dengan blog yang digunakan.

Kemudian simpan code berikut (di bawah) kode postingan.

Active Select All
<div id='related-post'><h4>Baca Juga</h4>&lt;amp-iframe src=&#39;URL-HOSTING?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=5&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>

Ganti URL-HOSTING dengan url relatedpost yang telah di hosting. Mengatur jumlah related postnya sudah dijelaskan di atas.

Mengatur Gambar/Thumbnail

Secara default gambar secara otomatis menggunakan lebar dan tinggi 72, parameter digunakan url gambar s72-c. Sekarang dapat mengatur ukuran gambar sesuai dengan keinginan. Caranya dengan menambahkan parameter size image (si) dan isinya sesuai parameter gambar.

Contoh: size gambar akan diubah dengan ukuran lebar 120 dan tinggi 100 maka tambakan parameter berikut si=w120-h100-c — contoh: https://cdn.staticaly.com/gh/ManKoin/Hosting/77105928/relatedpostsslmankoin.html?labels=AMP,Blogger,Widget,&num=3&si=w110-h80-c&pos=https://www.mankoin.blog/2017/07/related-post-amp-multi-label.html, dan secara otomatis parameter gambar s72-c akan diubah ke w120-h100-c. Dan tentunya jangan lupa untuk mengubah height amp-iframe.

Menambahkan parameter pada url menggunakan kode ? – contoh: https://www.mankoin.blog/?amp=1.

Lalu untuk menambahkan dua parameter, setipa parameter dipisahkan dengan kode & – contoh: https://www.mankoin.blog/?amp=1&m=1. Begitu juga parameter ketiga dan seterusnya harus di pisah dengan kode&.

Jika ada usul lain/saran bisa tulis di komentar.

Secara otomatis deskripsi tidak ditampilkan pada item related post, jika ukuran lebar frame sudah 600px ke bawah, seperti pada smartphone. Tujuannya supaya tinggi frame masih tetap sehingga tidak melakukan scroll.

Itulah Tutorial Membuat Related Post AMP Multi Label. Jika ada yang kurang atau ada yang di tanyakan silakan berkomentar. Dan jangan lupa share ke temen blogger kalian. Terimakasih telah berkunjung.

Tambahan: related post ini hanya untuk blog yang support https. Kenapa?.

Karena amp iframe hanya berjalan di https. Dan jika blog tidak mendukung https maka url feed menggunakan http. Dikarenakan feednya menggunakan http maka akan gagal dimuat, karena url amp iframe (cdn.rawgit.com) menggunakan https.

Bingung! jika related post diakses dengan http itu bisa saja. Tapi karena amp iframe hanya untuk https, jadi pemuatan feed related post http akan gagal.

Update!.

9/27/2018: perubahan tampilan warna link.

Artikel Menarik Lainnya

Komentar
Disqus