Cara Membuat Widget Recent Post Dengan Gambar, Keterangan Waktu & Komentar

Setelah sebelumnya saya membagikan artikel tentang cara membuat widget recent post multi color, dan widget artikel terbaru yang super ringan. Kali ini saya juga akan memberikan cara membuat widget yang sama, yaitu widget recent post dengan gambar, keterangan waktu dan komentar.

Bedanya dari widget recent post sebelumnya, widget ini terlihat simple tanpa warna, jadi sangat cocok bagi kalian yang tidak menginginkan warna yang rumit. Widget ini terbilang cukup ringan sehingga sobat tidak perlu takut untuk memasang widget recent post yang satu ini.

(Baca juga : Cara Membuat Widget Recent Post Multi Color Keren di Blogger)

Di widget recent post ini juga sudah di sediakan beberapa fitur diantaranya pengaturan jumlah artikel yang akan di tampilkan, pengaturan tampilan waktu di buat artikel, dan tampilan jumlah komentar masuk pada artikel tersebut.

Nah, bagi sobat yang ingin tahu cara pemasangannya, ikuti langkah-langkah dari saya berikut ini.

Cara Memasang Widget Recent Post Dengan Gambar, Keterangan Waktu & Komentar

• Langkah pertama masuk ke akun Blogger sobat
• Pilih menu Tata Letak, pilih lokasi widget yang ingin di tampilkan, kemudian Tambahkan Gadget, pilih HTML/JavaScript
• Masukan Judul widget, kemudian masuan kode di bawah ini tepat di kolom Konten

<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=10;
var rcp_snippet_length=200;
var rcp_info='yes';
var rcp_comment='Komentar';
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/AVvXsEgGKydU14GaozlzlKhyPk4haTbMzTJYKzQDDZZGHTs5YSrZLm9h0ADVb6-wXl3zmt6-nWyjJ3NXRVwAAMPTBj6cyywRbWQDcbbZLbVKBdlLZy6FqQvhyOlB-5p3ILbuZ4W31llvPVKfBYTB/"};}};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>

• Pengaturan :
• Silahkan ganti angka 10 dengan jumlah artikel yang ingin sobat tampilkan
• Silahkan ganti angka 200 dengan jumlah karakter yang sobat ingin tampilkan
• Silahkan ganti yes dengan no, jika sobat tidak ingin menampilkan keterangan waktu dan jumlah komentar
• Silahkan ganti Komentar dengan kata yang sobat inginkan
• Setelah selesai mengatur pilih Simpan
• Jika berhasil maka widget recent post akan tampil seperti ini.

(Baca juga : Cara Membuat Widget Artikel Terbaru Super Ringan di Blog)

Demikian tutorial singkat dari saya mengenai cara membuat widget recent post dengan gambar, keterangan waktu dan komentar. Jika ada pertanyaan mengenai cara memasangnya, silahkan masukan di kolom komentar.

Terima kasih sudah berkunjung di blog Tutorial Umum. Untuk tutorial yang lainnya mengenai cara memasang widget blog, silahkan tetap kunjungi blog Tutorial Umum.

Share this