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 adalah Membuat Simple Recent Posts Blogger Untuk Multi Blog, disini kita akan menampilkan Recent post yang nantinya mampu 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 semoga dapat menampilkan beberapa feed blog, Penasaran ? bagi sahabat yang mau mencobanya mari disimak berikut ini.

Langkah Pertama

Silahkan sahabat salin isyarat script dibawah ini lalu letakkan sempurna diatas isyarat </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 isyarat yang ditandai isyarat angka 6 yang terdapat pada isyarat for(var i=0;i<6;i++) itu gunanya nanti untuk menampilkan banyaknya link postingan yang akan di tampilkan pada widget recent post, silahkan sahabat rubah sesuai kebutuhan.


Langkah Ke Dua
Silahkan sahabat salin isyarat CSS dibawah ini lalu letakkan diatas isyarat </head> bagi sahabat yang sudah pernah menggunkan cara sebelumnya Simple Recent Posts Widget Untuk Blogspot (updated, tidak usah dipasang lagi Kode CSS-nya sama, namun bagi sahabat yang belum pernah memasangnya gunakan isyarat 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 akibat silahkan SAVE lanjutkan ke Langkah berikutnya.


Langkah Ke Tiga
Silahkan sahabat salin isyarat 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 isyarat yang ditandai silahkan ganti dengan URL blog sahabat dan seterusnya jikalau ingin menampilkan Multi Blog menyerupai rujukan 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 akibat selamat mencoba.