Menampilkan 10 Recent Post dan Recent Comments di Blogger

Berbeda dengan Wordpress yang dilengkapi dengan fasilitas untuk menampilkan Recent Post dan Recent Comment, blogger tidak dilengkapi dengan fasilitas tersebut. Hal ini membuat para pengguna blogger harus berusaha sendiri untuk mencari cara menampilkan recent post dan recent comment pada blognya. Ada banyak cara untuk melakukan hal diatas, bisa dengan menggunakan feed sebagai berikut:

1. dari Dashbord Blogger Anda Masuk ke Tata Letak ----> Elemen Halaman
2. klik Tambah Elemen -----> lalu pilih Feed
   
   
3. setelah keluar kotak seperti di bawah ini , masukan kode berikut:
   http://NAMABLOG_KAMU.blogspot.com/feeds/posts/default
   
   
   
   
   
4. Lanjutkan Hingga Selesai
5. untuk menampilkan recent comment anda tinggal merubah posts menjadi comments sehingga menjadi seperti berikut : http://NAMABLOG_KAMU.blogspot.com/feeds/comments/default

Kelemahan cara di atas adalah hanya dapat menampilkan 5 Recent Post dan 5 Recent Comments. agar dapat mnampilkan recent post dan recent comment lebih dari 5 kita dapat gunakan cara berikut :

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>

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

Baca Juga

Cari yang lain: