Cara Memasang Widget Artikel Terbaru Di Blogger Ringan dan Simpel

Halo sobat Gimenz Network, bagaimana kabar sobat semua? semoga baik - baik saja ya.
pada postingan kali ini saya akan membagikan Cara Memasang Widget Artikel Terbaru Di Blogger Ringan dan Simpel.
Widget ini bisa memudahkan pengunjung blog sobat untuk membaca artikel atau postingan terbaru di blog sobat.
Widget ini merupakan bawaan dari template VioMagz, tetapi bagi orang awam seperti saya ini juga akan kesulitan menemukan cara memasangnya, karena menggunakan kode html yang mungkin tidak di sertakan pada panduan pemasangan di blognya mas sugeng.
Jadi saya bagikan tutorial nya di blog ini.
langsung saja sobat simak dengan cermat tutorial di bawah ini.

Cara Memasang Widget Artikel Terbaru Di Blogger Ringan dan Simpel

Sebelum memulai pemasangan, perlu di ketahui bahwa cara ini menggunakan font awesome, apa itu font awesome dan bagaimana cara memasang nya ? Silahkan sobat baca postingan saya tentang Cara Memasang Font Awesome di Blogger

Langkah pertama sobat pasang dulu kode css Widget Artikel Terbaru, pastikan sobat sudah login ke Dasbor Blogger milik sobat, lalu masuk ke Tema kemudian pilih Edit Html.

Jika sudah silahkan copas kode di bawah ini dan pastekan tepat di atas  ]]></b:skin> .

/* Artikel Terbaru */
.artikel-terbaru ul li {
border-bottom: 2px dotted #efefef;
padding-bottom: 8px;
margin-bottom: 8px;
font-weight: bold;
}
.LinkList ul li, .PageList ul li {
border-bottom: 2px dotted #efefef;
padding: 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;
color: #4a733c;
}
.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";

tetapi jika sobat sudah menggunakan template VioMagz, sobat tidak perlu lagi memasang kode css ini, karena sudah bawaan dari template VioMagz itu sendiri.

Langkah kedua adalah memasang widget artikel terbaru nya. Sobat masuk ke Menu Tata Letak, kemudian sobat klik pada bagian Tambahkan Gadget dan pilih HTML/JavaScript.

silahkan sobat copas code di bawah 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>

pada nomor yang saya beri warna biru di atas merupakan jumlah artikel yang akan di tampilkan, sobat bisa menggantinya sesuai selera sobat.

Gadget HTML

Jika sudah, sobat Simpan dan lihat hasilnya. jika berantakan mungkin ada kesalahan kode atau langkah yang terlewat, silahkan sobat ulangi dari awal, atau bisa sobat tanyakan di kolom komentar di bawah. jika sobat ingin melihat demonya, bisa sobat lihat di bagian kanan atas di blog saya ini.

Bagikan Artikel ini