Cara Membuat Widget Postingan Terbaru di Blogger
January 19, 2020
Recent Post atau Artikel terbaru adalah sebuah Widget Artikel Terbaru yang memberikan informasi kepada para pengunjung blog bahwa ada sebuah artikel terbaru yang sudah di posting pada blog tersebut.
Widget Artikel Terbaru kali ini sudah Responsive dan memiliki tampilan Modern, widget artikel terbaru kali ini mirip atau sama dengan widget artikel terbaru buatan Mas Sugeng di Template VioMagz dan sama seperti yang digunakan di blog ini.
Widget Artikel Terbaru ini dibuat khusus untuk para pengguna atau platfrom Blogger saja. Bagi kamu yang memiliki blog AMP jangan berkecil hati. Baiklah tidak perlu berlama-lamalagi, Let's Start!!
Cara Membuat Widget Artikel Terbaru (Recnt Post) di Blogger
1. Login ke Blogger.com2. Pilih Template/Theme > Edit HTML
3. Copy dan Pastekan kode dibawah ini tepat diatas kode ]]></b:skin>
/* Widget Artikel Terbaru */4. Simpan Template/Tema
.artikel-terbaru ul li {
border-bottom: 2px dotted #efefef;
padding-bottom: 8px;
margin-bottom: 8px;
font-weight: bold;
}
.list-label-widget-content ul li, .LinkList ul li, .PageList ul li {
border-bottom: 2px dotted #efefef;
padding-bottom: 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;
}
.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";
}
5. Berikutnya, Pergi ke menu Layout/Tata Letak > Widget Sidebar > Tambahkan Gadget > HTML/JavaScript
6. Copy dan pastekan kode dibawah ini.
<div class='widget-content'>7. 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=8&alt=json-in-script&callback=artikelterbaru"></script>
</div>
</div>
Untuk menampilkan jumlah artikel terbaru du widget kamu dapat mengganti ?max-results=8 dengan keinginan anda sendiri anda cukup mengganti angkan 8 sesuai keiginan anda sendiri.
Sumber: Seperti yang sudah saya katakan diatas, script ini sama seperti yang ada di template Viomagz buatan Mas Sugeng. Dan saya sangat berterima kasih!
Baca Juga: Cara Membuat Widget Popular Post
Demikianlah Tutorial Blogger kali ini Cara Membuat Widget Artikel Terbaru Seperti Theme Viomagz. Bagi kamu yang menggunakan theme Viomagz cukup menggunakan kode HTMLnya saja, dan untuk kamu yang bukan menggunakan template Viomagz kamu bisa mengikut cara ini dari awal hingga akhir.
0 komentar