Membuat Simple Recent Posts Blogger Untuk Multi Blog

Setelah kemarin kita sudah bahas di postingan Cara Membuat Simple Recent Posts Widget Untuk Blogspot,  dan kita modifikasi script kodenya dengan menghilangkan thumbnail sehingga yang tampil pada widget simple recent posts hanya link judul saja. 

Dipostingan lanjutan ini masih membahas seputar Widget Recent Posts namun kita akan buat lebih banyak yaitu Membuat Simple Recent Posts Blogger Untuk Multi Blog, disini kita akan menampilkan Recent post yang nantinya bisa dipakai untuk beberapa feed blog atau untuk multi blog.

Di penjelasan ini nantinya kita akan menampilkan beberapa feed pada blog yang berbeda dan uniknya kita hanya cukup menyimpan hanya satu script saja agar dapat menampilkan beberapa feed blog, Penasaran ? bagi sobat yang mau mencobanya mari disimak berikut ini.

Langkah Pertama

Silahkan sobat salin kode script dibawah ini lalu letakkan tepat diatas kode </head>

<script>
//<![CDATA[
function showlatestposts(json){document.write('<ul class="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>');document.write('<a href="'+ postsurl+'" target ="_top" title="'+ posttitle+'">'+ posttitle+'</a>');document.write('</li>');}
document.write('</ul>');};
//]]>
</script>

Perhatikan kode yang ditandai kode angka 6 yang terdapat pada kode for(var i=0;i<6;i++) itu gunanya nanti untuk menampilkan banyaknya link postingan yang akan di tampilkan pada widget recent post, silahkan sobat rubah sesuai kebutuhan.


Langkah Ke Dua
Silahkan sobat salin kode CSS dibawah ini lalu letakkan diatas kode </head> bagi sobat yang sudah pernah menggunkan cara sebelumnya Simple Recent Posts Widget Untuk Blogspot (updated, tidak usah dipasang lagi Kode CSS-nya sama, namun bagi sobat yang belum pernah memasangnya gunakan kode CSS berikut ini.

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

Setelah selesai silahkan SAVE lanjutkan ke Langkah berikutnya.


Langkah Ke Tiga
Silahkan sobat salin kode dibawah ini lalu letakkan di gadget HTML/Javascript pada sidebar atau bebas ingin meletakkan dimana saja, ini gunanya untuk menampilkan Recent Post-nya.

<script>
//<![CDATA[
document.write("<scr" + "ipt type=\"text/javascript\" src=\"http://www.URLAnda.com/feeds/posts/default?orderby=published&amp;alt=json-in-script&amp;callback=showlatestposts\"></scr" + "ipt>");
//]]>
</script>

Perhatikan kode yang ditandai silahkan ganti dengan URL blog sobat dan seterusnya jika ingin menampilkan Multi Blog seperti contoh berikut ini

<script>
//<![CDATA[
document.write("<scr" + "ipt type=\"text/javascript\" src=\"http://www.URLAnda1.com/feeds/posts/default?orderby=published&amp;alt=json-in-script&amp;callback=showlatestposts\"></scr" + "ipt>");
//]]>
</script>

<script>
//<![CDATA[
document.write("<scr" + "ipt type=\"text/javascript\" src=\"http://www.URLAnda2.com/feeds/posts/default?orderby=published&amp;alt=json-in-script&amp;callback=showlatestposts\"></scr" + "ipt>");
//]]>
</script>

<script>
//<![CDATA[
document.write("<scr" + "ipt type=\"text/javascript\" src=\"http://www.URLAnda3.com/feeds/posts/default?orderby=published&amp;alt=json-in-script&amp;callback=showlatestposts\"></scr" + "ipt>");
//]]>
</script>

RESULT

DEMO

Perhatikan baik-baik penerapan kodenya sesuai diatas, dan selesai selamat mencoba.