Widget Daftar Posting Diperbaharui / Yang Telah Diupdate

Widget Daftar Posting Diperbaharui
Widget Daftar Posting Diperbaharui

Widget daftar posting diperbaharui yang dimaksud dalam posting kali ini adalah widget yang didalamnya berisi daftar posting yang telah diperbaharui/diupdate oleh admin blog.

Demo

Cara Membuat Widget Daftar Posting Yang Telah Diperbaharui

  1. Buka dasbor blogger anda
  2. Pilih Tata Letak klik add elemen/tambah gadget
  3. Kemudian pilih HTML/JavaScript
  4. Copy code HTML di bawah ini kemudian masukkan.
  5. Menambahkan HTML

    <ol id="updated-posts"></ol>

    Menambahkan CSS

  6. Selanjutnya masuk ke menu edit template/template. Kemudian tambahkan CSS di bawah ini tepat di atas ]]></b:skin>
    li.update {
        list-style: none;
        height:60px;
        overflow:hidden
    }
    .imgupdate {
        float:left;
        margin:5px 10px 0 5px
    }
    .tgl-com {
        display:block;
        font-size:90%
    }
  7. Menambahkan JavaScript

  8. Terakhir masukkan kode di bawah ini tepat di atas </body> dengan format penulisan <script> code disini </script>
    // Pengembangan dari http://www.dte.web.id/2012/01/basic-json-feeds-for-blogger.html
    // Widget Daftar Posting Diperbaharui
    // Nodified : yOu w4hyOu
    // https://plus.google.com/106933633716411881896/about
    // http://info-kmu.blogspot.com/
    
       function updatedPosts(a) {
        if (document.getElementById("updated-posts")) {
            var e = a.feed.entry,
                title, img, link, date, content = "",
                ct = document.getElementById("updated-posts");
            for (var i = 0; i < 7; i++) {
                for (var j = 0; j < 7; j++) {
                    if (e[i].link[j].rel == "alternate") {
                        link = e[i].link[j].href;
                        break
                    }
                }
                var title = e[i].title.$t,
                    pd = e[i].published.$t.substring(0, 10),
                    date = pd.replace(/-/g, "/");
                if ("media$thumbnail" in e[i]) {
                    img = e[i].media$thumbnail.url
                } else {
                    img = "http://2.bp.blogspot.com/-LQV025ltHWI/UnZSnJQN_GI/AAAAAAAAGes/gbXNGWA21LY/s40/logon.png"
                }
                content += '<li class="update"><img src="' + img.replace(/\/s72-c/, "/s40-c") + '" class="imgupdate" alt="thumb" height="40px" width="40px"/>';
                content += '<strong><a href="' + link + '" target="_blank">' + title + '</a></strong><span class="tgl-com"> diposkan pada ' + date + "</span></li>";
            }
            ct.innerHTML = content
        }
    }
    function getScript(url) {
        var s = document.createElement("script");
        s.type = "text/javascript";
        s.src = url;
        document.body.appendChild(s)
    }
    getScript("//info-kmu.blogspot.co.id/feeds/posts/summary?alt=json-in-script&orderby=updated&max-results=7&callback=updatedPosts");
    Jangan lupa untuk mengganti alamat blog yang ditandai dengan alamat blog kamu.
  9. Simpan

Lihat Juga

Widget daftar posting diperbaharui yang dimaksud dalam posting kali ini adalah widget yang didalamnya berisi daftar posting yang telah diperbaharui/diupdate oleh admin blog.
Reaksi :
Blok kemudian tekan tombol Ctrl dan huruf C pada keyboard secara bersamaan untuk copy artikel di atas. Bagi pengguna Google Chrome bisa menyimpan halaman ini dalam bentuk *pdf melalui tombol print/save di atas.! Bagi yang mau repost ulang harap untuk mencantumkan tautan/sumber!..

Jika Anda menyukai , Share melalui social media di atas (satu suka dari anda sangat berarti bagi kami. Tuliskan kritik dan saran anda pada form komentar di bawah! Ketikan email dan klik subcribe untuk berlangganan gratis via email, dengan begitu Anda akan mendapat kiriman artikel setiap ada artikel yang terbit di Info [K-Moe].

Halaman relevan lainnya
Beri Komentar

24 Responses to "Widget Daftar Posting Diperbaharui / Yang Telah Diupdate"

  1. nah, ini yang saya tunggu-tunggu. :D

    hebat banget niru codenya \o/

    BalasHapus
    Balasan
    1. Komentar ini telah dihapus oleh pengarang.

      Hapus
    2. oke mantab, sudah work

      cara mengurangi jumlah postnya bagaimana...?
      setiap kali saya coba mengganti angka 7 di script tersebut widgetnya malahan jadi error (undefenied)

      Hapus
    3. Pastikan memakai script diatas (sudah diupdate).cari code ini kmudian ubah nilai 7document.getElementById("updated-posts");
      for (var i = 0; i < 7; i++) {
      for (var j = 0; j < 7; j++) {
      if (e[i].link[j].rel == "alternate")

      lalu coba pada script pemanggilan feed ganti nilai max-result=7

      Hapus
    4. Check http://jsfiddle.net/JJBZv/3/

      Hapus
    5. saya sudah mencoba merubahnya dari situ mas ,
      hasilnya jadi undefenied

      Hapus
    6. Saya chek yang http://jsfiddle.net/JJBZv/3/ bisa sob...
      Kalo masih gagal, coba pake yang ini saja var homePage = "http://www.infokmu.com/", // Ganti dengan alamat blog anda
      numPosts = 10; // Konfigurasi untuk mengatur jumlah posting
      // feed
      function updatedPosts(a) {
      if (document.getElementById("updated-posts")) {
      var e = a.feed.entry,
      title, img, link, date, content = "",
      ct = document.getElementById("updated-posts");
      for (var i = 0; i < numPosts; i++) {
      for (var j = 0; j < numPosts; j++) {
      if (e[i].link[j].rel == "alternate") {
      link = e[i].link[j].href;
      break
      }
      }
      var title = e[i].title.$t,
      pd = e[i].published.$t.substring(0, 10),
      date = pd.replace(/-/g, "/");
      if ("media$thumbnail" in e[i]) {
      img = e[i].media$thumbnail.url
      } else {
      img = "http://2.bp.blogspot.com/-LQV025ltHWI/UnZSnJQN_GI/AAAAAAAAGes/gbXNGWA21LY/s40/logon.png"
      }
      content += '<li class="update"><img src="' + img.replace(/\/s72-c/, "/s40-c") + '" class="imgupdate" alt="thumb" height="40px" width="40px"/>';
      content += '<strong><a href="' + link + '" target="_blank">' + title + '</a></strong><span class="tgl-com"> diposkan pada ' + date + "</span></li>";
      }
      ct.innerHTML = content
      }
      }
      var you_script = document.createElement('script');
      you_script.src = homePage + '/feeds/posts/summary?alt=json-in-script&orderby=updated&max-results=' + numPosts + '&callback=updatedPosts';
      document.getElementsByTagName('head')[0].appendChild(you_script);

      Demo http://jsfiddle.net/w4hyou/JJBZv/21/

      Hapus
  2. Balasan
    1. Komentar ini telah dihapus oleh pengarang.

      Hapus
    2. saya cek udah work kang ... saya coba izin acak-acak lagi

      Hapus
    3. ko pas di klik judul'y malah eror kang ...

      Hapus
    4. iya ternyata masih belum fix.. sekarang insyaalloh sudah.. silahkan cek kang... http://jsfiddle.net/JJBZv/1/

      Hapus
    5. iya sekarang work dan nanti saya akan bikin postingan nya karena dibalut menggunakan blogazine kang .. sekalian izin reshare saja hehe

      Hapus
  3. mas, cara membuat back to top kayak blog ini gimana?

    BalasHapus
  4. hasil dari pemasangan widget di atass udah work, cuman ada kendala dikit mas, pada tulisan tanggal tampilan nya seperti ini seperti ini 2014/01/17
    bisa ga mas tampilan tanggal nya seperti ini 17 januari 2014
    Terima kasih...

    BalasHapus
    Balasan
    1. Untuk mengubahnya kita perlu mengedit Javascript sebelumnya, kurang lebihnya seperti ini.
      Copy code ini o = ["Januari", "Februari", "Maret", "April", "Mei", "Juni", "Juli", "Agustus", "September", "Oktober", "November", "Desember"],
      ct = document.getElementById("updated-posts");
      for (var i = 0; i < 7; i++) {
      for (var j = 0; j < 7; j++) {
      if (e[i].link[j].rel == "alternate") {
      link = e[i].link[j].href;
      break
      }
      }
      var title = e[i].title.$t,
      pd = e[i].published.$t.substring(0, 10).split("-");
      if ("media$thumbnail" in e[i]) {
      img = e[i].media$thumbnail.url
      } else {
      img = "http://2.bp.blogspot.com/-LQV025ltHWI/UnZSnJQN_GI/AAAAAAAAGes/gbXNGWA21LY/s40/logon.png"
      }
      content += '<li class="update"><img src="' + img.replace(/\/s72-c/, "/s40-c") + '" class="imgupdate" alt="thumb" height="40px" width="40px"/>';
      content += '<strong><a href="' + link + '" target="_blank">' + title + '</a></strong><time class="tgl-com" datetime="' + pd.join("-") + '"> ' + (pd[2] + " " + o[(parseInt(pd[1], 10) - 1)] + " " + pd[0]) + '</time></li>';
      }


      Kemudian tempatkan seperti pada instruksi di bawah ini function updatedPosts(a) {
      if (document.getElementById("updated-posts")) {
      var e = a.feed.entry,
      title, img, link, date, content = "",

      //Kode Tadi Simpan Disini diantara title, img, link, date, content = "",disini ct.innerHTML = content}

      ct.innerHTML = content
      }
      }


      Hapus
    2. terima kasih sudah mau membantu...

      Hapus
    3. terima kasih mas wahyu, Widget daftar posting diperbaharui dipasang di blog saya dan langsung work, tapi kalau saya rubah format tanggal seperti pertanyaanya mas taufik karim masih gagal, harus pakai jquery versi berapa mas?

      Hapus
    4. Ini pakai javascript murni jadi ga pakai Jquery juga bisa.
      Untuk merubah tanggal, ini demonya coba lihat demo di http://jsfiddle.net/JJBZv/29
      Semoga membantu

      Hapus