Blog - Membuat Widget Recent Post

Cara membuat Widget Blog Recent Post simple dan bisa di custom tampilannya sesuai selera kita.

1. Pilih menu "Tata Letak".
2. Lalu pilih "Tambahkan Gadget" di sidebar.

3. Pilih "HTML/JavaScript".

4. Masukan Judul dengan Recent Post / apapun sesuai selera anda.
5. Setelah itu tinggal masukan kode di bawah ke dalam Konten.

<style>
.RecentPosts li a {
    color: #222222;
    font-family: 'Open Sans',arial,sans-serif;
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
}
.RecentPosts li a:hover {
    text-decoration: underline;
}
.RecentPosts li {
    border-left: 5px solid #242628;
    padding: 0 0 8px 15px;
}
</style>
<ul id="recent-posts" class="RecentPosts"></ul>
<script>
//<![CDATA[
var homePage = "http://serverrendi.blogspot.com/",
numPosts = 7;
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"><strong><a href="'+link+'" title="'+title+'" target="_blank">'+title+'</a></strong></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>

Ket :
Ubah var homePage = "http://serverrendi.blogspot.com/" dengan blog anda.
Ubah numPosts = 7 jika ingin merubah jumlah post yang ingin di tampilkan .

6. Terakhir "Simpan".

Tampilan Widget Recent Post

Jika ingin mempercantik tampilannya kita tinggal ubah ubah CSS nya di dalam tag <style>...</style>

Terima kasih
Enjoy your day !