Cara Pasang Widget Recent Posts Blogger

Cara Pasang Widget Recent Posts Blogger
Fungsi dari widget Recent Posts atau Posting Terbaru adalah untuk menampilkan informasi singkat dari judul posting terbaru yang ditampilkan secara berurutan sehingga pengunjung tidak merasa kesulitan ketika ingin melihat urutan entri  yang telah kita posting.

Widget Recent Posts ini terdiri dari dua script/kode.
Script bagian pertama adalah script yang bisa ditempatkan/diupload di mana saja selama kita
mempunyai tempat penyimpanan di directory website.
Jika kita tidak mempunyai tempat penyimpanan di directory website, kita bisa menggunakan layanan gratis seperti Google Code.

Di bawah ini ada dua jenis script. Jika anda ingin Recent Posts yang memakai bahasa Indonesia pilihlah Script Bhs. Indonesia, begitu juga sebaliknya. Semua tergantung pada selera anda.

1. SHOW RECENT POSTS INDONESIAN

// ----------------------------------------
// SHOW RECENT POSTS
// ----------------------------------------
// This functions takes a blogger-feed in JSON
// format and displays it.
//
// Version: 2.0
// Date:    2006-12-01
// Author:  Hans Oosting
// URL:     beautifulbeta.blogspot.com
// Date:    2010-05-30
// Modified:  Wachid Rahman Al-Habsyi
// URL:     tutorial-beta.blogspot.com
// ----------------------------------------

function showrecentposts(json) {

  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 == 'alternate') {
        posturl = entry.link[k].href;
        break;
      }
    }
    posttitle = posttitle.link(posturl);
    var readmorelink = "&raquo;&raquo;";
;
    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] = "Jan";
    monthnames[2] = "Feb";
    monthnames[3] = "Mar";
    monthnames[4] = "Apr";
    monthnames[5] = "Mei";
    monthnames[6] = "Jun";
    monthnames[7] = "Jul";
    monthnames[8] = "Agu";
    monthnames[9] = "Sep";
    monthnames[10] = "Okt";
    monthnames[11] = "Nov";
    monthnames[12] = "Des";
    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 (!standardstyling) document.write('<div class="bbrecpost-1">');
    if (standardstyling) document.write('<br/>');
    document.write(posttitle);
    if (!standardstyling) document.write('</div><div class="bbrecpostsum-1"">');
    if (showpostsummary == true) {
      if (standardstyling) document.write('<br/>');
    if (showpostdate == true) document.write( cdday + ' ' + monthnames[parseInt(cdmonth,10)] + ' ' + cdyear + ' ');
      if (postcontent.length < numchars) {
         if (standardstyling) document.write('<i>');
         document.write(postcontent);
         if (standardstyling) document.write('</i>');}
      else {
         if (standardstyling) document.write('<i>');
         postcontent = postcontent.substring(0, numchars);
         var quoteEnd = postcontent.lastIndexOf(" ");
         postcontent = postcontent.substring(0,quoteEnd);
         document.write(postcontent + '...' + readmorelink);
         if (standardstyling) document.write('</i>');}
}
    if (!standardstyling) document.write('</div>');
    if (standardstyling) document.write('<br/>');
}
if (!standardstyling) document.write('<div class="bbwidgetfooter">');
if (standardstyling) document.write('<br/>');
document.write('<span style="font-size:80%;">Widget by <a href="http://beautifulbeta.blogspot.com">Beautiful Beta</a> Modified to Indonesian By <a href="http://elegance-beta.blogspot.com">Elegance Beta</a></span>');
if (!standardstyling) document.write('</div>');

}

2. SHOW RECENT POSTS ENGLISH

// ----------------------------------------
// SHOW RECENT POSTS
// ----------------------------------------
// This functions takes a blogger-feed in JSON
// format and displays it.
//
// Version: 2.0
// Date:    2006-12-01
// Author:  Hans Oosting
// URL:     beautifulbeta.blogspot.com
// ----------------------------------------

function showrecentposts(json) {

  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 == 'alternate') {
        posturl = entry.link[k].href;
        break;
      }
    }
    posttitle = posttitle.link(posturl);
    var readmorelink = "(more)";
    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] = "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";
    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 (!standardstyling) document.write('<div class="bbrecpost">');
    if (standardstyling) document.write('<br/>');
    document.write(posttitle);
    if (showpostdate == true) document.write(' - ' + monthnames[parseInt(cdmonth,10)] + ' ' + cdday);
    if (!standardstyling) document.write('</div><div class="bbrecpostsum"">');
    if (showpostsummary == true) {
      if (standardstyling) document.write('<br/>');
      if (postcontent.length < numchars) {
         if (standardstyling) document.write('<i>');
         document.write(postcontent);
         if (standardstyling) document.write('</i>');}
      else {
         if (standardstyling) document.write('<i>');
         postcontent = postcontent.substring(0, numchars);
         var quoteEnd = postcontent.lastIndexOf(" ");
         postcontent = postcontent.substring(0,quoteEnd);
         document.write(postcontent + '...' + readmorelink);
         if (standardstyling) document.write('</i>');}
}
    if (!standardstyling) document.write('</div>');
    if (standardstyling) document.write('<br/>');
}
if (!standardstyling) document.write('<div class="bbwidgetfooter">');
if (standardstyling) document.write('<br/>');
document.write('<span style="font-size:80%;">Widget by <a href="http://beautifulbeta.blogspot.com">Beautiful Beta</a></span>');
if (!standardstyling) document.write('</div>');

}

Perbedaan kedua script di atas terletak pada penggunaan format tanggal dan bulan 12 Des 2009 dan Dec 12 2009. Format tersebut merupakan standard yang digunakan pada kedua negara tersebut.

Setelah script selesai didownload, extract filenya menggunakan aplikasi Winzip atau Winrar. Jika file sudah di extract proses upload sudah bisa kita lakukan.

Untuk melakukan pemanggilan pada script yang tadi sudah kita upload, kita tinggal menggunakan kode di bawah ini. Caranya sebagai berikut:

1. Login ke Blogger dengan ID Blogger anda

2. Klik Tata Letak

3. Klik Elemen Laman

4. Klik Tambahkan Widget

5. Pilih HTML/JavaScript

Copy Paste kode dibawah ini dan masukkan pada halaman elemen Blogger

Kode bagian kedua:

<script style="text/javascript" src="http://www.geocities.com/oom_directory/recentpost.txt"></script><script style="text/javascript">var numposts = 5;var showpostdate = true;var showpostsummary = true;var numchars = 100;var standardstyling = true;</script><script src="http://namablog.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentposts"></script>

Ganti kode yang berwarnamerah dengan url file java script yang tadi sudah kita upload. Sementara itu untuk kode yang berwarna biru, ganti dengan alamat blog anda.

Catatan:
untuk menambah atau mengurangi jumlah postingan, ganti variable angka 5 pada var numposts= 5;
untuk menghilangkan tanggal, ganti variable true menjadi false pada var showpostdate= true;
untuk menghilangkan kutipan posting, ganti variable true menjadi false pada var showpostsummary= true;
untuk menambah atau mengurangi jumlah kutipan posting, ganti angka 100 pada var numchars= 100;