Cara Membuat Widget Postingan Terbaru di blog
Recent Post atau yang biasa disebut postingan terbaru pada sebuah blog sangatlah diperlukan agar para pembaca mudah melihat apa saja postingan yang terbaru dari blog tersebut. Dari sekian banyak widget Postingan Terbaru atau Recent Post yang bisa digunakan mulai dari menggunakan thumnail gambar hingga hanya berbentuk tulisan saja. Dengan adanya fitur ini maka pembaca akan betah membaca isi blog dan tentunya akan melengkapi isi blog kita.
Pada template VioMagz karya Mas Sugeng pada versi sebelum widget ini hanya menampilkan tulisan dan tanpa icon pensil pada depan kalimatnya.
Untuk itu jika kalian ingin membuat widget recent post yang simple namun elegant bisa mengikuti cara buat widget recent post dibawah ini. Sebelumnya terimakasih untuk Mastimon yang sudah berbagi kode CSS dan HTML di sebuah tulisan pada blog beliau.
Cara Membuat Widget Postingan Terbaru di blog
Pada langkah pertama silahkan kalian masuk ke dashboard blogger - Template - Edit HTML - Lalu letakan kode CSS berikut ini tepat dibawah Blogger CSS, lalu save template. Untuk mempermudah dalam mengedit kode HTML pada template blogger di smartphone silahkan baca tipsnya Cara Mudah Mengedit HTML Tema Blogger di HP Android
.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:
Selanjutnya langkah kedua pada menu tata letak silahkan klik Tambahkan Gadget.
Maka akan muncul popup silahkan klik Tambahkan HTML/JavaScript.
Tambahkan kode HTML berikut ini pada kolom yang telah disedikan. Setelah itu 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>
Nah cukup mudah bukan cara membuat widget postingan terbaru, Selamat mencoba.