Widget Random Post AMP Blogger dengan Thumbnail dan Bisa Custom

Widget random posts AMP HTML merupakan bagian yang tidak terpisahkan dari sebuah blog dimana fungsinya bisa untuk mempercantik tampilan blog ataupun untuk memancing agar reader membaca artikel yang lainnya.

Sebenarnya sudah banyak widget random post yang sudah di share teman-teman blogger lainnya, namun pilihan untuk mengcustomnya tidak ada, sobat hanya bisa terima apa adanya dengan widget yang telah dibuat. Sedangkan widget yang tinggal pasang melalui Add Gadget pada blogger tidak support dengan AMP HTML.

Nah, untuk itu disini admin akan share cara membuat dan memasang widget random post AMP pada blog sobat yang pastinya bisa sobat custom atau modif sesuka hati sobat. Solusinya yaitu dengan menggunakan RSS Widget dari Mikle.
Baca juga :
Kelebihan dari widget ini yaitu sangat mudah dimodif seperti mengganti warna/ukuran font, menyertakan thumbnail dll. Untuk tatacara pemasangan Widget Random Post AMP Blogger bisa sobat simak tutorial dibawah ini.


1. Daftar dan buat akun di https://feed.mikle.com
Bisa langsung daftar menggunakan akun facebook atau gmail sobat.

2. Setelah selesai daftar maka akan muncul tampilan seperti gambar dibawah. Silahkan sobat pilih RSS Feed.


3. Masukan Feed URL dengan alamat domain atau blog sobat kemudian klik ikon tambah (+)


4. Atur ukuran widget sobat atau biarkan default
  • Sesuaikan Height (tinggi) widget dengan template blog sobat, misal 400px 
  • Untuk ukuran Width (lebar) biarkan tetap responsive.

Untuk memilih jenis tampilan postingan, sobat dapat mengaturnya di General >> Style
  • Thumbnail tampilan dengan gambar + judul 
  • Text/HTML tampilan hanya judul

5. Untuk menambahkan judul widget, sobat dapat mengisinya pada Feed Title. Tapi sobat juga dapat mengosongkannya.


6. Klik Save and Get code Kemudian klik Get iFrame version 
Salin atau copy kode src seperti pada gambar dibawah


Baca juga :

7. Masuk ke akun Blogger sobat
Dashboard >> Style >> Add a Gadget
Tambah widget baru berupa HTML/JavaScript

8. Kemudian salin kode amp-iframe dibawah ini


<amp-iframe

src="https://feed.mikle.com/widget/v2/xxxxx/" frameborder='0' height='402' layout='fixed-height' sandbox='allow-scripts allow-same-origin allow-modals allow-popups'>

</amp-iframe>


Ganti kode src="https://feed.mikle.com/widget/v2/xxxxx/" dengan kode src widget sobat sebelumnya.
Sesuaikan ukuran height, misal height pada widget mikle 400px, maka height pada amp-iframe adalah 402px (ditambah 2px)

Kemudian save dan lihat hasilnya

Share this with short URL:

Artikel Menarik Lainnya:

Use parse tool to easy get the text style on disqus comments:
Show Parser Hide Parser