Cara Menampilkan Tulisan Terbaru di Sidebar Blogger

Baca Juga

Cara Menampilkan Tulisan Terbaru (Recent Post) plus Gambar Thumbnail di Sidebar Blogger.

WIDGET recent post sangat penting ditampilkan di blog. Tujuannya agar pembaca tahu update tulisan terbaru.

Selain itu, widget recent post juga berfungsi menambah faktor SEO blog karena berisi internal link yang sangat dianjurkan Google.

Desain widget Recent Posts berikut ini berupa daftar Judul plus Gambar Thumbnail, sebagaimana screenshot berikut ini:

Cara Menampilkan Tulisan Terbaru (Recent Post) 

1. Klik Layout (Tata Letak) > Add a Gadget > pilih Javascript/HTML
2. Isi judul widget dengan Recent Post atau Tulisan Terbaru
3. Copas kode berikut ini di kolom konten:

<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=5;
var rcp_snippet_length=200;
var rcp_info='no';
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/AVvXsEgl_Nsnkd1LxWcyNWDz3tu5EejJ5t8nIwvGTru3XPWT3F2ThUPrE8Lmiqz2YYtQaqxn0QtmHMK-lj3rRv1Swm4-rcmj5Ak9CDg0Qjb7QVR9yCJCGJyveuRQ3nr3Akbyz3xJ4DSJyUS61HIB/"};}};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. Save!

Jika hanya akan menampilkan daftar judul doang, tanpa gambar thumbnail, gunakan kode ini:

<div class='recentx'>
<script type='text/javascript'>
 //<![CDATA[
function recentpostslist(json) {
 document.write('<ul>');
 for (var i = 0; i < json.feed.entry.length; i++)
 {
    for (var j = 0; j < json.feed.entry[i].link.length; j++) {
      if (json.feed.entry[i].link[j].rel == 'alternate') {
        break;
      }
    }
var entryUrl = "'" + json.feed.entry[i].link[j].href + "'";//bs
var entryTitle = json.feed.entry[i].title.$t;
var item = "<li>" + "<a href="+ entryUrl + '" target="_top">' + entryTitle + "</a> </li>";
 document.write(item);
 }
 document.write('</ul>');
 }
//]]>
</script>
<script src="/feeds/posts/summary?max-results=5&alt=json-in-script&callback=recentpostslist"></script>
</div>
<style>
.recentx ul li {margin: 0;padding: 5px 0;border-bottom: 1px dotted rgba(0,0,0,0.05);font-size: 15px;}
.recentx a:link,.recentx a:visited {color:#2b2b2b}
.recentx a:hover {color:#c00}
</style>

Demikian  Cara Menampilkan Tulisan Terbaru (Recent Post) plus Gambar Thumbnail atau Judul Postingan Saja di Sidebar Blogger. (blogromeltea.blogspot.com).*