Menampilkan 10 Recent Post dan Recent Comments di Blogger

Keywords: cara menampilkan recent posts, cara menampilkan recent comments, cara menampilkan 10 recent comment dan posts, cara menampilkan recent comments dan posts lebih dari 5.

Dalam menampilkan recent posts dan comment, Wordpress lebih lengkap memberikan fasilitas daripada Blogger. Biasanya secara defaut blogger hanya menampilkan hanya 5 recent comment atau recent post seperti postingan di sini. Namun kali ini ber-bagi.blogspot.com akan memberikan trik untuk menampilkan lebih dari 5 recent posts dan recent comments.

Ikuti langkah-langkah di bawah ini:

1. Dari Dashbord Blogger Anda Masuk ke Tata Letak ----> Elemen Halaman
2. Klik Edit HTML-----> Centang Expand Tempalte Widget
3. Cari Kode Berikut : ]]></b:skin> atau sebelum </head>
4. Masukan kode Javascript berikut :


<script type='text/javascript'>
//credit to hoctro. code to create top recent posts
function rp(json) {
document.write(&#39;&lt;ul&gt;&#39;);for (var i = 0; i &lt; numposts; i++) {
document.write(&#39;&lt;li&gt;&#39;);
var entry = json.feed.entry[i];
var posturl;
if (i == json.feed.entry.length) break;
for (var k = 0; k &lt; entry.link.length; k++) {
if (entry.link[k].rel == &#39;alternate&#39;) {
posturl = entry.link[k].href;
break;
} }
var posttitle = entry.title.$t;
posttitle = posttitle.link(posturl);
var readmorelink = &quot;(more)&quot;;
readmorelink = readmorelink.link(posturl);
var postdate = entry.published.$t;
var cdyear = postdate.substring(0,4);
var cdmonth = postdate.substring(5,7);
var cdday = postdate.substring(8,10);
var monthnames = new Array();
monthnames[1] = &quot;Jan&quot;;
monthnames[2] = &quot;Feb&quot;;
monthnames[3] = &quot;Mar&quot;;
monthnames[4] = &quot;Apr&quot;;
monthnames[5] = &quot;May&quot;;
monthnames[6] = &quot;Jun&quot;;
monthnames[7] = &quot;Jul&quot;;
monthnames[8] = &quot;Aug&quot;;
monthnames[9] = &quot;Sep&quot;;
monthnames[10] = &quot;Oct&quot;;
monthnames[11] = &quot;Nov&quot;;
monthnames[12] = &quot;Dec&quot;;
if (&quot;content&quot; in entry) {
var postcontent = entry.content.$t;
} else if (&quot;summary&quot; in entry) {
var postcontent = entry.summary.$t;
} else
var postcontent = &quot;&quot;;
var re = /&lt;\S[^&gt;]*&gt;/g;
postcontent = postcontent.replace(re, &quot;&quot;);
document.write(posttitle);
if (showpostdate == true) document.write(&#39; - &#39; + monthnames[parseInt(cdmonth,10)] + &#39; &#39; + cdday);
if (showpostsummary == true) {
if (postcontent.length &lt; numchars) {
document.write(postcontent);
} else {
postcontent = postcontent.substring(0, numchars);
var quoteEnd = postcontent.lastIndexOf(&quot; &quot;);
postcontent = postcontent.substring(0,quoteEnd);
document.write(postcontent + &#39;...&#39; + readmorelink);
} }
document.write(&#39;&lt;/li&gt;&#39;);
}
document.write(&#39;&lt;/ul&gt;&#39;);
}

var numposts = 10;
var showpostdate = false;
var showpostsummary = false;
var numchars = 100;
</script>

5. Carilah kode: <b:section class='sidebar' id='sidebar' (class dan id bisa berbeda-beda tergantung sang pembuat template). bila tidak ketemu paling tidak pada cari kode: <b:section
6. Letakan kode berikut tepat di bawah kode no.5. di atas. Anda dapat memindah dan mengatur ulang letaknya dari elemen halaman agar lebih mudah.

Kode Berikut Untuk Menampilkan Recent Post

<b:widget id='HTML112' locked='false' title='Recent Post' type='HTML'>
<b:includable id='main'>
<!-- only display title if it's non-empty -->
<h2 class='title'><data:title/></h2>
<div class='widget-content'>
&lt;script src=&quot;/feeds/posts/default?orderby=published&amp;amp;alt=json-in-script&amp;amp;callback=rp&quot;&gt;&lt;/script&gt;
</div>
<b:include name='quickedit'/>
</b:includable>
</b:widget>

Kode Berikut Untuk Menampilkan Recent Comment

<b:widget id='HTML113' locked='false' title='Recent Comments' type='HTML'>
<b:includable id='main'>
<!-- only display title if it's non-empty -->
<h2 class='title'><data:title/></h2>
<div class='widget-content'>
&lt;script src=&quot;/feeds/comments/default?orderby=published&amp;amp;alt=json-in-script&amp;amp;callback=rp&quot;&gt;&lt;/script&gt;
</div>
<b:include name='quickedit'/>
</b:includable>
</b:widget>

7. Save dan selesai.

Catatan: Anda dapat mengatur berapa jumlah recent post dan recent comment dengan merubah kode: var numposts = 10;

Enjoy with ber-bagi.blogspot.com