Simple Recent Posts Widget Untuk Blogspot

Simple Recent Posts Widget Untuk Blogspot

Bola Hero Gawai

Simple Recent Posts Widget Untuk Blogspot

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....

Share this:

Share this with short URL: Get Short URL loading short url

You Might Also Like:

Disqus
Blogger
Pilih Sistem Komentar Yang Disukai

0 Comment

Add Comment

Komentar dengan link promo akan masuk spam.

Gunakan konversi tool jika ingin menyertakan kode atau gambar.


image
How to style text in Disqus comments Top Disqus Commentators
  • 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 Box

How to get ID DISQUS - http://disq.us/p/[ID DISQUS] - lihat di sini

strong em u strike
pre code pre code spoiler
embed

Like Kompi Ajaib? Keep us running by whitelisting Kompi Ajaib in your ad blocker.

This is how to whitelisting Kompi Ajaib in your ad blocker.

Thank you!

×
×
×