Cara Membuat Recent Post atau Artikel Terbaru Simple Dan Keren di Blog

Recent post atau artikel terbaru yang telah kita publish berguna agar saat pengunjung blog/web kita  membaca artikel dari blog mengetahui artikel terbaru apa yang telah kita buat, untuk itu kali ini saya akan membuat artikel tentang cara membuat recent post.

Pembuatannya cukup mudah dan tidak berbelit-belit, hanya memasang script dan menyimpannya dalam widget,. oh ya, widget recent post yang akan kita buat ini ialah recent post yang nantinya kita pasang di sidebar blog, nah kurang lebih seperti ini nantinya :

Bagaimana? cukup sederhana namun terlihat elegant kan? Oke, sekarang kita lanjut untuk membuatnya :

1. Login ke halaman bloger anda tentunya
2. Pilih Layout atau Tata Letak
3. Setelah masuk ke halaman Layout / Tata Letak, klik Add a Gadget (Tambahkan Gadget),. pilih pemambahan gadget pada element sidebar , karena kita akan memasang Recent Post di bagian sidebar blog
4. Setelah itu copy script dibawah ini :

<script type="text/javascript">
function showlatestpostswiththumbs(t){document.write('<ul class="recent-posts-container">');for(var e=0;e<posts_no;e++){var r,n=t.feed.entry[e],i=n.title.$t;if(e==t.feed.entry.length)break;for(var o=0;o<n.link.length;o++){if("replies"==n.link[o].rel&&"text/html"==n.link[o].type)var l=n.link[o].title,m=n.link[o].href;if("alternate"==n.link[o].rel){r=n.link[o].href;break}}var u;try{u=n.media$thumbnail.url}catch(p){s=n.content.$t,a=s.indexOf("<img"),b=s.indexOf('src="',a),c=s.indexOf('"',b+5),d=s.substr(b+5,c-b-5),u=-1!=a&&-1!=b&&-1!=c&&""!=d?d:"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjupJE2G3di1PoPzei_MUqyM-IcX-6X1qHRDX5H-J7BjukvRIc4DQ-JQVNIiA_Y9tbNF9hX_gwj3F7FzW_s3Jq5lAmX048zK8ehkF54P5VZjB77elscE_aD2esXI6yzKsaHbIkZP2bCdlKP/s1600/no-thumb.png"}var h=n.published.$t,f=h.substring(0,4),w=h.substring(5,7),v=h.substring(8,10),A=new Array;A[1]="Jan",A[2]="Feb",A[3]="Mar",A[4]="Apr",A[5]="May",A[6]="Jun",A[7]="Jul",A[8]="Aug",A[9]="Sep",A[10]="Oct",A[11]="Nov",A[12]="Dec",document.write('<li class="recent-posts-list">'),1==posts_date&&document.write('<div class="post-date">'+A[parseInt(w,10)]+" "+v+" "+f+"</div>"),1==showpoststhumbs&&document.write('<a href="'+r+'"><img class="recent-post-thumb" src="'+u+'"/></a>'),document.write('<div class="recent-post-title"><a href="'+r+'" target ="_top">'+i+"</a></div>");var g="",k=0;document.write('<div class="recent-posts-details">'),1==showcommentslink&&(1==k&&(g+=" <br> "),"1 Comments"==l&&(l="1 Comment"),"0 Comments"==l&&(l="No Comments"),l='<a href="'+m+'" target ="_top">'+l+"</a>",g+=l,k=1),1==readmorelink&&(1==k&&(g+=" | "),g=g+'<a class="readmorelink" href="'+r+'" class="url" target ="_top">Read more</a>',k=1),document.write(g),document.write("</div>"),document.write("</li>")}document.write("</ul>")}
</script>
<script type="text/javascript">
var posts_no = 5;
var showpoststhumbs = true;
var readmorelink = true;
var showcommentslink = true;
var posts_date = true;
</script>
<script src="/feeds/posts/default?orderby=published&alt=json-in-script&callback=showlatestpostswiththumbs"></script>
<noscript>Your browser does not support JavaScript!</noscript>
<link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'/>
<style type="text/css">
img.recent-post-thumb {padding: 2px; width:35px;height:35px;float:right;margin: -14px 0px 0px 5px; border: 1px solid #cea5ac; border-radius: 10%;}
.recent-posts-container {font-family: 'Oswald', sans-serif;  float: left;width: 95%;min-height: 70px;margin: 5px 0px 5px 0px;padding: 0;font-size:12px; background-color:#fafafa;}
ul.recent-posts-container li {padding:5px 0px;min-height:65px; list-style-type: none; margin: 0px 10px 5px -10px;}
ul.recent-posts-container {counter-reset: countposts;list-style-type: none;}
.recent-posts-container a { text-decoration:none; }
.recent-posts-container a:hover{color: #4DACE3;}
.post-date {color:#e0c0c6; font-size: 11px; }
.recent-post-title a {font-size: 13px; text-transform: uppercase; color: #5C4D4D;}
.recent-post-title { margin: 5px 0px; }
.recent-posts-details {border-top: 4px solid #AC707A; margin-top: 5px; padding-top: 5px;}
.recent-posts-details a{ color: #888;}
a.readmorelink {color: #4DACE3;}
</style>

Seletah itu Save, 

Note : 

• var showpoststhumbs = true; // Untuk mengatur apakah gambar dari artikel (lihat di recent post sebelah kanan terlihat ada gambar thumbnail) akan ditampilkan atau tidak. Jika ingin tetap ditampilkan nilai tetap true namun jika akan dihilangkan rubah ke false
• width: 95%; // Untuk mengatur lebar recent post, silahkan sesuaikan dengan kebutuhan..

Sekian tutorial Cara Membuat Recent Post Simple Dan Keren di Blog, semoga bermanfaat.

Sumber code : helplogger