Membuat Widget Artikel Terbaru pada Template VioMagz

Membuat widget Artikel Terbaru pada Template VioMagz - Pada waktu yang lalu Saya sudah membagikan artikel cara Membuat Widget Berlangganan Via Email Ala VioMagz. Dan pada kesempatan kali ini Saya akan coba posting cara membuat widget artikel terbaru pada template viomagz.

Widget artikel terbaru atau recent post akan memudahkan pengunjung saat pengunjung berada di halaman posting, jadi tanpa mengunjungi halaman homepage pun pengunjung sudah tahu apa artikel yang baru Anda publish.

Sebenarnya cara membuat widget artikel terbaru atau recent post di blog sudah banyak yang share. Namun apa salahnya jika saya post disini juga.

Nah, bagi Anda pengguna template VioMagz non AMP yang ingin membuat widget artikel terbaru pada sidebar blog Anda, bisa ikuti langkahnya berikut ini.

Cara Membuat Widget Artikel Terbaru pada Template VioMagz

Yang pertama, silahkan masuk akun blogger Anda.

Yang kedua, pada Menu pilih Layout kemudian pilih Add a Gadget, pilih HTML lalu 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=5&alt=json-in-script&callback=artikelterbaru"></script>

</div>

</div>

Kemudian klik Simpan

Slahkan cek apakan tampilannya sudah rapih atau belum. Jika tampilannya masih berantakan, silahkan masuk pada menu Theme kemudian pilih Edit HTML. Jika sudah, simpan CSS dibawah ini diatas kode </style>

.artikel-terbaru ul li {

border-bottom: 2px dotted #efefef;

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 #efefef;

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

}

Klik Simpan Theme

Nah, itulah artikel lkali ini tentang Cara Membuat Artikel Terbaru pada Template VioMagz

Semoga bermanfaat