Cara buat widget Recent Post (Postingan Terbaru) di Blog yang Unik

Mastimon.Com - Widget Postingan Terbaru atau biasa kita kenal sengan sebutan Recent Post pada sebuah Blog diperlukan supaya pengunjung mudah melihat yang baru. 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.

Ini adalah Widget milik Template VioMagz 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 menanyakan ke saya bagaimana sih cara membuat wiget tersebut mas ?

Disini saya bukan membuatkan untuk sobat 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. Baca Juga : Widget Recent Post dengan Tab Next dan Gambar.

Cara buat widget Recent Post (Postingan Terbaru) di Blog yang Unik

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

Lihat Gambar berikut ini :

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>

Cukup mudah buka cara membuat Recent Post atau widget Postingan Terbaru di Blog sama seperti tampilan milik Template VioMagz. Jika kalian masih kebinggungan bisa melihatnya melalui Tutorial yang saya upload di Youtube. Selamat mencoba dan semoga berhasil. Baca Juga : Widget Postingan Terbaru dengan thumbail kecil dan cantik.

Vidio Youtube Cara buat Recent Post unik hanya Tulisan

Berbagi :