Membuat Daftar Post Terbaru di Blogger - auwoo

Secara default, Blogger (blogspot) tidak menyediakan widget khusus untuk menampilkan tulisan terbaru (recent post). Jika menggunakan widget feed, maka kita hanya bisa menampilkan maksimal 5 item saja. Untuk menampilkan daftar tulisan terbaru lebih dari 5 item maka kita perlu bantuan javascript.

Langkah-langkah Membuat Daftar Postingan di Blogspot

1. Masuk ke dashboard blogger > Layout > Add a Gadget > pilih HTML/Javascipt widget
2. Dibagian Title silakan tulis judul widget misal Post Terbaru
3. Dibagian Content, pastekan kode js berikut ini

<ul id="newpost"></ul>
<script type="text/javascript">
//<![CDATA[
var numposts = 10; function NewPosts(a){if(document.getElementById("newpost")){var e=a.feed.entry,title,link,content="",ct=document.getElementById("newpost");for(var i=0;i<numposts;i++){for(var j=0;j<numposts;j++){if(e[i].link[j].rel=="alternate"){link=e[i].link[j].href;break}}var title=e[i].title.$t;content+='<li class="newpost"><a href="'+link+'" title="'+title+'" target="_blank" rel="nofollow">'+title+'</a></li>'}ct.innerHTML=content}}var rcp=document.createElement('script');rcp.src='https://www.auwoo.net/feeds/posts/summary?alt=json-in-script&orderby=published&max-results='+numposts+'&callback=NewPosts';document.getElementsByTagName('head')[0].appendChild(rcp)
//]]>
</script>

PENTING: ganti tulisan auwoo.net dengan nama domain blog kamu. Gantu nilai 'var numposts' sesuai kebutuhan, untuk kode diatas akan menampilkan daftar 10 post terbaru.
4. Untuk styling bisa tambahkan kode css dibawah ini dan letakkan di atas kode js (langkah 3). Jangan lupa edit untuk menyesuaikan dengan template blogger kamu.

<style type="text/css">ul#newpost{list-style:none;margin:0;padding:0;padding-inline-start:20px;}#newpost li{list-style-type:disc; clear:both;border-bottom:1px solid #e3e3e3;word-break:break-word;padding:10px 0;margin:0;}#newpost li:last-child{border-bottom:0}#newpost li a{color:#000;text-decoration:none;font-size:14px}#newpost li a:hover{color:#415698;text-decoration:underline}</style>