Cara Membuat Widget Recent Post Keren

Erapemuda.Com - Menampilkan Widget Postingan Terbaru atau biasa kita kenal dengan sebutan Recent Post itu sangat penting sebab memudahkan pengunjung untuk mengetahui apa postingan terakhir kita. Terdapat banyak sekali Widget yang bisa kita gunakan mulai dari hanya tulisan saja sampai dengan menggunakan thumbail gambar. Dengan fitur ini maka pengunjung akan betah berlama lama untuk membaca tulisan kita.

Pada gambar diatas merupakan Widget Template yang keren seperti milik Mas Sugeng. Jika versi sebelumnya hanya menampilkan tulisan tetapi tidak ada batasan garis dan icon pensil pada kepan kalimatnya. Tampilan Recent Post ini saya lihat pada versi terbaru mulai 2.4 sampai saat ini sudah versi 3.1. Banyak yang belum tau bagaimana cara membuatnya.

Pada postingan kali ini  saya bukan membuatkan untuk widget denga kode saya sendiri tetapi saya ambilkan Kode CSSnya dan kode HTML untuk menampilkan Postingan terbaru tersebut. Caranya cukup mudah dan tidak menambah beban berat pagespeed Blog. Tampilannya cukup unik dan menarik walaupun sekilas terlihat sederhana karena tidak menggunakan Gambar.

Cara Membuat widget Recent Post Keren

Langkah 1 : 

Silahkan kalian masuk ke Daskboard Blogger kalian lalu pilih Tema => Edit HTML => Letakkan kode CSS dibawah ini tepat dimana Kode CSS lainnya diletakkan. Cari saja Kode "Blogger CSS" dan letakkan kode dibawah ini tepat dibawah CSS Tersebut. Jangan lupa Save

/* 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";
}

Langkah 2 : Selanjutnya masuk ke Tata Letak => Tambahkan Ganget

Langkah 3 : Klik tanda + pada pilihan HTML/JavaScript

Langkah 4 : Tuliskan pada kolom judul "Artikel Terbaru" dan masukkan Kode HTML pada konten dibawahnya. Terakhir klik Simpan. 

<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>

Angka berwarna merah menunjukan jumlah banyaknya artikel yang di tampilkan.

Itulah tutorialnya, Cukup mudah buka cara membuat Recent Post atau widget Postingan Terbaru di Blog yang sangat keren. Jika kalian masih kebinggungan kalian bisa tanyakan melalui kolom komentar. Selamat mencoba dan semoga berhasil dan Terima Kasih