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&alt=json-in-script&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:
