Cara Membuat Recent Posts, Recent Comments, Most Commented, dan Random Posts

Baca Juga

DI blog ini CB memasang widget Posting Terbaru (Recent Posts), Komentar Terbaru (Recent Comments), Paling Banyak Dikomentari (Most Commented), dan Posting Acak (Random Posts).

Tujuan menampilkan daftar posting tersebut untuk meningkatkan Pageviews & Traffic. Sejauh ini terbukti sukses. (Lihat: Pageviews CB 27 Ribu).

CB juga memasang Posting Terbaru plus Gambar Thumbnail berdasarkan Kategori di sidebar widget halaman dalam bagian terbawah. CB pilih Label "Template Blog SEO".

Banyak pengunjung yang bertanya cara membuatnya dan kodenya. Sebenarnya sudah banyak di-share blogger lain.

Berikut ini CB share semua cara dan kode-kode untuk memasang widget-widget yang berfungsi sebagai menu navigasi dan internal link blog untuk memudahkan user dan meningkatkan pageview & trafik ini.

Cara Membuat Widget Recent Posts, Recent Comments, Most Commented, dan Random Posts di Sidebar Blog.

Menampilkan Widget Posting Terbaru

1. Layout > Add a Gadget > pilih "Feed"
2. Masukkan Alamat Blog Anda
3. Klik "Continue"
4. Ubah judul dengan "Recent Posts" atau apalah apalah... :)
5. Save!

Posting Terbaru plus Gambar Thumbnail Berdasarkan Label

Demonya ada di sidebar paling bawah blog ini.
1. Layout > Add a Gadget > HTML/JavaScript

2. Isi judul sesuai dengan Label/Kategori Post yang akan ditampilkan.

3. Isi kolom "Content" dengan kode berikut ini:

<style>
img.recent_thumb {padding:1px;width:72px;height:72px;border:0; float:left;margin:0 10px 5px 1px;}.recent_posts_with_thumbs {float: right;width: 100%;min-height: 72px;margin: 5px 10px 5px 0px;padding: 0;font-size:12px;}ul.recent_posts_with_thumbs li {padding-bottom:5px;padding-top:5px;min-height:72px;}.recent_posts_with_thumbs a {text-decoration:none;}.recent_posts_with_thumbs strong {font-size:10px;} </style>
<script>
function showrecentpostswiththumbs(json) {document.write('<ul class="recent_posts_with_thumbs">'); for (var i = 0; i < numposts; i++) {var entry = json.feed.entry[i];var posttitle = entry.title.$t;var posturl;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 commenttext=entry.link[k].title;var commenturl=entry.link[k].href;}
if (entry.link[k].rel == 'alternate') {posturl = entry.link[k].href;break;}}var thumburl;try {thumburl=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!="")){
thumburl=d;} else thumburl='http://lh4.ggpht.com/_IjrRiI_bVb0/TOCYn1fMjII/AAAAAAAAF24/5Fvv-HJqh74/loading-2.gif';
}
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] = "Jan";monthnames[2] = "Feb";monthnames[3] = "Mar";monthnames[4] = "Apr";monthnames[5] = "May";monthnames[6] = "Jun";monthnames[7] = "Jul";monthnames[8] = "Aug";monthnames[9] = "Sep";monthnames[10] = "Oct";monthnames[11] = "Nov";monthnames[12] = "Dec";document.write('<li class="clearfix">');
if(showpostthumbnails==true)
document.write('<img class="recent_thumb" src="'+thumburl+'"/>');
document.write('<b><a href="'+posturl+'" target ="_top">'+posttitle+'</a></b><br>');

    if ("content" in entry) {
      var postcontent = entry.content.$t;}
    else
    if ("summary" in entry) {
      var postcontent = entry.summary.$t;}
    else var postcontent = "";
    var re = /<\S[^>]*>/g;
    postcontent = postcontent.replace(re, "");
if (showpostsummary == true) {
      if (postcontent.length < numchars) {
          document.write('<i>');
         document.write(postcontent);
          document.write('</i>');}
      else {
          document.write('<i>');
         postcontent = postcontent.substring(0, numchars);
         var quoteEnd = postcontent.lastIndexOf(" ");
         postcontent = postcontent.substring(0,quoteEnd);
         document.write(postcontent + '...');
          document.write('</i>');}
}

var towrite='';var flag=0;
document.write('<br><strong>');

if(showpostdate==true) {towrite=towrite+monthnames[parseInt(cdmonth,10)]+'-'+cdday+' - '+cdyear;flag=1;}

if(showcommentnum==true)
{
if (flag==1) {towrite=towrite+' | ';}
if(commenttext=='1 Comments') commenttext='1 Comment';
if(commenttext=='0 Comments') commenttext='No Comments';
commenttext = '<a href="'+commenturl+'" target ="_top">'+commenttext+'</a>';
towrite=towrite+commenttext;
flag=1;
;
}

if(displaymore==true)
{
if (flag==1) towrite=towrite+' | ';
towrite=towrite+'<a href="'+posturl+'" class="url" target ="_top">Read more&#187;&#187;</a>';
flag=1;
;
}
document.write(towrite);
document.write('</strong></li>');
if(displayseparator==false)
if (i!=(numposts-1))
document.write('<hr color="#d9f1fa" size=0.5>');
}document.write('</ul>');

}
</script>
<script>
var numposts = 5;var showpostthumbnails = true;var displaymore = false;var displayseparator = true;var showcommentnum = false;var showpostdate = false;var showpostsummary = true;var numchars = 100;
</script><script src="/feeds/posts/default/-/Label?orderby=published&alt=json-in-script&callback=showrecentpostswiththumbs">
</script><div class="clear"/></div>

4. Save!

Jangan lupa ganti Label dengan Label posting Anda. Jumlah posting 5 juga bisa diubah sesuai dengan selera Anda.

Membuat Widget Komentar Terbaru 

Recent Comments dengan menampilkan nama komentato, judul posting, dan kutipan isi komentar. Ini bagus buat SEO. Secara, widget itu diindeks juga lho oleh Google!

1. Layout > Add a Gadget > HTML JavaScript
2. Isi judul dengan Komentar Terbaru atau apalah apalah...
3. Isi kolom Content dengan kode berikut ini:

<script style=text/javascript>
function showrecentcomments(json){for(var i=0;i<a_rc;i++){var b_rc=json.feed.entry[i];var c_rc;if(i==json.feed.entry.length)break;for(var k=0;k<b_rc.link.length;k++){if(b_rc.link[k].rel=='alternate'){c_rc=b_rc.link[k].href;break;}}c_rc=c_rc.replace("#","#");var d_rc=c_rc.split("#");d_rc=d_rc[0];var e_rc=d_rc.split("/");e_rc=e_rc[5];e_rc=e_rc.split(".html");e_rc=e_rc[0];var f_rc=e_rc.replace(/-/g," ");f_rc=f_rc.link(d_rc);var g_rc=b_rc.published.$t;var h_rc=g_rc.substring(0,4);var i_rc=g_rc.substring(5,7);var j_rc=g_rc.substring(8,10);var k_rc=new Array();k_rc[1]="Jan";k_rc[2]="Feb";k_rc[3]="Mar";k_rc[4]="Apr";k_rc[5]="May";k_rc[6]="Jun";k_rc[7]="Jul";k_rc[8]="Aug";k_rc[9]="Sep";k_rc[10]="Oct";k_rc[11]="Nov";k_rc[12]="Dec";if("content" in b_rc){var l_rc=b_rc.content.$t;}else if("summary" in b_rc){var l_rc=b_rc.summary.$t;}else var l_rc="";var re=/<\S[^>]*>/g;l_rc=l_rc.replace(re,"");document.write('<div class="rcw-comments">');if(m_rc==true)document.write('On '+k_rc[parseInt(i_rc,10)]+' '+j_rc+' ');document.write('<span class="author-rc"><a href="'+c_rc+'">'+b_rc.author[0].name.$t+'</a></span> commented');if(n_rc==true)document.write(' on '+f_rc);
if(o_rc==0){
document.write('</div>');
           }
else{
document.write(': ');if(l_rc.length<o_rc){document.write('<i>&#8220;');document.write(l_rc);document.write('&#8221;</i></div>');}else{document.write('<i>&#8220;');l_rc=l_rc.substring(0,o_rc);var p_rc=l_rc.lastIndexOf(" ");l_rc=l_rc.substring(0,p_rc);document.write(l_rc+'&hellip;&#8221;</i></div>');document.write('');}
    }
}
}
</script>
<script style=text/javascript>
    var a_rc = 5;
    var m_rc = false;
    var n_rc = true;
    var o_rc = 100;
</script>
<script src=/feeds/comments/default?alt=json-in-script&callback=showrecentcomments></script>
<style type="text/css">
.rcw-comments a {
    text-transform: capitalize;
}
.rcw-comments {
    border-bottom: 1px dotted;
    padding-top: 7px!important;
    padding-bottom: 7px!important;
}
</style>

4. Save!

Widget Post Terbanyak Dikomentari

1. Layout > Add a Gadget > HTML/JavaScript
2. Isi judul dengan "Terbanyak Dikomentari" atau apalah apalah....
3. Isi Content dengan kode berikut ini:

