Cara Instan Membuat Recent Post dengan Gambar di Blogger

ADDSITE01 - Cara Instan Membuat Recent Post dengan Gambar di Blogger - Pada dasarnya sebuah website yang professional harus mempunyai recent post, kebanyakan para publisher blogger ingin tampilan recent post nya ada image atau gambarnya. Agar bisa menarik perhatian para pengunjung.




Tampilan recent post juga berbeda-beda, ada yang dengan gambar dan tanpa gambar. Ada juga yang menampilkan tanggal dan komentar juga, dan masih ada modal yang lainnya tergantung bloggernya sendiri.

Widget ini sangat penting sekali untuk sebuah website atau blog, hal ini agar artikel terbaru bisa dilihat oleh para pengunjung karena kebanyakan artikel terbaru belum tentu belum terindex oleh Google.

Cara Instan Membuat Recent Post dengan Gambar di Blogger


1. Silahkan login akun di Dashboard Blogger.
2. Pilih menu Tata Letak/Layout > lalu Tambahkan Gadget >> HTML/JavaScript.
3. Silahkan beri judul Recent Posts 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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_otUaEUm-TfWvwEt9Xv7ZiL6hP1NcSys5bPzU7lK2NPdbdzP2q5eq5bIeEfECWU0vSOJLv7LqS6kvZKYC_pF5Rati16TVfPyqlvmGVznMwcCGfgTIDsAmDBPFTNlaskX0zxqZT_KJDlNo/"};}};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. Terakhir klik Simpan, kemudian kalian klik simpan setelan pada menu tata letak agar bisa langsung terlihat di sidebar blogger.

Sekian informasi yang saya berikan tentang Cara Instan Membuat Recent Post dengan Gambar di Blogger semoga bermanfaat bagi pengunjung dan kita semua.

Post a Comment

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel