Recent POST Friendly Template

recent post bawaan Blogger

Pernah melihat model recent post seperti gambar disamping 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[
    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://blogcopipaste.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://blogcopipaste.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:

Recent POST Friendly Template