Widget Blogger Dengan Thumbnail Untuk Recent Posts

Jika Anda sering menciptakan posting atau artikel gres dan menginginkan artikel terbaru selalu muncul sebagai update di blog Anda, maka Anda memerlukan widget Recent Posts. Untuk memunculkan artikel terbaru atau posting terkini (Recent Posts) dengan Thumbnail, silakan lakukan langkah-langkah berikut ini:

1. Masuk ke akun Blogger Anda. Pilih Blog Anda dan klik pada Layout/Tata Letak > Add Gadget/Tambah Gadget.

2. Lalu klik pada HTML/JavaScript.

3. Setelah itu copy paste instruksi HTML/JavaScript berikut:

<style scoped='' type='text/css'>
#recent-posts{color:#999;font-size:11px}
#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='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/AVvXsEgGdW6jLuSCPs5ObX1PuC_ITN-4Uhs0F8VF96l707r1f6VbGBktsfiCJraTlFvR4nV6IDKiI7GVDDiGRjdZdBnqut_Gcmaja5du4ZM8O3LDjrJC3U2qEK-ZAn1OzkLW0AdDD5EW2qfzz5Ld/"};}};dw+='<li>';dw+='<img alt=" atau artikel gres dan menginginkan artikel terbaru selalu muncul sebagai Widget Blogger dengan Thumbnail untuk Recent Posts" src="'+rcp_thumb+'"/>';dw+='<div><a href="'+rcp_posturl+'" rel="nofollow" title="Widget Blogger dengan Thumbnail untuk Recent Posts">'+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
Variabel warna orange sanggup diganti sesuai keinginan Anda.


Sumber http://patutandaketahui.blogspot.com/

Berbagi :