Simple Recent Posts Widget Untuk Blogspot

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='http://2.bp.blogspot.com/-C3Mo0iKKiSw/VGdK808U7rI/AAAAAAAAAmI/W7Ae_dsEVAE/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....

You Might Also Like:

How to style text in Disqus comments:
  • To write a bold letter please use <strong></strong> or <b></b>.
  • To write a italic letter please use <em></em> or <i></i>.
  • To write a underline letter please use <u></u>.
  • To write a strikethrought letter please use <strike></strike>.
  • To write HTML code, please use <code></code> or <pre></pre> or <pre><code></code></pre>.
    And use parse tool below to easy get the style.
Show Parser Hide Parser
Disqus Comments