Widget Sidebar Recent Posts di Blogger dengan Thumbnail

Cara Memasang Widget Postingan Terbaru di Sidebar Blogger - Beberapa hari ini saya mencari widget Recent Posts / Postingan terbaru untuk blog ini. Yang namanya tutorial macem-macem lah, ada yang asal copas, ada yang memang sudah menggunakan dll.

Akhirnya saya menggunakan Widget Recent Posts dari BungFrangki, tapi entah kenapa kadang work tapi kadang undefined. Akhirnya saya menemukan yang cocok dengan Blog saya.

Fungsi Widget Recent Posts

Pengunjung yang mengunjungi melalui mesin pencari seperti Google, akan langsung mengunjungi halaman posting. Dengan adanya Widget Recent Posts di Sidebar, mereka akan disuguhi postingan terbaru dari Blog kita, dan sekaligus internal link, yang memperkuat Blog kita di SERP.

Bagi yang ingin memasang dan melihat penampilannya, silahkan klik demo di bawah.

Cara Pasang Widget Recent Posts

1. Klik Tata Letak
2. Pada kolom sidebar, Tambahkan Gadget
3. Pilih HTML/Javascript
4. Tulis Judul, Recent Posts atau Postingan Terbaru
5. Copy dan Paste kode di bawah
6. Simpan

<style scoped='' type='text/css'>
#recent-posts{color:#999;font-size:11px}
#recent-posts img{background:#fafafa;float:left;height:60px;margin-right:15px;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);list-style:none}
#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=80;
var rcp_info='yes';
var rcp_comment='Comments';
var rcp_disable='Review';
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/a/AVvXsEgHSGMCyvBOqUChWccx8XpTgPPkgzWxQwmkHIemsVjPJ6J1xz7eYODIq5q7KAzYcPxPk8wX_FZwEhui_W4lIPUf3g2zYugWn4sQWEEYzkIraZg59qOV9MzCAECgaTlxJwMGseM2jTlJE6b-LSx1jg-HKkT5k1DSoXsiG69hNqRS_flSius0qIDEDg1gpP6C=s72"};}};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 class="tanggal">'+rcp_postdate.substring(8,10)+'/'+rcp_postdate.substring(5,7)+'/'+rcp_postdate.substring(0,4)+'</span><span class="komen"> - '+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=\"https://kang-ismet.com/feeds/posts/default?alt=json-in-script&max-results='+rcp_numposts+'&callback=recent_posts\"><\/script>');
</script>

Resize Image

Karena ada salah satu sahabat komentator yang ingin memperbesar gambar, tapi blur. Silahkan tambahkan JS ini dibawahnya.

<script>
//<![CDATA[
function resizeThumb(parentID, size) {
    var parent = document.getElementById(parentID),
        image = parent.getElementsByTagName('img');
    for (var i = 0; i < image.length; i++) {
        image[i].src = image[i].src.replace(/\/s72\-c/, "/s" + size + "-c");
        image[i].width = size;
        image[i].height = size;
    }
}
resizeThumb('recent-posts', 200);
//]]>
</script>

Untuk resizeThumb('recent-posts', 200); silahkan ubah pixelnya sesuai keinginan. jangan lupa di pada #recent-posts img, ubah ukuran width dan height nya.

Demikian cara pasang Sidebar Widget Recent Comment, dengan Tanggal dan Komentar.