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 diharapkan supaya pengunjung gampang melihat yang baru. Banyak sekali Widget yang dapat kita gunakan mulai dari hanya goresan pena saja hingga dengan memakai thumbail gambar. Dengan fitur ini maka pengunjung akan betah berlama usang untuk membaca goresan pena kita.

Ini yaitu Widget milik Template VioMagz milik Mas Sugeng. Jika versi sebelumnya hanya menampilkan goresan pena tetapi tidak ada batasan garis dan icon pensil pada kepan kalimatnya. Tampilan Recent Post ini aku lihat pada versi terbaru mulai 2.4 hingga ketika ini sudah versi 3.1. Banyak yang menanyakan ke aku bagaimana sih cara menciptakan wiget tersebut mas ?

Disini aku bukan menyebarkan untuk sahabat tetapi aku ambilkan Kode CSSnya dan instruksi HTML untuk menampilkan Postingan terbaru tersebut. Caranya cukup gampang dan tidak menambah beban berat pagespeed Blog. Tampilannya cukup unik dan menarik walaupun sekilas terlihat sederhana alasannya yaitu tidak memakai 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 kemudian pilih Tema >> Edit HTML >> Letakkan instruksi CSS dibawah ini sempurna dimana Kode CSS lainnya diletakkan. Cari saja Kode "Blogger CSS" dan letakkan instruksi dibawah ini sempurna 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 gampang buka cara menciptakan Recent Post atau widget Postingan Terbaru di Blog sama menyerupai tampilan milik Template VioMagz. Jika kalian masih kebinggungan dapat melihatnya melalui Tutorial yang aku upload di Youtube. Selamat mencoba dan biar berhasil. Baca Juga : Widget Postingan Terbaru dengan thumbail kecil dan cantik.

Vidio Youtube Cara buat Recent Post unik hanya Tulisan

Bagikan Artikel ini