Simple Recent Posts Widget Untuk Blogspot

Ditulis oleh: Adhy Suryadi

Ditulis pada: 10/06/2015

Masih ingat dengan postingan recent post dengan efek peekaboo? Nah kali ini kita akan memodifikasi recent posts tersebut menjadi lebih simple tanpa thumbnail. Kita akan menghapus beberapa kode di dalam script-nya agar thumbnail-nya tidak muncul dan hanya menyisakan link-link postingan saja.

Pada postingan yang lalu, recent post menampilkan thumbnail dengan script seperti berikut (silahkan buka recent-post-thumb.js)

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/AVvXsEhP12Hgg5gkeLNHnexuWgiK5bFIWUF3r72C5wkQgW9ZoD_lbVS4btwqFjo4nLIwfQT-NkYHhZymp_eb3lv_Cbco59qCR8L_NfLHNCnqfFv2Y5njqbjbV99gkueg4PJgi7FmO3C8HTHIKqST/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;

Kita hapus kode untuk menampilkan thumbnail-nya dan yang lainnya yang tidak diperlukan (yang saya marking), sehingga menjadi seperti di bawah ini.

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>');};

Menjadi lebih simple bukan? Jadi untuk menyimpannya silahkan simpan script di bawah ini pada gadget HTML/JavaScript di sidebar lewat 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>

Kode 6 adalah untuk menampilkan jumlah postingan pada simple recent post.

Kemudian tambahkan CSS di bawah ini di dalam Edit HTML 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: JSFIDDLE

Selamat mencoba....