Cara Mudah Membuat Recent Post dengan Gambar di Blogger

Recent Post adalah salah satu widget yang paling sering digunakan para blogger yang berfungsi untuk menampilkan artikel terbaru dan biasanya dipasang dibagian samping blog atau sidebar blog. Tampilan recent post juga berbeda-beda, ada yang dengan gambar dan tanpa gambar. Ada juga yang menampilkan tanggal dan komentar juga, dan masih ada modal yang lainnya tergantung bloggernya sendiri.

Menurut saya sendiri, ini adalah widget yang cukup penting untuk blog. Hal itu agar artikel terbaru bisa dilihat oleh para pengunjung karena kebanyakan artikel terbaru belum tentu belum terindex oleh Google.

Nah sekarang, saya akan membagikan widget recent post  responsive dengan gambar. Jika mau silahkan ikuti recent post berikut ini :

Cara Mudah Membuat Recent Post dengan Gambar di Blogger


1. Silahkan login akun Blogger.
2. Pilih menu Tata Letak >> lalu Tambahkan Gadget >> HTML/JavaScript.
3. Silahkan beri judul Recent Posts lalu masukkan kode berikut 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=7;
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/AVvXsEhcW7StikBpGtc9Y9wCNQCIMsV-xoOoKz32LLdSdr3yX4_uRPoRbSUrKIvVgbmfQv1Z1GZNHD7tMChrHXi5CVbpmyYM2wVtv9zOQTKIdOq8TtAgiOqr4I64hHIGpU_Qiy00uu89rGsI8Tg2/"};}};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. Terakhir klik Simpan, kemudian klik simpan setelan pada menu tata letak agar bisa langsung terlihat di sidebar.

Keterangan:var rcp_numposts=7; adalah jumlah recent post yang ditampilkan, silahkan ganti sesuai dengan selera.

Oke, Mungkin segitu saja untuk artikel Cara Mudah Membuat Recent Post dengan Gambar di Blogger. Semoga kalian mendapatkan ilmu setelah membaca artikel ini, maaf apabila ada salah-salah kata maupun data. Jika ada yang kurang jelas silahkan tanyakan melalui komentar. Semoga bermanfaat dan Terima Kasih.