Cara Membuat Recent Post atau Postingan Terbaru Seperti Blog Mastimon | Masriyo

Masriyo.com – Dalam kesempatan kali ini saya ingin berbagi cara membuat recent post keren seperti yang ada pada blog mastimon, karna tentu saja blogger sendiri tidak menyediakan widget recent post atau postingan terbaru seperti itu. Nah.. bagi anda yang berminat mencoba nya agar blog anda bisa terlihat keren seperti milik mastimon simak tutorial berikut ini.
Namun Perlu anda ketahui bahwa keunggulan dari script recent post seperti mastimon itu hanya muncul pada mode desktop atau komputer, jika anda melihat script itu pada mode seluler maka recent post tersebut biasanya tidak akan muncul. Namun hal itu sangat bagus karna akan bisa mempercepat loading blog anda jika ada pengunjung anda yang menggunakan seluler / handphone. Berikut ini tutorial membuat postingan terbaru seperti mastimon:
Cara Membuat Postingan Terbaru / Recent Post Seperti Mastimon
#1. Sobat login dulu ke blogger.com
#2. Setelah itu sobat langsung ke dashboard blog klik menu ” Tema” kemudian klik menu “Edit HTML“.

#3. Copy semua kode CSS dibawah ini dan pastekan di dalam kode CSS lain di letakan dalam edit HTML. 

 /* 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. Sobat cari kode Blogger CSS didalam kotak edit HTML dengan cara copy tulisan Blogger CSS setelah itu tekan tombol keyboard laptop secara bersamaan (Ctrl + f) maka akan muncul tinggal sobat pastekan semua kode diatas tadi, setelah itu klik ” Simpan “
#5.  Sobat kembali lagi ke menu dashboard blog, kemudian klik menu ” Tata Letak ” ⟹ Tambahkan Gadget.



#6. Setelah itu cari” HTML / JavaScript ” dan klik tanda  +


#7. Pada kolom judul sobat tulis ajha ” Artikel Terbaru ” dan setelah itu sobat masukan kode HTML pada kotak dibawahnya. 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>

Mudah bukan .. oke mungkin cukup sampai disini tutorial Cara Membuat Postingan Terbaru atau Recent Post Seperti Blog Mastimon, semoga bisa bermanfaat buat anda. Terimakasih