Cara Membuat Widget Recent Post Ringan Di Blog

Recent post atau bisa di sebut populer postingan merupakan fitur berfungsi menampilkan  artikel yang terpopuler yang sering di baca oleh pengunjung. di semua blog pasti mempunyai recent post ini agar memudahkan pengunjung leluasa melihat artikel yang ingin mereka baca. widget sederhana ini juga dapat menimbulkan dampak positif untuk kemajuan blog anda, walaupun simple tetapi banyak manfaat yang bisa di ambil.

Tampilan recent post banyak jenisnya seperti ada gambar dan tulisan yang menarik pengunjung untuk mengeklik. pada artikel ini saya akan membagikan script recent post ringan dan elegan untuk anda, jadi tidak memerlukan jaringan yang kencang untuk load widget ini. saya mengambil sebagian script nya oleh theme viomag menjadi desain ulang.

Lihat Juga : Cara Memasang Tag Keyword Otomatis Agar Artikel SEO

Cara Memasang Widget Recent Post Terbaru

1. Theme > Edit HTML, cari </style> dengan cara CTRL+F.
2. Salin dan paste script css di bawah ini, tepat di atas </style>.

/* Artikel Terbaru */
.artikel-terbaru ul li {
border-bottom: 2px dotted #d0e0e3;
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 #d0e0e3;
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";
} 

3. Simpan themplate.
4. Buka menu Tata letak > tambah widget, lalu salin dan pastekan script di bawah ini kedalamnya dan save.

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

Lihat Juga : Cara Membuat Tampilan Blog Menjadi Mode Malam

Demikianlah, tutorial cara membuat dan memasang widget populer postingan terbaru dan ringan. semoga bermanfaat untuk anda.

Surya Seorang mahasiswa yang senang membagikan informasi yang sudah saya dapatkan. Informasi yang saya tulis blog ini, sesuai pengalaman saya dari pertama blog.

Berbagi :