Cara Menciptakan Recent Post Dengan Thumbnail

Cara Membuat Recent Post dengan Thumbnail - Hi Guys! Recent Post yaitu widget pada blog yang menampilkan artikel terbaru yang biasanya dipasang pada sidebar blog. Dengan memasang Recent Post, maka pengunjung sanggup mengatahui tampilan postingan terbaru, sehingga artikel terbaru sanggup gampang dibaca oleh pengunjung blog.

Recent Post merupakan widget yang paling sering dipasang pada blog selain Popular Post, kedua widget ini menampilkan postingan yang paling sering dibaca dan postingan terbaru yang berfungsi sebagai isu kepada visitor untuk membaca beberapa artikel menarik lainnya.

Disini PC memakai widget recent post dengan Thumbnail atau gambar, tentu akan menambah perhatian mata pengunjung blog.

1. Login akun blogger anda.
2. Silahkan Pilih “Tata Letak” kemudian pilih “Tambah Gadget/Add Gadget” kemudian pilih “HTML/JavaScript”. Masukkan aba-aba berikut pada kolom yang tersedia.

<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=7; 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/AVvXsEg19jTXLmWXb6z9B21MIIGgeRzv_bgbdkOC7jMwbB1vD41zLxGhlwRoWFOLNN2SrM1H-2OnchhKeFF0Q6ZyZWERUY7rbWHJIafO_Zpuzfb-5-wY89NQHHLTKq7ApZ7DqYWhuF-uKTIpN6tj/"};}};dw+='<li>';dw+='<img alt="Cara Membuat Recent Post dengan Thumbnail  Cara Membuat Recent Post dengan Thumbnail" src="'+rcp_thumb+'"/>';dw+='<div><a href="'+rcp_posturl+'" rel="nofollow" title="Cara Membuat Recent Post dengan Thumbnail">'+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>

Jangan Lupa klik Simpan/Save.

Keterangan:
var rcp_numposts=7: Jumlah tampilan recent post

Baca juga: Cara Membuat dan Memasang Live Chat di Blog

Itulah cara menciptakan Recent Post dengan Thumbnail. Semoga bermanfaat.
Terimakasih.

Share this post