Cara Membuat Widget Recent Post Gambar Thumbnail dengan Komentar

Widget Recent Post Gambar Thubnail dengan Komentar dan Tanggal - Recent Post atau artikel terbaru merupakan salah satu widget yang banyak dicari pembaca. Walaupun sebenarnya hal itu agak menggelikan, karena artikel terbaru biasanya pasti berada di home page atau halaman awal sebuah blog atau situs.

Recenr post dengan gambar thumbnail dan Tanggal serta jumlah komentar

Recent post dengan gambar thumbnail disertai dengan tanggal atau komentar memang menjadi tips kali ini. Selain memberikan kemudahan dalam melakukan penelusuran di blog kita, juga memberikan daya tarik tersendiri karena disertai dengan informasi tanggal penulisan artikel dan komentar. Walau ada juga sih para blogger yang mengatakan kurang baik menampilkan tanggal posting artikel kita.

Apapun itu, semua dikembalikan pada pembaca situs ini.

Cara Memasang Widget Recent Post dengan Gambar Thumbnail

Caranya tidak rumit kok, sama saja dengan membuat widget baru pada blog. Tips desain blog kali ini ane sadur dari ARD. Berikut langkah-langkahnya:

1. Masuk akun blogger sobta

2. Pilih tata letak (layout) > add widget (tambah widget) > HTML/JavaScript

3. Copas kode di bawah ini ke dalam widget baru tersebut

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

Note:

• Ganti angka pada kode warna merah di atas. Angka 5 menunjukkan banyaknya artikel yang akan di tampilkan
• angka 150 menunjukkan banyaknya karakter huruf
• "yes" untuk menampilkan tanggal pembuatan artikel
• "comment" menunjukkan nama judul tulisan
• silakan ganti sesuai keinginan sobat

4. Save

Mudah kan?

Demikian tips desain blog siang ini, yakni tentang Cara Membuat Widget Recent Post Gambar Thubnail dengan Komentar. Semoga bermanfaat. Salam.