membuat recent post dengan javascript

Jika dulu saya pernah memposting tutorial menampilkan recet post atau postingan terbaru di web atau blog khususnya blogger blogspot, kini saya akan memposting tutorial yang sama tapi dengan menggunakan javascript, tp sebelumnya kalo ingin menggunakan widget generator recent post klik disini, anda tingal klik langsung jadi alias ga usah repot2 manual, dan jika pengen melihat postingan cara membuat recent post yang default yang dulu pernah saya posting silahkan klik disini dan siapa tau bisa anda jadikan bahan pertimbangan yang mana yang nanti akan anda pilih..
Sekarang saya akan memberi tahukan apa keuntungan menggunakan cara yang ini, yaitu jumlah recent post yang bisa anda tampilkan akan bisa lebih banyak di bandingkan jika menggunakan recent post default blogger, yang mana jika anda menggunakan recent post default blogger maksimal recent postingannya cuman 5 postingan terbaru yang bisa tampil, sedangkan jika anda menggunakan cara yang ini ( menggunakan javascript ) postingan terbaru yang bisa di munculkan maksimal adalah 25 posting terbaru... Dan ditambah lagi kelemahan dari menggunakan recent post default blogger yaitu jika anda habis posting artikel recent post anda tidak akan keluar dengan langsung alias lama dan jika anda menggunakan cara ini recent post anda akan lebih cepat munculnya setelah anda melakukan posting...
Nah... setelah anda mengetahui apa kelemahan dan kekurangan dari masing masing selanjutnya terserah anda, ato bahkan anda ingin bercuap cuap yang lainnya disini juga monggo monggo mawon.. hehhe ( pake bahasa jawa dikit )
Ok... ga banyak kata lagi... langsung aja simak baik baik yah....
seperti biasanya disini saya akan memberikan script mentah dan mateng dan saya akan memberikan matengnya duluan... biar ntar pembaca jadi kenyang duluan... wekekkeke...
silahkan copy code script dibawah ini :


<script src="http://ekhan.gitar1stindo.googlepages.com/recentpost.js"></script>
<script>var numposts = 25; var showpostdate = false; var showpostsummary = false; var numchars = 100; </script>
<script src="http://ganti-dgn-blog-anda.blogspot.com/feeds/posts/default?orderby=published&amp;alt=json-in-script&amp;callback=rp">
</script>


sekarang masukkan script di atas di bagian sidebar atau yang lainnya pada blog anda yaitu dengan cara : masuk kehalaman LAYOUT kemudian tambahkan elemen halaman dengan cara ADD A GADGET / TAMBAHKAN GADGET, kemudian pilih lagi pilihan HTML/JAVASCRIPT .. dan setelah anda masukkan jangan lupa tekan SAVE / SIMPAN ...

Jika anda masih kurang puas dengan script yang sudah jadi dan sudah saya upload yaitu yg ini ( buka saja ini : http://ekhan.gitar1stindo.googlepages.com/recentpost.js ).. dan ingin anda miliki sendiri dan anda taruh ke web file hosting pilihan anda seperti ( www.googlepages.com, www.geocities.com, dan www.ripway.com ) maka copy lah script mentahan dibawah ini kemudian anda upload sendiri dengan ekstensi penyimpanan file adalah ( .js )




//credit to hoctro
function rp(json) {
document.write('<ol>');

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 = "(more)";
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, "");
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>');

}


Setelah script diatas anda upload di web file hosting milik anda dengan nama ekstensi fille ( .js ) maka tahap selanjutnya adalah copy alamat url file yang barusan anda upload tadi ( yang berekstensi ( .js ) tadi loh ) dan ganti code script dibawah ini yang saya kasih tanda kata kata berwarna :


<script src="http://ganti-dgn-alamat-url-file-yg-anda-upload-tadi.com/contoh-file.js"></script>
<script>var numposts = 25; var showpostdate = false; var showpostsummary = false; var numchars = 100; </script>
<script src="http://ganti-dgn-blog-anda.blogspot.com/feeds/posts/default?orderby=published&amp;alt=json-in-script&amp;callback=rp">
</script>


Dan taruh seperi cara yang diatas tadi [ klik disini untuk melihat cara yang tadi ]

Setelah itu... lihat hasilnya.....
gimana...? masih bingung..? moga aja nggak yah... coz udah saya coba jelaskan dengan sedetail detailnya... tapi kalo emank masih bingung, silahkan kayak teman teman yang lainnya yah... yinggalkan pesan pertanyaan di posting komentar dibawah ini, dan sekalian sambil beriklan posying koment... jadi lah yang nomor satu di urutan teratas pengomentar karena peluang blog anda akan di klik orang akan lebih banyak... sebelumnya... semoga sukses n sukses mengeblog...
Sampai jumpa..........

34 Responses to "membuat recent post dengan javascript"

  1. Terimakasih, Mas.
    Postingnya bermanfaat banget n langsung aq coba dan hasilnya memuaskan, thanks a lot.

    www.bisnisguru.co.nr

    ReplyDelete
  2. oke mas.. sama sama..... silajkan disantab aja yah mas.... hehehe 8-}

    ReplyDelete
  3. sip bos, pertimbangannya dah dilaksanakan

    ReplyDelete
  4. Makasih om tutorialnya,,, ntar saya coba moga-moga aj berhasil yach,,,,

    Maen ya ke blog saya juga,, skalian minta sarannya apa yang kuran gdari blog saya,, makasih Om

    ReplyDelete
  5. kunjungi juga blog saya ya
    salam kenal semua buat teman-teman yang ada disini

    http://world-in-mydreams.blogspot.com

    ReplyDelete
  6. boz ko kotak comment w ngga ada juga sih,padahal dah w coba cara yang boz kasih,tolong dong..!!!

    ReplyDelete
  7. keren jg blog ente, salut.....

    ReplyDelete
  8. Boss..keren!!
    jln recentpost'y..

    mo minta ilmu'y lg boss..
    klo mo ilangin nomor recentpost'y gmn yach??
    soale tampilannya jd aneh di blog saya!!
    thanks..

    ReplyDelete
  9. thanks infonya bro.. bermanfaat bgt.. saluutt

    ReplyDelete
  10. widih...tutor nya keren nih bro, ane mo minta ijin buat coba ya...

    ReplyDelete
  11. Mas mo tanya cara bikin tombol KLIK TAMPILKAN SCRPT dan KLIK SEMBUNYIKAN dong....

    ReplyDelete
  12. mas,... berhasil recent post-nya tuh.thx.

    ReplyDelete
  13. di blog ku koq gagal terus yaa... :(

    ReplyDelete
  14. Wish....keren triknya. au udah nyari" triknya ini, soalnya yang laennya itu pake cara "recent post default blogger".
    Thx atas Infonya

    ReplyDelete
  15. Gimana Bos! ko belum bisa muncul yah... html sdh tak copy paste. Pake feed pas tinggal di save juga ga bisa. Mohon bantuannya...

    ReplyDelete
  16. Hehe. .thank's gan info+scriptnya, btw yg auto generate tak coba gagal euy :p

    ReplyDelete
  17. Mas, bisa juga buat recent post dengan klasifikasi label. Jadi kamu bisa lihat artikel terbaru dari tiap label. kunjungi aja http://infotentangblog.blogspot.com/2009/07/recent-post-dengan-label.html ;)

    Dikomen juga, ya!

    ReplyDelete
  18. siip dech.. tipsnya emang mantep banget tukeran link nyok???

    ReplyDelete
  19. thanks infonya, sangat membantu sekali...lanjutkan trusss kreatifitasnya

    ReplyDelete
  20. thanks infox,, sudah trpasang di blog'ku..

    ReplyDelete
  21. thank bang ayik tutorial recent postnya, bagus banget neeh

    ReplyDelete
  22. makasih kang
    http://ismailarz.blogspot.com/

    ReplyDelete
  23. Ne yg aq cari dr td .. akhirny googling q berakhir dimari, thanks
    Adobe Dreamweaver cs 6 full version

    ReplyDelete
  24. kalau bikin recent pos dalam bentuk baris gimana gan?

    ReplyDelete
  25. ijin praktek ilmunya gan,,, lanjutkan,,,hahha

    ReplyDelete
  26. nyimak gan,,,artikelnya keren

    ReplyDelete
  27. Ko' saya copas langsung yang cara di atas gak bisa ya mas

    ReplyDelete

Berkomentar sambil beriklan ( iklan baris ), mau ga..?
So.. jadilah orang PERTAMA yang berkomentar, blog anda akan di lihat banyak orang.....
Tapi perlu diingat,.. DILARANG SPAM / KOMENTAR SAMPAH, bercanda / guyonan oke.. spam no...!
Spam / Sampah akan saya hapus tanpa ampun...

+--+