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.
<div id='related-post'><h4>Baca Juga</h4><amp-iframe src='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 != "true"'>,</b:if></b:loop>&num=5&url=https://www.mankoin.com&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.mankoin.com 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.com dengan blog yang digunakan.
Kemudian simpan code berikut (di bawah) kode postingan.
<div id='related-post'><h4>Baca Juga</h4><amp-iframe src='URL-HOSTING?labels=<b:loop values='data:post.labels' var='label'><data:label.name/><b:if cond='data:label.isLast != "true"'>,</b:if></b:loop>&num=5&pos=<data:post.url.canonical/>' frameborder='0' height='420' layout='fixed-height' sandbox='allow-scripts allow-same-origin allow-popups'></amp-iframe></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.com/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.
? – contoh: https://www.mankoin.com/?amp=1.Lalu untuk menambahkan dua parameter, setipa parameter dipisahkan dengan kode & – contoh: https://www.mankoin.com/?amp=1&m=1. Begitu juga parameter ketiga dan seterusnya harus di pisah dengan kode&.
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.
mang ko description nya ga muncul cuma judul postingan aja di artikel terkait
BalasHapusSudah saya update mas (perbaikan kesalahan). Jika butuh bantuan tanya aja...
HapusIni kok bisa pake komentar bawaan blogger gan?
BalasHapusIni bukan bawaan, sudah saya modif lebih ringan dan valid amp.
HapusHalo mas Arif Rahman, salam kenal. mau nanya mas... bagaimana dengan related post untuk blogger non AMP?
BalasHapusUntuk related post blogger non AMP nanti akan saya posting.
HapusMalah Gak Ada Gambarnya Mas
BalasHapusGambarnya muncul, mungkin salah setting. Blognya apa?.
Hapusbuat ngilangin new tab pas klik link gmna gan? kok gak ada setingannya?
BalasHapusMaaf new tab harus disertakan, jika tidak halaman akan terbuka di iframe.
HapusKalo tanpa thumb bisa ga mas??
BalasHapusTidak mas, belum saya setting.
HapusSekalian mau Tanya ganti Komen disqus ke blogger template amp gmana mas .
BalasHapusLebih baik tanya pada pembuat templatenya mas.
Hapuscara setting heightnya agak kurang jelas.. Mohon penjelasnnya Mas
BalasHapusJika amp-iframe telah di muat dan ada scrollnya maka tambahkan nilai pada amp-iframe sampai tidak ada lagi scroll.
Hapuslayout="fixed-height" scrolling="no"
HapusHello, very nice widget, thank you. How can I remove the description? I mean for Desctop. Thank you.
BalasHapusThe description will not appear if the size of the frame width is at least 600px
HapusOr you can host yourself manually, and remove the code ,g+="<span class='news-text'>"+relcuplikan[p]+" ... </span>".
Thank you. I already had place it in a narrow div 300px. :)
HapusOne more question please. Is it faster to host it in blogger (my non AMP blog) or is better to keep using your cdn staticaly? Thank you again.
Hapusif I, for non amp blogs just use blogger. if you use an amp-iframe, you have to host the file and it will run with lazy but that is according to your taste.
HapusYes, I saw it delays about 2-3 seconds, but I can expand it with only title. Thank you again.
Hapus