Recent Posts With Thumbnails

Cara membuat recent post pada sidebar blogspot dilengkapi dengan thumbnail, tanggal entri dan jumlah komentar.

#recent-posts li{padding:0.25em;margin-bottom:5px;margin-left:-15px;text-indent:0;list-style:none;}
#recent-posts li a{text-indent:0;}
#recent-posts img{float:left;margin:5px 10px 0px 10px;width:72px; height:72px; padding:0; border: 3px solid #e0e0e0;border-radius:5px;-moz-box-shadow:0 0 5px 5px #f5f5f5;-webkit-box-shadow:0 0 5px 5px;box-shadow:0 0 5px 5px #f5f5f5;}
#recent-posts img:hover,.item-thumbnail img:hover{border: 3px solid #f90;-moz-transition:1.2s linear;-webkit-transition:1.2s linear;transition:1.2s linear;-o-transition:1.2s linear;box-shadow:0 0 5px 5px rgba(255,153,0,.7);-moz-box-shadow:0 0 5px 5px rgba(255,153,0,.7);-webkit-box-shadow:0 0 5px 5px rgba(255,153,0,.7);-moz-transform: scale(1.0) rotate(-360deg);-webkit-transform: scale(1.0) rotate(-360deg);-o-transform: scale(1.0) rotate(-360deg);-ms-transform: scale(1.0) rotate(-360deg);transform: scale(1.0) rotate(-360deg);}

<!--start<recent-post>-->
<div class='widget-content'>
<div id='recent-posts'>
<script type='text/javascript'>//<![CDATA[
var rcp_numposts = 5;
var rcp_snippet_length = 150;
var rcp_info = "yes";
var rcp_comment = "comments";
var rcp_disable = "disabled comments";
function recent_posts(json){var dw="";a=location.href;y=a.indexOf("?m=0");dw+="<ul>";for(var i=0;i<rcp_numposts;i++){var entry=json.feed.entry[i];var rcp_posttitle=entry.title.$t;if("content"in entry)var rcp_get_snippet=entry.content.$t;else if("summary"in entry)var rcp_get_snippet=entry.summary.$t;else var rcp_get_snippet="";rcp_get_snippet=rcp_get_snippet.replace(/<[^>]*>/g,"");if(rcp_get_snippet.length<rcp_snippet_length)var rcp_snippet=rcp_get_snippet;else{rcp_get_snippet=rcp_get_snippet.substring(0, rcp_snippet_length);var space=rcp_get_snippet.lastIndexOf(" ");rcp_snippet=rcp_get_snippet.substring(0,space)+"&#133;"}for(var j=0;j<entry.link.length;j++){if("thr$total"in entry)var rcp_commentsNum=entry.thr$total.$t+" "+rcp_comment;else rcp_commentsNum=rcp_disable;if(entry.link[j].rel=="alternate"){var rcp_posturl=entry.link[j].href;if(y!=-1)rcp_posturl=rcp_posturl+"?m=0";var rcp_postdate=entry.published.$t;if("media$thumbnail"in entry)var rcp_thumb=entry.media$thumbnail.url;else rcp_thumb="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgyL_S6f87a2F9sBsLhDJ4qSyfp7XqnRd-Fa5Jee0aSYOJ0e9XCoIExemOEoCufmSns_Nw30MuWBQyXoitVNkzQUvq8t2LeslAzZXkqAzTOWahLSAqo0QrAhxFGnxxrxr8efqNYvPtt02zZ/s1600/no-image-available.jpg"}}dw+= "<li>";dw+='<div class="post-img fl"><img alt="'+rcp_posttitle+'" src="'+rcp_thumb+'"/></div>';dw+='<div><a href="'+rcp_posturl+'" title="'+rcp_snippet+'">'+rcp_posttitle+"</a></div>";if(rcp_info=="yes")dw+="<span>"+rcp_postdate.substring(8,10)+"/"+rcp_postdate.substring(5,7)+"/"+rcp_postdate.substring(0,4)+" - "+rcp_commentsNum+"</span>";dw+='<div style="clear:both"></div></li>'}dw+="</ul>";document.getElementById("recent-posts").innerHTML=dw}
document.write('<script type="text/javascript" src="/feeds/posts/default?alt=json-in-script&max-results='+rcp_numposts+'&callback=recent_posts"><\/script>');
//]]></script>
<div class='clear'/>
</div></div>
<!--stop<recent-post>--></div>