Assalamu’alaikum Warahmatullahi Wabarakaatuh,
Halo Sobat Mas Rizky, berjumpa lagi ya di Website yang sama, dalam kesempatan kali ini admin Masrizky.web.id akan berbagi dengan judul pada postingan artikel ini
Membuat Random Post pada AMP HTML
Membuat random post pada template Blogger berbasis AMP HTML bisa menjadi cara yang efektif untuk meningkatkan interaksi pembaca dengan konten blog Anda.
AMP (Accelerated Mobile Pages) adalah framework yang dikembangkan oleh Google untuk membuat halaman web yang dioptimalkan untuk kecepatan di perangkat mobile.
Dengan menambahkan fitur random post, Anda dapat memberikan pengalaman yang lebih dinamis dan menarik bagi pengunjung blog Anda.
Langkah pertama dalam membuat random post adalah dengan menambahkan skrip JavaScript yang akan memilih postingan secara acak dari blog Anda.
Karena AMP HTML memiliki keterbatasan dalam penggunaan JavaScript, Anda harus menggunakan komponen AMP yang tersedia, seperti amp-list dan amp-mustache.
Pertama, Anda perlu memastikan bahwa data postingan Anda tersedia dalam format JSON. Ini bisa dilakukan dengan menyertakan URL feed JSON dari Blogger Anda.
Berikut adalah contoh implementasi sederhana:
Sebagai mana judul, pastinya random post ini akan mengacak postingan yang ditampilkan. Di sini saya akan berbagi 2 Style :
Style DroidPluss
<amp-iframe expr:src='"https://cdn.rawgit.com/masrizky/mr-html/master/random-posts2.html?url=" + data:blog.homepageUrl' frameborder='0' height='320' layout='responsive' resizable='resizable' sandbox='allow-scripts allow-same-origin allow-modals allow-popups' width='600'>
<div aria-label='Related Posts' overflow='' role='button' tabindex='0'>Related Posts</div>
</amp-iframe>
Simpan kode tadi di mana saja, di area bawah postingan. Kalau menggunakan Kompi Design Template lebih mudah di atas </b:if> sebelum </article> penempatannya seperti gambar di bawah. (Apabila menggunakan template berbeda, sesuaikan saja)
Style Kompi Design
<amp-iframe expr:src='"https://cdn.rawgit.com/KompiAjaib/amp/master/random-posts.html?url=" + data:blog.homepageUrl' frameborder='0' height='320' layout='responsive' resizable='resizable' sandbox='allow-scripts allow-same-origin allow-modals allow-popups' width='600'>
<div aria-label='Related Posts' overflow='' role='button' tabindex='0'>Related Posts</div>
</amp-iframe>Penempatannya sama seperti pada Style Droid Pluss, di area Bawah postingan / disesuaikan.
