Cara Memasang Recent Posts Widget di Blog

Cara Memasang Recent Posts Widget di Blog

Recent Posts Widget atau Widget Artikel Terbaru sangat diperlukan sebuah blog untuk memunculkan artikel terbaru pada blog tersebut. Sayangnya blogspot/blogger tidak menyediakan fitur recent posts. Jadi, untuk menambahkan recent posts widget pada blog Anda, Anda perlu menambahkannya secara manual.

Kali ini saya akan memberikan trik sederhana untuk menampilan recent posts widget pada blog Anda. Widget ini sangat simpel karena tidak menampilkan thumbnail posts. Jadi yang tampil hanya judul artikelnya saja. Dengan kesederhanaan widget ini, pastinya tidak akan mempengaruhi load time blog Anda.

Cara Memasang Recent Posts Widget di Blog

1. Buka Blogger > Tata Letak > Tambahkan Gadget > HTML/JavaScript > Kemudian letakkan kode di bawah ini ke dalam widget tersebut.

<style scoped="scoped" type="text/css">
ul#recent-posts{list-style:none;margin:0;padding:0}li.recent-posts{display:block;clear:both;overflow:hidden;list-style:none;border-bottom:1px solid #e3e3e3;word-break:break-word;padding:10px 0;margin:0;}
li.recent-posts:last-child{border-bottom:0;}
li.recent-posts a{color:#444;}li.recent-posts a:hover{color:#444;text-decoration:underline}
</style>
<ul id="recent-posts"></ul>
<script>
//<![CDATA[
var homePage = "http://www.wahyupratama.com",
numPosts = 5;
function recentPosts(a){if(document.getElementById("recent-posts")){var e=a.feed.entry,title,link,content="",ct=document.getElementById("recent-posts");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="recent-posts"><a href="'+link+'" title="'+title+'" target="_blank" rel="nofollow">'+title+'</a></li>'}ct.innerHTML=content}}var rcp=document.createElement('script');rcp.src=homePage+'/feeds/posts/summary?alt=json-in-script&orderby=published&max-results='+numPosts+'&callback=recentPosts';document.getElementsByTagName('head')[0].appendChild(rcp);
//]]>
</script>

Keterangan :

  • http://www.wahyupratama.com : Ganti dengan URL blog Anda.
  • numPosts : Jumlah postingan yang akan ditampilkan

2. Simpan widget dan lihat hasilnya.

Sekian trik cara memasang widget recent posts di blog, semoga artikel ini bermanfaat untuk Anda.

Leave a Reply