Membuat Recent Post/Posting Terbaru dengan Script untuk Mengatasi Masalah Desain dan Bahasa
Tabel Konten
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
danfalse
. Cobalah untuk mengganti nilaitrue
denganfalse
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:
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 ..