Cara Mudah Membuat Widget Recent Post dengan Gambar di Blogger


winartoajisaputro.com
- Widget recent posts adalah alat yang menampilkan postingan terbaru yang biasanya disematkan di sidebar blog Anda. Ada banyak jenis tampilan alat posting modern termasuk tanggal, foto, menambahkan komentar dan perubahan menarik lainnya dengan cepat memuat postingan terbaru dan banyak lagi.

Kali ini saya akan membagikan postingan terbaru dengan tambahan gambar thumbnail agar loading dengan baik dan sekaligus cepat. Simak langkah-langkah berikut ini.

Beberapa teman blogger bertanya mengapa setiap blog yang saya kunjungi memiliki widget recent post? Jawaban saya sederhana dan logis. Tentu semua blogger ingin semua artikelnya dibaca oleh pengguna internet tetapi artikel terbaru sebenarnya tidak didaftarkan atau terindeks oleh Google.

Daftar artikel terbaru akan ditampilkan di sidebar blog sehingga pengunjung dapat dengan mudah melihat dan membaca. Jika anda tertarik untuk mengedit postingan terbaru anda bisa membaca tutorialnya dibawah ini.

Cara Membuat Recent Post dengan Thumbnail di Blog

1. Pertama-tama, login ke blogger.com

2. Pilih menu 'Tata letak' > klik 'Tambahkan Gadget' > lalu klik 'HTML/JavaScript

3. Kasih judul 'Recent Post' kemudian salin kode dibawah 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>
4. Klik simpan

Dengan membuat recent post disertai gambar memudahkan pengunjung dalam mencari artikel yang diinginkan. Jika recent post tidak bekerja di blog anda bisa jadi templatenya tidak mendukung.

Sekian dulu mengenai Cara Membuat Recent Post di blog. Semoga bermanfaat untuk anda semua. Jika ada kesalahan dalam postingan ini silahkan tulis dikomentar.
Next Post Previous Post
No Comment
Add Comment
comment url