Cara Membuat Widget Recent Post di Blog

Widget Recent Post adalah widget yang menampilkan Postingan yang baru saja anda terbitkan dan terlihat dalam suatu daftar yang kita tampilkan di sisi sidebar blog fungsinya tidak lain hanya untuk mempercantik tampilan blog anda di mata pengunjung dan juga agar pengunjung tertarik lagi mengunjungi blog kita.

Widget recent post ada berbagai tampilan yang unik dan menarik tetapi di artikel saya kali ini akan membagikan widget recent post yang terlihat elegant dan simple, jadi widget ini tidak akan memberatkan blog anda. Dan untuk membuat widget recent post ini anda dapat mengikuti langkah - langkah yang akan saya berikan di bawah ini :

1. Masuk terlebih dahulu ke menu tata letak di blog anda lalu pilih Tambahkan Gadget.

2. Lalu pilih HTML/JavaScript.

3. Dan copy terlebih dahulu kode yang saya berikan di bawah ini :

<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/AVvXsEhD3Hob6M2s64i_UwODvJr9JWdVMSea-QJPAaHgBk2slQA_x0hMdWO8ijDNyN6Fy9DsJvfIpCBbGJx7r9Fyc4z1pfH54vtdAX6Q2JIosjEWGFr3ZK8QS1JcX5Aw5Quyd9UYPustJXsNPEJ0/"};}};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>

4. Lalu tempelkan kode di atas ada kolom seperti di bawah ini.

5. Lalu Save.

Setelah langkah - langkah di atas anda lakukan, anda dapat mengunjungi blog anda untuk melihat hasilnya. Dan mungkin sekian tutorial dari kcaturdev semoga bermanfaat.