Cara Membuat Recent Post [Artikel Terbaru] Keren Bergambar Pensil

by
Recent post atau artikel terbaru adalah sebuah daftar link postingan terbaru dari sebuah blog/website. Recent post juga bisa berfungsi untuk menurunkan bounce rate.
Untuk menarik perhatian pengunjung agar mengklik recent post blog kita. Kalian perlu sesuatu yang unik dan menarik untuk dicari tahu.
Selain tampilannya menarik kamu juga harus memerhatikan kecepatan loading blog. Jangan sampai pagespeed blogmu jadi menurun bahkan anjlok karena memasang widget recent post yang terlalu berat.
Kali ini saya ingin membagikan cara membuat recent post yang unik dan menarik berlogokan pensil namun tetap ringan dan tidak memberatkan blog. 
Widget recent post ini sudah banyak digunakan oleh para mastah contohnya seperti pada blog mastimon.com jadi tidak perlu khawatir akan merusak blog milikmu.
Namun untuk Template Viomagz v3.1 (kurang lebih) recent post seperti ini sudah otomatis tersedia tinggal kalian pasang saja widgetnya. Namun, widget recent posts yang satu ini bisa kalian pasang di Viomagz versi lainnya bahkan bisa juga dipasang di template lain. Oke langsung saja praktekan cara berikut.

 

Cara Membuat Widget Recent Post Unik & Keren Dengan Berlogo Pensil 

Supaya tidak terjadi hal- hal yang tidak diinginkan. Cadangkan terlebih dahulu tema blog kamu. Caranya pergi ke Dashboard blogger > Tema > Cadangkan > Save.

Langkah pertama, jika kamu belum memasang Font Awesome di template kalian. Kamu harus memasang Font Awesome terlebih dahulu di blog milikmu. Agar ikon pensilnya bisa muncul pada widget recent postnya.

Jika Font Awesome telah terpasang. Setelah itu kalian masuk ke Dashboard blogger > Tema > Edit html. Lalu cari artikel terbaru/recent post/postingan terbaru dengan menekan ctrl + f terlebih dulu. Jika tidak ada cari “blogger css” dengan menekan ctrl +  f.
*Jika terdapat kode recent post dan sebagainya . Maka ganti kode CSS tersebut dengan kode dibawah ini.
*Jika tidak terdapat kode recent post dan sebagainya. Copy lalu paste kode dibawah ini dibawah blogger css

/* Artikel Terbaru */
.artikel-terbaru ul li {
border-bottom: 2px dotted $(footer.color);
padding-bottom: 8px;
margin-bottom: 8px;
font-weight: bold;
font-size: 15px;
}
.LinkList ul li, .PageList ul li {
border-bottom: 2px dotted $(body.link.color);
padding: 6px 0px;
}
.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;
color: $(body.link.color);
}
.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”;
}

Lalu simpan, Jika gagal menyimpan karena script error  cobalah mengganti kedua (label.border.color) dengan (label.color). Cobalah simpan kembali.

Setelah itu pergi ke Dashboard Blogger > Tata Letak > Tentukan tempat untuk menyimpan recent post > Pilih Html / Javascript > Pastekan kode dibawah ini.

<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=8&alt=json-in-script&callback=artikelterbaru”></script> </div>

Ganti max-results=8 dengan jumlah postingan terbaru yang kamu ingin munculkan. Contoh: max-results=10. Setelah itu klik simpan. Kemudian coba cek tampilan recent postnya di blog kamu.

Bagaimana, mudah sekali bukan caranya? Tapi untuk kamu yang masih belum berhasil tidak perlu sedih. Kamu bisa memberi komentar di bawah atau bisa juga dengan langsung Kontak Admin untuk lebih lanjutnya. Sekian artikel dari saya. Semoga bermanfaat untuk kalian. Terima kasih sudah berkunjung.