Cara Membuat Widget Artikel Terbaru (Recent Post) Seperti Blog Mastimon.com

Melex.ID - Bagaimana cara membuat widget postingan terbaru atau biasa orang menyebutnya artikel terbaru (recent post) seperti di blognya mastah mastimon.com? Pertanyaan yang panjang sekali. Namun kali ini saya akan jelaskan kepada teman teman semua.


Tampilan Recent Post sama seperti mastimon
Tampilan Recent Post sama seperti mastimon

Pengertian Artikel Terbaru/Postingan Terbaru (Recent Post)

Artikel terbaru atau postingan terbaru merupakan sebuah fitur yang menyajikan artikel yang masih fresh dan baru di tulis dan diterbitkan oleh pemilik suatu blog.

Apa manfaat menggunakan widget Postingan terbaru (Recent post) di blog?

Banyak, bagi pengunjung setia blogmu, misalkan mereka ingin tahu apa saja sih informasi terbaru yang akan didapat saat melihat blogmu.

Nah kalau buat kamu yang punya blog  manfaatnya tentu bisa mengurangi rasio bounce atau yang biasa disebut pengunjung langsung pergi setelah membaca artikel yang dicari.

Baca Juga : Cara Mudah Mengatasi Thumbnail Viomagz Tidak Muncul di Homepage

Cara Membuat Widget Recent Post Seperti Mastimon

  • Buka Dashbord Blogger kalian
  • Masuk ke bagian template Edit HTML
  • Cari kode "Blogger CSS" di html
  • Letakkan kode di bawah ini tepat di bawah kode "Blogger CSS"
/* Artikel Terbaru */
.artikel-terbaru ul li {
border-bottom: 2px dotted $(label.border.color);
padding-bottom: 8px;
margin-bottom: 8px;
font-weight: 500;
}
.list-label-widget-content ul li, .LinkList ul li, .PageList ul li {
border-bottom: 2px dotted $(label.border.color);
padding-bottom: 5px;
}
.artikel-terbaru ul li:before, .list-label-widget-content ul li:before, .LinkList ul li:before, .PageList ul li:before {
content: "\f14b";
font-family: FontAwesome;
font-style: normal;
font-weight: normal;
text-decoration: inherit;
margin-right: 6px;
}
.artikel-terbaru ul li:before {
content: "\f14b";
}
.list-label-widget-content ul li:before {
content: "\f07b";
}
.LinkList ul li:before {
content: "\f14c";
}
.PageList ul li:before {
content: "\f249";
}
  • Silahkan Klik simpan, langkah selanjutnya buka menu Tata Letak.
  • Pada Bagian Sidebar sebelah kanan Pilih "Tambah Gadget
  • Pilih tambah pada "HTML/JavaScript"
  • Masukkan kode di bawah ini pada kolom HTML/JavaScript tersebut dan beri judul "Artikel Terbaru"
<div class='artikel-terbaru'><script>
function artikelterbaru(e){document.write("<ul>");for(var t=0;t<e.feed.entry.length;t++){for(var r=0;r<e.feed.entry[t].link.length&&"alternate"!=e.feed.entry[t].link[r].rel;r++);var n="<li><a href="+("'"+e.feed.entry[t].link[r].href+"'")+'">'+e.feed.entry[t].title.$t+"</a> </li>";document.write(n)}document.write("</ul>")}
</script>
<script src="/feeds/posts/summary/?max-results=10&alt=json-in-script&callback=artikelterbaru"></script>
</div>
  • Terkahir silahkan Simpan Gadget Tersebut.

Coba kalian lihat widgetnya di blog kalian? Apakah kalian berhasil membuat widget recent post sama seperti blog punya mastimon.com. kalau berhasil silahkan bagikan pengalamanmu kepada teman teman blogger. 

Catatan:
Cara ini berhasil saya terapkan di template viomagz milik mas Sugeng, jadi saya menyarankan menggunakan template tersebut.

Terimakasih sudah berkunjung di blog saya. Salam blogger Indonesia.

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2