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

Tabel Konten
  1. Sedikit Penyesuaian: 

Script Recent Post BloggerPernah 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:

Error

5 Komentar

  • Unknown

    sumpahh !!!!!
    keren-keren postingan anda!!!

    • PRADANA TEKNIK AC

      wah ini scrip ringan banget..... beda sama scrip dari..... mantap pokoknya!

  • Unknown

    simpan lagi halaman yang ini
    :D

  • Anonim

    cocok banget sama templateku nih,,,makasih banyak atas tutorialnya mas,,,,mantap banget

  • Sopala Multapa

    mas saya mau nanya bagaimana caranya judul postingan menjadi dibawah gambar postingan ..

Komentar telah ditutup.