Senin, Juni 08, 2009

Cara membuat recent post (postingan terbaru) di blogspot

Berkadang saya bingung jika mengunjungi web biasa ada yang menamakan widget recent post, terkadang gadget recent post bahkan ada juga yang menamakan badge recent post. mengenai gadget,widget,atau badge terserah teman-teman mau gunakan yang mana, tidak ada yang melarang memakai istilah tersebut. Yang penting sekarang kita mau membuat recent post, Jika di blog saya ini bisa dilihat di sidebar bagian atas atau di gambar di bawah:



Ada beberapa cara membuat recent post, bisa dengan menggunakan feedburner atau dengan memanfaatkan feed default blogger.

Keduanya pernah saya coba di blog saya, tetapi yang lebih praktis adalah dengan menggunakan feed default blogger.

Prosedurnya:
1. Masuk ke Dashboard -> Tata Letak -> Elemen halaman
Pilih Tambah Gadget



2. Pilih Html/Java script


3. Akan muncul kotak dialog html/javascript


4. Masukkan kode berikut pada html/javascript di atas:



<script>
//credit to 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);
var readmorelink = "(lagi)";
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] = "May";
monthnames[6] = "Jun";
monthnames[7] = "Jul";
monthnames[8] = "Aug";
monthnames[9] = "Sep";
monthnames[10] = "Oct";
monthnames[11] = "Nov";
monthnames[12] = "Dec";


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, "");


if (showpostdate == true) document.write('# ' + cdday + ' ' + monthnames[parseInt(cdmonth,10)] + '>> ');
document.write(posttitle + ' ');


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('<hr width="100%" size="1" />');
}
document.write('</ul>');


}
</script><script>var numposts = 17; var showpostdate = false; var showpostsummary = false; var numchars = 100; </script><script src="http://artikelkomputerku.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=rp"> </script>

catatan:
var numposts = 17 angka 17 bisa anda ganti dengan banyaknya judul postingan yang akan anda tampilkan, misalnya 7
var showpostdate=false , bisa diubah menjadi : var showpostdate=true
var showpostsummary=false , bisa diubah menjadi : var showpostsummary=true
http://artikelkomputerku.blogspot.com anda ubah dengan nama blog anda.


5. Jangan lupa klik tombol Simpan.



Update February 2010
Selain cara di atas anda juga bisa menggunakan cara berikut:


Sebaiknya menggunakan recent post bawaan blogger.bisa dilihat panduannya disini membuat recent post





Artikel Terkait :



5 komentar:

kwangkxz mengatakan...

saya sudah mencoba yang ini, terimakasih sudah share disini.

iklan mengatakan...

Salam kenal......
Mau nanya ni!..
Kalau mau isi tulisan Di halaman baru Misalnya kaq di, INTERNET, SETTING, DONLOAD Tu gimana bos...
maklum masih belajar ni...

Dhirgham Fathur Rohman mengatakan...

langsung praktek

Ridwan mengatakan...

recent post itu gunanya untuk apa mas??
maav saya masih pemula.
hehheee..
slam knal y mas...

Artikel Komputer | Panduan Membuat Blog mengatakan...

@iklan
Mungkin maksudnya menu navigasi, bisa dilihat di sini panduannya
Membuat menu navigasi horisontal, vertikal, dropdown menu menggunakan css menu maker

@Ridwan
Recent post gunanya untuk menampilkan postingan terbaru (atau baru dibuat) banyaknya postingan yang ditampilkan sesuai yang kita inginkan.