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.
Cara ini berhasil saya terapkan di template viomagz milik mas Sugeng, jadi saya menyarankan menggunakan template tersebut.