Memasang Widget Recent Post dengan Tanggal dan Komentar Blog Lebih Indah

CORETAN JAWA -  Melihat sebuah blog dengan widget recent pos yang terlihat tangal dan komentar bisa terlihat sangat indah, kali ini yang kita bahas adalah bagaimana cara memasang widget recent post dengan tanggal dan komentar.

Fungsi dari widget ini adalah untuk menampilkan postingan yang baru saja sobat post dengan thumbnail dan tambahan tanggal dan jumlah komentar, langkah - langkah nya silahkan simak di bawah 👊

Cara  Memasang Widget Recent Post dengan Tanggal dan Komentar Blog Lebih Indah

1. Masuk ke blogger sobat → Tata Letak ↦ Buat wigdet anyar lalu taruh kode di bawah ini dan simpan.

HTML<style scoped='' type='text/css'>

#recent-posts{color:#999;font-size:12px}

#recent-posts img{background:#fafafa;float:left;height:60px;margin-right:8px;width:60px;border-radius:4px}

#recent-posts ul{margin:0;padding:0}

#recent-posts ul li{margin:0 0 10px 0;padding:0 0 10px 0;border-bottom:1px solid rgba(0,0,0,0.1)}

#recent-posts ul li:last-child{border-bottom:0}

#recent-posts ul li a{display:block;color:#222;font-weight:700;text-decoration:none;font-size:14px;margin:0 0 10px 0;line-height:normal}

</style>

<div id='recent-posts'>

<script type='text/javaScript'>

var rcp_numposts=5;

var rcp_snippet_length=150;

var rcp_info='yes';

var rcp_comment='Comments';

var rcp_disable='T?t Nh?n xét';

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/AVvXsEhFSRbJvR4Nz5dZuR8cRYZT8Kgohyphenhyphen2n9XZbGHWcjpcN_Eggzq1JVfk-qNpxRndwunYEfK_iqsBelLwuPisiCdusFJoB_M9n06aZv-UAn3u1nvUPdO_R7WXXiB8gtoZtYUY7ispGqfe3eRVF/"};}};dw+='<li>';dw+='<img alt="'+rcp_posttitle+'" src="'+rcp_thumb+'"/>';dw+='<div><a href="'+rcp_posturl+'" rel="nofollow" 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>

• Demo

KETERANGANrcp_numposts=5; = Ganti angkan 5 dengan jumlah postingan yang akan ditampilkan.
var rcp_snippet_length=150; = Jumlah karakter isi artikel yang akan ditampilkan saat hover link judul postingan.
rcp_info='yes'; = Ketik no untuk menyembunyikan keterangan tanggal dan jumlah komentar.
rcp_comment='Comments'; = Nama judul tulisan dari jumlah komentar.

Sesuaikan widget dengan tema template sobat gunakan agar lebih elegant.


Demikian Cara  Memasang Widget Recent Post dengan Tanggal dan Komentar Blog Lebih Indah, Semoga Bermanfaat.