Cara Membuat Recent Posts Sederhana di Blogspot

Tampilan blog yang sederhana akan jauh lebih menarik minat pengunjung ketimbang tampilan yang terlalu ramai. Ramai bisa saja dari segi pewarnaan yang terlalu banyak menggunakan warna berbeda atau penggunaan widget yang berlebihan.

Selain mengurangi kecepatan loading blog, penggunaan widget berlebihan juga tidak enak dipandang mata. Olehnya itu, kali ini Blogooblok akan memberikan satu tutorial penggunaan widget recent posts yang sederhana.

(Baca Juga: Cara Floating Facebook Social Bookmark

Meski sederhana, namun recent posts ini cukup memukau karena bisa menyesuaikan diri dengan tema blog. Contohnya bisa dilihat pada sidebar blog ini, atau lihat gambar berikut ini:

Cara membuatnya sederhana, cukup ikuti langkah-langkahnya berikut ini.

Pertama-tama silahkan copy dan paste script berikut ini kedalam sidebar blogspot Anda. Angka 5 yang ditandai merah silahkan diganti sesuai dengan jumlah postingan yang ingin ditampilkan.

<script>
//<![CDATA[
function showlatestposts(json){document.write('<ul id="recent-posts">');for(var i=0;i<5;i++){var entry=json.feed.entry[i];var posttitle=entry.title.$t;var postsurl;if(i==json.feed.entry.length)break;for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='alternate'){postsurl=entry.link[k].href;break;}}
document.write('<li class="recent-posts">');document.write('<a href="'+ postsurl+'" target ="_top" title="'+ posttitle+'">'+ posttitle+'</a>');document.write('</li>');}
document.write('</ul>');};
document.write("<scr" + "ipt type=\"text/javascript\" src=\"/feeds/posts/default?orderby=published&alt=json-in-script&callback=showlatestposts\"></scr" + "ipt>");
//]]>
</script>

Setelah itu, masuk ke bagian Edit HTML Anda dan paste kode berikut ini tepat diatas </head>.

<style type='text/css'>
#recent-posts{
width:auto;
padding:0 10px;
margin:0 auto;
border:1px solid #ddd;
}
#recent-posts ul,#recent-posts li {
list-style:none;
}
#recent-posts a{
text-decoration:none;
}
#recent-posts li{
border-top:1px solid #ddd;
padding:6px 0
}
#recent-posts li:first-child{
border-top:none;
}
</style>