<script type="text/javascript">
function getYpipePP(feed) {
 document.write('<ul style="">');
 var i;
 for (i = 0; i < feed.count ; i++)
 {
var href = "'" + feed.value.items[i].link + "'";
var pTitle = feed.value.items[i].title;
var pComment = " \(" + feed.value.items[i].commentcount + "\)";
var pList = "<li>" + "<a href="+ href + '" target="_blank">' + pTitle;
 document.write(pList);
 document.write(pComment); //to remove comment count delete this line
 document.write('</a></li>');
 }
 document.write('</ul>');
 }
 </script>
 <script src="http://pipes.yahoo.com/pipes/pipe.run?
 YourBlogUrl=http://contohblognih.blogspot.com/
 &ShowHowMany=5
 &_id=390e906036f48772b2ed4b5d837af4cd
 &_callback=getYpipePP
 &_render=json"
type="text/javascript"></script>

4. Save!

Widget Random Posts

Random Post memunculkan daftar judul posting secara acak di widget. Gunanya tentu saja untuk navigasi dan internal link agar user makin lama di blog kita (PageViews).

1. Layout > Add a Gadger > HTML JavaScript
2. Isi judul dengan "Random Post", "Posting Acak", atau apalah apalah....
3. Isi Content dengan kode berikut ini:

<div id='random-post-container'>Memuat...</div>
<script>
//<![CDATA[
// Feed configuration
var homePage = 'http://contohblognih.blogspot.com',
    maxResults = 5,
    containerId = 'random-post-container';
// Function to generate random number limited from `min` to `max`
// Used to create a valid and safe random feed `start-index`
function getRandomInt(min, max) {
    return Math.floor(Math.random() * (max - min + 1)) + min;
}
// Function to shuffle arrays
// Used to randomize order of the generated JSON feed
function shuffleArray(arr) {
    var i = arr.length, j, temp;
    if (i === 0) return false;
    while (--i) {
        j = Math.floor(Math.random() * (i + 1));
        temp = arr[i];
        arr[i] = arr[j];
        arr[j] = temp;
    }
    return arr;
}
// Get a random start index
function createRandomPostsStartIndex(json) {
    var startIndex = getRandomInt(1, (json.feed.openSearch$totalResults.$t - maxResults));
    // console.log('Get the post feed start from ' + startIndex + ' until ' + (startIndex + maxResults));
    document.write('<scr' + 'ipt src="' + homePage + '/feeds/posts/summary?alt=json-in-script&orderby=updated&start-index=' + startIndex + '&max-results=' + maxResults + '&callback=randomPosts"></scr' + 'ipt>');
}
// Widget's main function
function randomPosts(json) {
    var link, ct = document.getElementById(containerId),
        entry = shuffleArray(json.feed.entry),
        skeleton = "<ul>";
    for (var i = 0, len = entry.length; i < len; i++) {
        for (var j = 0, jen = entry[i].link.length; j < jen; j++) {
            link = (entry[i].link[j].rel == "alternate") ? entry[i].link[j].href : '#';
        }
        skeleton += '<li><a href="' + link + '">' + entry[i].title.$t + '</a></li>';
    }
    ct.innerHTML = skeleton + '</ul>';
}
document.write('<scr' + 'ipt src="' + homePage + '/feeds/posts/summary?alt=json-in-script&max-results=0&callback=createRandomPostsStartIndex"></scr' + 'ipt>');
//]]>
</script>

4. Save!

Jangan lupa ganti alamat blognya dengan kepunyaan Anda. Jumlahnya juga bisa ditambah dari 5 menjadi lebih besar.

Kode Lain: Random Post dengan Gambar Thumbnail

Widget RSS Feed dari Blog Lain

CB juga memasang RSS dari Sepakbola Magz, salah satu klien CB, di bagian footer. Anda bisa memasang juga daftar posting terbaru dari blog lain itu di blog Anda. Cara memasangnya:

1. Layout > Add a Gadget > Feed
2. Masukkan alamat blog yang akan ditampilkan
3. Klik "Continue"
4. Ubah judulnya jika perlu
5. Centang "Open New Tab"
6. Save!

Jika mau menampilkan widget-widget tersebut hanya di halaman dalam (single page/single post), gunakan kode dalam posting ini: Mengatur Posisi Widget di Blog.

Jika Anda gak mau ribet pasang sendiri, bingung, apalagi gagal, silakan gunakan saja Layanan Premium CB.

Demikian Cara Membuat Recent Posts, Recent Comments, Most Commented, dan Random Posts yang sebetulnya secara sendiri-sendiri sudah lama juga CB share di blog ini. Dikompilasi dalam posting baru agar memudahkan CB, juga Anda, untuk menggunakannya. Good Luck! (http://contohblognih.blogspot.com).*