Cara Membuat Widget Recent Post dengan Tanggal dan Komentar

Cara Membuat Widget Recent Post dengan Tanggal dan Komentar - Widget Recent Post ini merupakan widget yang memiliki fungsi untuk menampilkan daftar postingan atau artikel yang terbaru pada blog sobat dengan thumbnail gambar serta dengan tambahan keterangan jumlah komentar dan gambar, contohnya seperti gambar di bawah ini, bisa di lihat kalau widget Recent Post terletak di bagian sidebar.

Silahkan sobat terapkan cara di bawah ini untuk membuat widget Recent Post dengan tanggal dan komentar.

Membuat Widget Recent Post dengan Keterangan Tanggal dan Komentar

Silahkan buka Blogger > Tata Letak > Buat Widget baru HTML/Javascript, kemudian Copy-Paste kode 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/AVvXsEgjgS4AgY61RwXHMO-J1R59uZAgyZBs6XPQYPRgN489168iqxIn9Z_1pbTQIDlqpYaJozRwRgyouAWl0KDhvti3DzC7smTAuzYwplhBX5gKu4YS2hwGhRSHzM_wx9tr_Y7HQWRESPd6FbYn/"};}};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>

rcp_numposts=5; = Ganti angka 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.

Sekarang silahkan Simpan dan lihat hasilnya pada blog sobat.

Sesuaikan kembali CSS atau tampilan widget agar sesuai dengan tema blog sobat.

Demikian Tutorial Cara Membuat Widget Recent Post dengan Tanggal dan Komentar, Selamat Mencoba.

Artikel Terkait

Cara Membuat Widget Recent Post dengan Tanggal dan Komentar

4/ 5

Oleh Unknown

Unknown 4:27 PM