Cara Membuat Widget List Artikel Terbaru di Sidebar

masnasih.com - Di Postingan ini saya ingin share cara membuat widget list artikel terbaru di sidebar. Jadi artikel baru ini berbentuk seperti popular post yang biasa kita temukan di sidebar. Nah jadi kita bisa menggunakan kode script untuk memanggil data judul artikel yang baru di posting di blog untuk ditampilkan di sidebar.

Cara Membuat Widget List Artikel Terbaru di Sidebar

Manfaat Widget Artikel Terbaru

Manfaat dari adanya widget artikel terbaru ini adalah bisa menambah view lebih cepat karena ditampilkan di sidebar (dengan catatan udah ada pengunjungnya ya). Sebenernya widget artikel terbaru ini bisa diletakkan dimana saja, namun disini saya hanya akan menyampaikan di sidebar saja. Baiklah langsung saja simak tutorialnya.

Step Membuat Widget List Artikel Terbaru

1. Copy kode berikut ini

<div class='satu'><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><style>.satu{padding-right:20px}.artikel-terbaru ul li {border-bottom: 2px dotted #efefef;paddingbottom: 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";}</style>

2. Masuk ke tata letak blogger

3. Add widget di sidebar

4. Pilih html/javascript

5. Paste kode yang sudah dicopy, dan

6. Simpan.

Selesai. Untuk demo bisa cek di sidebar blog ini. Demikian cara membuat widget list artikel terbaru di sidebar. Semoga bermanfaat.

Baca Artikel Blogging Lainnya.