Membuat Recent Post/Posting Terbaru dengan Script untuk Mengatasi Masalah Desain dan Bahasa

Pernah melihat model recent post seperti ini? Ya, itu adalah recent post bawaan dari Blogger.com. Jika dilihat-lihat, tampilannya memang terasa sedikit memaksa dengan template blog kita. Komposisi warna dan model huruf yang tidak bisa disesuaikan terkadang juga membuat recent post ini menjadi tampak seperti "tempelan" saja, bukannya menjadi salah satu bagian dari tubuh blog kita. Selain itu, salah satu bagian kecil berupa tautan bertuliskan continue >> juga mungkin akan sedikit mengganggu bagi para anak bangsa yang cinta bahasa tanah air. Nah, untuk mengatasi semua masalah itu, kamu bisa menggunakan baris script yang Saya peroleh dari salah seorang tetangga Saya yang baik hatinya. Namanya mas Hoctro (hehe..)
Salin saja semua kode ini, kemudian letakkan di dalam sebuah elemen halaman HTML/JavaScript:

<script type='text/javascript'>
//<![CDATA[
//kredit kepada HOCTRO
    function rp(json) {
    document.write('<ul>');
    for (var i = 0; i < numposts; i++) {
        document.write('<li>');
        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);
    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]  = "Agt";
    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, "");
    document.write(posttitle);
    if (showpostdate == true) document.write(' - ' + monthnames[parseInt(cdmonth,10)] + ' ' + cdday);
    if (showpostsummary == true) {
        if (postcontent.length < numchars) {
            document.write(postcontent);
        } else {
            postcontent  = postcontent.substring(0, numchars);
            var quoteEnd = postcontent.lastIndexOf(" ");
            postcontent  = postcontent.substring(0,quoteEnd);
            document.write(' ' + postcontent + '...' + readmorelink);
        }
    }
    document.write('</li>');
    }
    document.write('</ul>');
    }
//]]>
</script>
<script type='text/javascript'>
var numposts        = 7;
var showpostdate    = true;
var showpostsummary = true;
var numchars        = 100;
var readmorelink    = "(lagi)";
</script>
<script src="http://hompimpaalaihumgambreng.blogspot.com/feeds/posts/default?orderby=published&amp;alt=json-in-script&amp;callback=rp">
</script>

Simpan elemen halamanmu. Sekarang kita tinggal melakukan beberapa penyesuaian.

Sedikit Penyesuaian:

• Gantilah http://hompimpaalaihumgambreng.blogspot.com dengan alamat blogmu.
• Semua kode yang Saya beri warna merah adalah variabel yang bisa kamu utak-atik sesuai dengan bahasamu.
• var numposts adalah variabel untuk menentukan jumlah posting yang tampil (dalam hal ini 7).
• var numchars adalah variabel untuk menentukan jumlah teks konten posting yang diringkas/dipotong.
• Di situ juga terdapat nilai-nilai true dan false. Cobalah untuk mengganti nilai true dengan false atau sebaliknya dan lihat sendiri perbedaannya.

Nah, sekarang kita sudah bisa memiliki model recent post/posting terbaru dengan tampilan dan bahasa yang bisa menyesuaikan diri dengan pemodel template kita seperti ini: