Cara membuat widget postingan terbaru (Recent Post) ala mastimon.com

Cara Membuat Recent Post ( Postingan Terbaru ) Mudah Seperti Blog Mastimon. Widget recent post yang biasa berada di salah satu menu Blog yaitu Tata Letak berfungsi untuk menampilkan postingan terbaru artikel pada blog kamu.

Perlu kamu ketahui juga, jangan terlalu banyak memasang widget di blog karena hal itu dapat mengurangi kecepatan pada blog kamu. Seperti contoh Blog Mastimon, beliau hanya memasang widget recent post di sidebar blog.


Karena para blogger indonesia sering mengikuti template blog Mas Timon disini saya akan membagikan sedikit tutorial yaitu Cara Membuat Recent Post ( Postingan Terbaru ) Mudah Seperti Blog Mastimon.

Nah, Berikut adalah salah satu cara tips ngeblog dari Mastimon.com terbaru 2020. Cara membuat recent post diblog:

1. Login terlebih dahulu ke Blogger.com
2. Terlihat Dashboard blog pilih menu " Tema " kemudian pilih lagi menu " Edit HTML" seperti contoh gambar dibawah ini.



3. Copy kode CSS dibawah ini dan Pastekan didalam kotak edit HTML, tepat dibawah kode Blogger CSS ( contoh ada di nomor 4 ).

 /* 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";
}
4. Cari kode Blogger CSS didalam edit HTML dengan cara menggunakan tombol keyboard ( Ctrl + F ) supaya mudah


5. Jika sudah klik " Simpan Tema " untuk menyimpan hasil penambahan kode.
6. Lalu pergi ke menu Tata Letak dan Tambahkan Gadget disalah satu sidebar



7. Cari menu kedua yaitu " HTML/JavaScript " dan pilih tombol +


8. Bagian judul bisa kamu tulis " Recent Post " dan tambahkan kode HTML di bagian bawah. Klik Simpan
<div class='artikel-terbaru'>
<script>
functionartikelterbaru(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>
<scriptsrc="/feeds/posts/summary/?max-results=10&alt=json-in-script&callback=artikelterbaru"></script>
</div>

9. Berikut Gambar untuk Contoh


10. Selesai.. Enjoyyyy.

Nah itulah tutorial membuat recent post seperti blog Mastimon yang sering dicari para blogger indonesia, Recent post ini cocok digunakan untuk template blogger viomagz buatan mas sugeng.

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel