Blog Inspirasi Digital

Blog Inspirasi Digital

Tutorial Mikrotik, Hotspot, Blog, SEO, WEB 2.0, HTML, CSS, Javascript dan Inspirasi Digital

Full Source Code "Recent Post" For Blogger Beta

Posting terbaru  atau biasa disebut Recent Post merupakan informasi singkat dari judul posting terbaru yang ditampilkan secara berurutan agar memudahkan pengunjung melihat urutan posting yang telah kita buat. Untuk membuat recent post kita bisa menggunakan source code dibawah. Mengenai cara penggunaan code telah saya jelaskan pada posting Full source code "Recent Comments" for blogger"  jadi tidak ada perbedaan dalam cara menggunakannya caranya hampir sama, yang membedakan hanyalah cource code nya.


Source code ini masih terdiri dari 2 bagian, pada code bagian pertama pertama kode ini dapat dimasukan dimana aja selama kita mempunyai tempat penyimpanan pada directory web. jika gak punya directory penyimpanan pada web site kita dapat menggunakan layanan gratis misalnya http://www.geocities.com  atau http://www.tripod.com  Sebelum melakukan proses upload ada baiknya buka notepad terlebih dahulu atau tools text editor apa saja, kemudian copy-paste kode dibawah ini simpan dengan nama (mis: recentcomments.txt). Jika nama file sudah tercipta lakukan upload seperti biasa, pasti udah tau caranya khan :). Jika menggunakan layanan http://www.geocities.com kita tinggal login kemudina menuju  File Manajer - ketikan nama file-nya kemudian klik tombol new, hapus semua tulisan kemudian copy paste pada halaman tersebut dan terakhir jangan lupa disimpan :)
 

Kode bagian pertama :

// ----------------------------------------
// SHOW RECENT POST
// ----------------------------------------
// This functions takes a blogger-feed in JSON
// format and displays it.
//
// Version: 2.1
// Date:    2007-02-02
// Author:  Hans Oosting
// URL:     beautifulbeta.blogspot.com
// ----------------------------------------
function showrecentposts(json) {

  for (var i = 0; i < numposts; i++) {
    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 = "(Baca)";
    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 (!standardstyling) document.write('<div class="bbrecpost">');
    if (standardstyling) document.write('<br/>');
    document.write(posttitle);
    if (showpostdate == true) document.write(' - ' + monthnames[parseInt(cdmonth,10)] + ' ' + cdday);
    if (!standardstyling) document.write('</div><div class="bbrecpostsum"">');
    if (showpostsummary == true) {
      if (standardstyling) document.write('<br/>');
      if (postcontent.length < numchars) {
         if (standardstyling) document.write('<i>');
         document.write(postcontent);
         if (standardstyling) document.write('</i>');}
      else {
         if (standardstyling) document.write('<i>');
         postcontent = postcontent.substring(0, numchars);
         var quoteEnd = postcontent.lastIndexOf(" ");
         postcontent = postcontent.substring(0,quoteEnd);
         document.write(postcontent + '...' + readmorelink);
         if (standardstyling) document.write('</i>');}
}
    if (!standardstyling) document.write('</div>');
    if (standardstyling) document.write('<br/>');
}
if (!standardstyling) document.write('<div class="bbwidgetfooter">');
if (standardstyling) document.write('<br/>');
document.write('<span style="font-size:80%;"></span>');
if (!standardstyling) document.write('</div>');
document.write('<span style="font-size:80%;">Widget by <a href="http://hackosphere.blogspot.com">Hackosphere</a><br/>Powered by <a href="http://beautifulbeta.blogspot.com">Beautiful Beta</a></span>');
if (!standardstyling) document.write('</div>');
}
Untuk melakukan memanggilan pada kode diatas kita tinggal menggunakan code dibawah ini, caranya tinggal copy paste code tersebut dan masukan pada halaman element blogger.

Kode bagian kedua :

<script style="text/javascript" src="http://www.geocities.com/oom_directory/recentpost.txt"></script><script style="text/javascript">var numposts = 5;var showpostdate = true;var showpostsummary = true;var numchars = 100;var standardstyling = true;</script><script src="http://o-om.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentposts"></script>

Jangan lupa mengubah kode pada kode bagian kedua, perubahan dapat dilihta pada warna merah dan pink.

Pada warna merah : Alamat tempat kita menyimpan code bagian pertama
Pada warna pink : Ganti dengan alamat blog mu


Malas mempraktekan code diatas kamu bisa  install langsung ke blog mu :



Jika ada pertanyaan mengenai kode diatas bisa masukan melalui komentar. terima kasih (oom)

36 komentar:

  1. Terima kasih, oom...
    It works...!!

    BalasHapus
  2. Anonim9/12/07

    Thanks oom, bagus banget oom, kalo buat header ada gambar kayak punya oom itu gmana?hehee

    BalasHapus
  3. kang kok gabisa ya buat recent post nya? kalo recent coment udah bisa.. gmn dong kang.. :)

    BalasHapus
  4. om tolong saya buar recent post dan recent coment duh pusing ni liat codenya ga ada nyambung:(. maksud saya biar orang2 bisa konsultasi gratis dengan saya.
    mohon bantuannya makasi ya om

    BalasHapus
  5. Om tolong nih... Kenapa Recent Postnya gak mau muncul ya... ??? Koding nya uda saya copy paste sesuai dengan saran Om...

    Kl koding yang ini dirubah ato enggak ya ???

    Widget by {a href="http://hackosphere.blogspot.com"}Hackosphere{/a}
    {br/}Powered by {a href="http://beautifulbeta.blogspot.com"}Beautiful Beta{/a}

    *Maaf kode < saya ganti jadi { biar kebaca di sini*

    Kl gak muncul recent post itu biasanya masalahnya apa ya... ???

    Thank's ya...

    BalasHapus
  6. whooaahhh, aku males trus main klik tombol "install widget" itu malah di page element menu add elementku raib heheheh.. wuh nasib..

    BalasHapus
  7. Makasih Om, dah berhasil tuh recent post-nya. Mau tanya boleh?? :D. Kalau hanya mau tampilin judul post & linknya aja, tanpa ada tanggal & "summary"-nya, code bagian mana yang diubah??

    BalasHapus
  8. makasih om, codenya,.. mau tanya om,..
    pertanyaan saya sama dgn faiqun,..
    gimana caranya tampilin judul postnya saja. kyk punya om samping kanan "Artikel"
    thx, a lot om,.
    Semangat,.!

    BalasHapus
  9. wah gk jadi bimana ya??

    BalasHapus
  10. Anonim22/8/08

    Adoh... itu coding kedua ditaruh dimana ci? Selalu dibilang "kode ga ditutup sempurna" T____T ga berhasil berhasil

    BalasHapus
  11. Anonim23/9/08

    Sorry..koreksi..maksudnya maksimal recent post yg dapat kita tampilkan berapa ?

    thx

    BalasHapus
  12. tanya lagi...tadi tanya jumlah maksimal recent post yg dapat tampil (blom dijawab sih), sekarang saya mau donk untuk recent comments nya, bisa beri tahu naruh code nya (alamat or link code nya)

    BalasHapus
  13. Anonim20/10/08

    bos, koq dah nggak bsa lgi.....?
    tlong cek di blog saya..
    thanks

    BalasHapus
  14. Anonim28/11/08

    Sekarang da ga perlu repot2 lagi kalo mau bikin recent post / comments :D. tinggal ke Layout>Page Elements>add gadget truss pilih feed.
    tar tinggal masukin url feed (comment/post) blog kita tapi kayaknya maksimal cuman bisa 5 recent, ga tau kalo bisa di edit di halaman html. Bikin tutornya dunk om wat maks in jumlah recent yg mau ditampilin :).

    BalasHapus
  15. Salam kenal semua.
    terima kasih atas tulisannya di blog ini.
    Saya blogger pemula dan masih banyak belajar

    BalasHapus
  16. Anonim17/1/09

    kenapa ga muncul ya di tempat ku??
    uda ku copy paste jg lor??
    tolong beri tau ya mas...

    tq very much

    BalasHapus
  17. KEREN......B-)

    http://free-musicz.blogspot.com/

    sukses sllu.:D

    BalasHapus
  18. http://music-zero.blogspot.com/

    Share link download mp3 aza deh ...hehehehehe :-"

    BalasHapus
  19. mas, ada juga recent post yang diklasifikasikan dengan label, jadi kamu bisa liat post/artikel terbaru dari tiap label.
    kunjungi aja http://infotentangblog.blogspot.com/2009/07/recent-post-dengan-label.html. ;)

    Jangan lupa dikomen, ya! :D

    BalasHapus
  20. Thanks ilmunya om..http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/3.gif

    BalasHapus
  21. Terima kasih infonya... artikelnya bagus...

    BalasHapus
  22. makasih om........

    BalasHapus
  23. info kerja terbaru 2010

    BalasHapus
  24. Terimakasih om, semoga kali ini berhasil....

    banyak gagalnya nih. maklum nubi..hehe..
    oya, templet blogku semuanya dari om. i like it... simpel n ringan...

    BalasHapus
  25. terimakasih o-om,,,coba dicoba ya ?

    BalasHapus
  26. Terima kasih Om, tutorialnya udah dicoba dan berhasil.

    BalasHapus
  27. makasih banyak ya om

    BalasHapus
  28. akhirnya bisa juga...thanks atas tutorialnya :)

    BalasHapus
  29. hiks geocities dah ga bisa upload :( mau di upload dimana ya sourcenya :(

    BalasHapus


 

Back to Top