Cara Membuat Widget Postingan Terbaru di Blogger

Cara Membuat Widget Postingan Terbaru di Blogger - Selamat datang di IMAMKUNBLOG. Apa kabar sobat semuanya? Semoga kalian baik baik dan sehat selalu ya. Pada kesempatan kali ini saya akan membagikan lagi Tutorial Blogger cara membuat widget artikel terbaru seperti theme viomagz responsive di blogger.

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.com
2. Pilih Template/Theme > Edit HTML
3. Copy dan Pastekan kode dibawah ini tepat diatas kode ]]></b:skin>

/* Widget Artikel Terbaru */
.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";
}

4. Simpan Template/Tema

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

7. Klik Simpan!

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.