Simple Recent Posts Widget Untuk Blogspot (updated)

Postingan kali ini adalah Updated dari sebelumnya, masih ingat postingan sebelumnya yang pernah dibahas Cara Membuat Recent Post Blogger Menggunakan Peekaboo Effect nah postingan kali ini adalah updated lanjutannya yang akan kita modifikasi recent posts nya agar lebih simple dan tanpa menggunakan thumbnail, disini akan kita hapus beberapa kode script didalamnya yang nantinya hanya akan menampilkan link postingannya saja.

Dipostingan yang lalu kita sudah menampilkan recent post dengan thumbnail yang kode scriptnya seperti dibawah ini

function showlatestpostswiththumbs(json){document.write('<ul id="recent-posts-container">');for(var i=0;i<3;i++){var entry=json.feed.entry[i];var posttitle=entry.title.$t;var postsurl;if(i==json.feed.entry.length)break;for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='replies'&&entry.link[k].type=='text/html'){var commentstext=entry.link[k].title;var commentsurl=entry.link[k].href;}
if(entry.link[k].rel=='alternate'){postsurl=entry.link[k].href;break;}}
var recenthumb;try{recenthumb=entry.media$thumbnail.url;}catch(error){s=entry.content.$t;a=s.indexOf("<img");b=s.indexOf("src=\"",a);c=s.indexOf("\"",b+ 5);d=s.substr(b+ 5,c- b- 5);if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")){recenthumb=d;}else recenthumb='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsw2T_bABpMMsfF0UTDCLQCrEVkEZnI9LTV6F0ecMOIaWx2QHk198wdZTSl9nBc8Ua79nyfPs5AYyg2otQTJRZaDOd2541-iQbOf4wp-c0muTHVbm-sJQ4g_8Lp7lidUrTvdNC1E98HEsY/s1600/no-thumb.png';}
document.write('<li class="recent-posts-list">');document.write('<img class="recent-post-thumb" src="'+ recenthumb+'"/>');document.write('<div class="recent-post-title"><a href="'+ postsurl+'" target ="_top" title="'+ posttitle+'">'+ posttitle+'</a></div>');document.write('</li>');}
document.write('</ul>');};function yScrollHandler(){var win=document.getElementById("peekaboo");if((window.pageYOffset+ window.innerHeight)>=document.body.offsetHeight){win.style.transition="right 0.7s ease-in-out 0s";win.style.right="0px";}else{win.style.transition="right 0.7s ease-in-out 0s";win.style.right="-452px";}};window.onscroll=yScrollHandler;

Perhatikan kode yang ditandai, itu yang nantinya akan kita hapus dengan menghilangkan thumbnailnya, jadi lebih simple akan seperti ini jadinya.

function showlatestposts(json){document.write('<ul id="recent-posts">');for(var i=0;i<6;i++){var entry=json.feed.entry[i];var posttitle=entry.title.$t;var postsurl;if(i==json.feed.entry.length)break;for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='alternate'){postsurl=entry.link[k].href;break;}}
document.write('<li class="recent-posts">');document.write('<a href="'+ postsurl+'" target ="_top" title="'+ posttitle+'">'+ posttitle+'</a>');document.write('</li>');}
document.write('</ul>');};

Bagaimana sobat menjadi lebih sedikit dan simple kodenya, Bagaimana makin penasaran ? setelah itu silahkan sobat save kode dibawah ini di gadget HTML/Javascript pada sidebar melalui tata letak.

<script>
//<![CDATA[
function showlatestposts(json){document.write('<ul id="recent-posts">');for(var i=0;i<6;i++){var entry=json.feed.entry[i];var posttitle=entry.title.$t;var postsurl;if(i==json.feed.entry.length)break;for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='alternate'){postsurl=entry.link[k].href;break;}}
document.write('<li class="recent-posts">');document.write('<a href="'+ postsurl+'" target ="_top" title="'+ posttitle+'">'+ posttitle+'</a>');document.write('</li>');}
document.write('</ul>');};
document.write("<scr" + "ipt type=\"text/javascript\" src=\"/feeds/posts/default?orderby=published&amp;alt=json-in-script&amp;callback=showlatestposts\"></scr" + "ipt>");
//]]>
</script>

Perhatikan kode 6 yang ditandai itu fungsinya untuk menampilkan banyaknya jumlah postingan yang akan sobat tampilkan di simple recent post.

Lanjut lagi, silahkan sobat salin dan letakkan kode CSS dibawah ini tepat di atas kode </head>

<style type='text/css'>
#recent-posts{
    width:auto;
    padding:0 10px;
    margin:0 auto;
    border:1px solid #ddd;
}
#recent-posts ul,#recent-posts li {
    list-style:none;
}
#recent-posts a{
    text-decoration:none;
}
#recent-posts li{
    border-top:1px solid #ddd;
    padding:6px 0
}
#recent-posts li:first-child{
    border-top:none;
}
</style>

RESULT

DEMO

Dan selesai, Selamat Mencoba