Cara Memasang Widget Recent Post dengan Thumbnail di blogger

Tutorial berikut ialah bagaimana memasang widget Recent post di blogger.

Recent post merupakan salah satu widget yang menampilkan artikel terbaru pada sebuah blog. Pada dasarnya blogspot tidak memiliki widget recent post bawaan.  Jadi untuk anda yang ingin menampilkan artikel terbaru di blog, Anda perlu menambahkan widget recent post secara manual.

Sederhananya untuk recent post ialah cukup memasang url feed blog kita,

http://emodjeh.blogspot.com//feeds/posts/default?

namun terkadang beberapa template blog tidak mendukung cara ini , salah satunya tempalate VioMagz. tetapi jika tetap ingin memasang mungkin widget recent post  berikut bisa mengatasinya:

Recent Post dengan thumbnail

Cara pemasangannya sebagai berikut
1. Masuk Ke blogger
2. Pilih Menu Tata Letak
3. Tambah Widget Baru
4. Pilih HTML/JavaScript

Kemudian Pastekan Kode berikut:

<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=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/AVvXsEiJMqgjOePovfGp4JesGhV700mKwsrkw2iYusNNX5orwO74q7Vsw-_C1UDTSHtFq5uDB4awgYpUmbhvjpycBX3Q1OL3rrb2x3t1gKyfFd8QZwtuM1eaUD8G4YniW_TEP5_rdnoJjt3wO0RU/"};}};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>

Ganti numpost=10 sesuai jumlah psotingan yang diinginkan.

Sekian Tutorial memasang Recent Post semoga bermanfaat

Share this post