Cara Menampilkan Recent Post di Blog

Cara Menampilkan Recent Post di Blog
Cara Menampilkan Recent Post di Blog

 

Cara Menampilkan Recent Post di Blog dengan Gambar – Salah satu fitur yang ada di blogger adalah Widget recent post yang merupakan salah satu widget yang untuk menampilkan artikel terbaru yang biasanya dipasang pada bagian sidebar blog tersebut. Banyak sekali model atau ragam variasi tampilan widget recent post diantaranya recent post dengan gambar, dengan tambahan thumbnail atau potongan gambar, tanggal dan komentar, dan beberapa modifikasi lainnya yang lebih terlihat menarik di blog Anda.

Di antara para blogger sering bertanya, mengapaa hampir setiap blog itu terdapat widget recent post? Tentu dengan tujuan utama para blogger agar semua artikelnya dapat terbaca oleh pengguna pengunjung blog tersebut dan memudahkan dalam menemukan artikel terbaru. 

Pada artikel kali ini saya akan berbagi kode html Widget recent posts dengan tambahan gambar thumbnail agar terlihat menarik namun tetap fast loading.

Ikuti langkah-langkah berikut ini. 

  • Silahkan login dengan akun Blogger.
  • Pilih menu Tata Letak >> lalu Klik Tambahkan Gadget >> HTML/JavaScript.
Cara Menampilkan Recent Post di Blog
Cara Menampilkan Recent Post di Blog
  •  Beri judul Recent Posts / Artikel Terbaru lalu masukkan kode berikut ini:
<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="http://lh3.ggpht.com/--Z8SVBQZ4X8/TdDxPVMl_sI/AAAAAAAAAAA/jhAgjCpZtRQ/no-image.png"};}};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>

Cara Menampilkan Recent Post di Blog
Cara Menampilkan Recent Post di Blog

  • Terakhir klik Simpan, kemudian klik simpan setelan pada menu tata letak supaya bisa langsung terlihat di list Widget sidebar.
Keterangan:
var rcp_numposts=7; adalah jumlah recent post yang ditampilkan di sidebar, silahkan ganti sesuai dengan yang Anda inginkan.

 

Baca Juga: Synology NAS - cara membuat "shared folder"

 

 

Itulah Cara Menampilkan Recent Post di Blog. Selamat mencoba semoga bermanfaat bagi teman teman dan sampai jumpa lagi pada artikel tutorial selanjutnya.  

 

Post a Comment

Previous Post Next Post