» » Cara Membuat Widget Recent Post + Thumbnail + Tanggal + Jumlah Komentar

Cara Membuat Widget Recent Post + Thumbnail + Tanggal + Jumlah Komentar

Widget Recent Post, atau dalam bahasa Indonesia biasa disebut widget Artikel Terbaru merupakan salah satu jenis widget yang hampir sering dijumpai pada beberapa blog. Widget ini berfungsi untuk menampilkan daftar postingan-postingan terbaru yang ada di suatu situs atau blog. Jadi, ketika seseorang sedang membaca salah satu artikel kita, maka secara tidak langsung widget ini menawarkan kepada pembaca tersebut untuk membaca juga postingan-postingan terbaru di blog kita. 

Keberadaan widget recent post pada suatu blog memang cukup penting. Selain membuat tertarik pembaca, widget ini juga bisa meningkatkan Page View yang cukup signifikan bagi blog tersebut. Untuk itu, pada postingan kali ini saya ingin berbagi cara untuk membuat widget recent post keren yang disertai dengan thumbnail, keterangan tanggal dan jumlah komentar. Widget ini bisa anda taruh di bagian sidebar atau di tempat lain sesuai selera. Pastikan keberadaannya mudah terlihat oleh pengunjung agar kinerjanya lebih maksimal. 

Ohya, sebelumnya saya memang pernah membuat postingan tentang cara pemasangan widget recent post dengan thumbnail (Baca: Cara Membuat Widget Artikel Terbaru dengan Thumbnail). Bedanya, pada tutorial terdahulu widget hanya menampilkan gambar dan judul postingan saja. Sedangkan untuk kali ini, kita akan coba membuat widget recent post dengan tampilan lebih lengkap yakni disertai gambar, keterangan tanggal posting dan jumlah komentar. Contoh screenshotnya seperti di bawah ini:

Widget Recent Post

Bagaimana?. Jika anda tertarik, langsung saja simak langkah-langkah di bawah ini untuk cara pembuatannya. 

Memasang Widget Recent Post + Thumbnail + Tanggal + Jumlah Komentar

1. Buka akun blogger anda. 

2. Pilih menu layout (tataletak). 

3. Klik tambahkan gadget (add gadget) dan pilih html/ Javascript. 

4. Setelah terbuka, silahkan beri judul "Recent Post" atau Artikel Terbaru, kemudian letakkan kode berikut ini ke dalam kotak yang tersedia. 
<style scoped='' type='text/css'>
.sidebar h2{padding:10px;background:#222; color:#ff6;margin-bottom:1px} 
#recent-posts{padding: 7px; background: #fff;border:1px solid rgba(0,0,0,0.1);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=150;
var rcp_info='yes';
var rcp_comment='Comments';
var rcp_disable='No Comments';
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/AVvXsEhGbmw56Yakkn74acrF6A_vbjR83Hx4xQa_5QiNdQEj_JPJ_2emuOj6CRLXYIN-RmXFMAFI6uwyxwxAtVxhACorxV_zzlGyUcOtQo_uRdDtxelV58No7iDEMjMXmTJP6KosmQopeGdD6X8O/"};}};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>

Keterangan: 
  • Angka 10 untuk jumlah postingan yang hendak ditampilkan, silahkan atur sesuai selera. 
  • Jika ingin tampilan lebih sederhana hanya thumbnail dan judul saja, silahkan ubah yes menjadi no.
5. Simpan kembali dan lihat hasilnya. 

Sekarang blog anda pun telah memiliki widget Artikel Terbaru (Recent Post) dengan gambar yang telah dilengkapi dengan keterangan tanggal dan jumlah komentar. Semoga Bermanfaat.
 
Labels: Blogging

Thanks for reading Cara Membuat Widget Recent Post + Thumbnail + Tanggal + Jumlah Komentar. Please share...!

1 comments on Cara Membuat Widget Recent Post + Thumbnail + Tanggal + Jumlah Komentar

Terima kasih telah berkunjung ke blog saya, silahkan berkomentar dengan sopan. Maaf, Komentar berisi Link Aktif, Promosi Produk Tertentu, J*di, P*rn*, Komentar berbau SARA dan Permusuhan, tidak akan dipublish.