Widget Recent Post dengan Preloader

Tabel Konten
  1. Konfigurasi Widget 
Widget Recent Post dengan Preloader

Memperkenalkan widget recent post dengan konsep preloader untuk menangani proses pemuatan halaman yang terlalu berat. Secara teknis, widget ini hanya akan memulai pemuatan konten setelah mencapai waktu yang telah ditentukan:

Lihat Demo

Tambahkan sebuah elemen halaman HTML/JavaScript, kemudian salin kode ini dan letakkan di dalam formulirnya:

<style scoped="scoped">
#dte_recent-post {
  font:normal normal 11px/normal Helmet,Freesans,Sans-Serif;
  color:#333;
  margin:0 auto;
  padding:0;
  min-height:100px;
  background:white url('data:image/gif;base64,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') no-repeat 50% 50%;
}

#dte_recent-post li {
  list-style:none;
  margin:0;
  padding:7px;
  background-color:white;
  border-bottom:1px solid #ddd;
}

#dte_recent-post li a img {
  float:left;
  margin:0 10px 0 0;
  padding:0;
  border:none;
  background:none;
  outline:none;
}

#dte_recent-post li a.title {
  display:block;
  font-size:12px;
  text-decoration:none;
  color:#1155CC;
}

#dte_recent-post li a.title:hover {
  text-decoration:underline;
}

#dte_recent-post li span.foot {
  clear:both;
  display:block;
  color:#ccc;
  margin-top:7px;
  font-size:10px;
}
</style>
<ul id="dte_recent-post"></ul>
<script>
//<![CDATA[
var rp_homePage = "http://nama_blog.blogspot.com", // Your blog homepage
    rp_numPosts = 5, // How many posts?
    rp_thumbWidth = 72, // Thumbnail width. Change to 0 if you want to disable the post thumbnail
    rp_numChars = 100, // Number of posts summary
    rp_sortByLabel = false, // Replace `false` with your specific label name to display posts by specific label
                            // Example: rp_sortByLabel = "jQuery", to sort posts by label "jQuery"
    rp_noImage = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAA3NCSVQICAjb4U/gAAAADElEQVQImWOor68HAAL+AX7vOF2TAAAAAElFTkSuQmCC", // A 'no-image' image
    rp_monthNames = [
        "Januari",
        "Februari",
        "Maret",
        "April",
        "Mei",
        "Juni",
        "Juli",
        "Agustus",
        "September",
        "Oktober",
        "November",
        "Desember"
    ],
    rp_newTabLink = true, // If true, then all the widget links will automatically opens in new window/new tab
    rp_loadTimer = "onload"; // "onload" || time in milliseconds (e.g: 3000, 4000, ...)
//]]>
</script>
<script src="//tovic.github.io/dte-project/blogger-recent-post-with-preloader.js"></script>

Konfigurasi Widget 

OpsiKeterangan
rp_homePageGanti dengan URL blog Anda.
rp_numPostsDigunakan untuk menentukan jumlah posting yang akan ditampilkan.
rp_thumbWidthDigunakan untuk menentukan lebar thumbnail. Ubah lebarnya menjadi 0 untuk menghilangkan thumbnail.
rp_numCharsDigunakan untuk menentukan jumlah karakter ringkasan posting.
rp_sortByLabelGanti nilai false menjadi nama label untuk menampilkan posting berdasarkan label yang spesifik. Contoh: rp_sortByLabel = "jQuery" akan menampilkan semua posting dengan label jQuery.
rp_noImageThumbnail cadangan jika posting yang tampil dalam widget tidak memiliki gambar.
rp_monthNamesTentukan nama-nama bulan sesuai dengan sistem penanggalan di negara Anda.
rp_newTabLinkJika bernilai true, maka semua tautan dalam widget akan terbuka di tab/jendela baru saat diklik.
rp_loadTimerDigunakan untuk menentukan seberapa lama widget akan menunda proses pemuatan sebelum akhirnya mulai memuat. Secara normal bernilai "onload". Artinya bahwa widget akan memuat setelah semua elemen halaman telah berhasil termuat. Anda juga bisa mengganti nilainya dengan satuan waktu milidetik untuk menunda waktu pemuatan selama beberapa detik ke depan. Contoh: rp_loadTimer = 3000 akan menunda pemuatan JSON selama 3 detik.

56 Komentar

  • Surga Kenari

    mas Taufik, coba klik gambar yg ada di posting mas Taufik,

    akan muncul popup img ..

    nah kalo di blog saya kok tidak yah??

    dulu sih iya, tp saya gak tau knp bisa tiba2 skrg gak popup lagi..?

    ada pencerahannya Mas?

    • Taufik Nurrohman

      Aktifkan fitur lightbox melalui pengaturan.

      • Surga Kenari

        saya lihat sudah aktif fitur lightbox nya mas..

        tp kok gak popup yah..

        dulu banget waktu masih polos templatenya sih popup..

        *garuk2 pala* bingung..

        ada solusi mas?

        • uki

          TETOOOOOOOT........ anda kurang beruntung :p

          • Anonim

            asli beneran nyeseul beli bukunya, padahal disini ada..

        • MasOes

          hehehe... setiap gambar image ( img ) jika ingin bisa dibaca oleh mesin pencari yaaa harus ditambah ALTERNATE atau alt .

          Contohnya :

          <a href="URL gambar Anda" kemudian anda harus menambahkan ( img alt="Judul gambar/posting Anda" )

          Kalau Gambar terkena MOUSE maka akan muncul judul gambar/postingnya... BEGITU MAS :)

  • Bayu Handono

    mas kenapa kebanyakan recent post, pengen popular post nih. hehe ngarep :p

    • Taufik Nurrohman

      Widget posting populer sudah ada versi bakunya. Jadi kalau dibuat versi JavaScript-nya malah tidak menarik. Kalau mau memodifikasi widget posting populer masih bisa kok memakai kerangka dari widget bawaan Blogger.

  • Anonim

    izin nyobah gan.. saya pingin banget pasang d blog saya...
    makasih ya gan...

  • Admin SS

    mas kalau ini buat nampilin posting terbaru label. gmna ya mas??
    terima kasih

    • Taufik Nurrohman

      Baca tabel konfigurasi di atas. Untuk menampilkan posting berdasarkan label, ganti nilai false pada variabel rp_sortByLabel dengan nama label, misalnya begini:

      rp_sortByLabel = "Lorem Ipsum"
      • Admin SS

        saya coba buat 2 label kok gak bisa ya mas??

        • Taufik Nurrohman

          Tidak bisa, ini cuma untuk satu label. Kalau mau menggunakan lebih dari satu label, bukannya masih bisa dibuat pengelompokan label baru lagi pada posting-posting yang ingin ditampilkan? :\ (Buat nama kategori baru khusus untuk diterapkan pada widget ini).

          • Admin SS

            "Buat nama kategori baru khusus untuk diterapkan pada widget ini"

            ini mksudnya apa mas??:D

            • Taufik Nurrohman

              Misalnya kita ingin menampilkan semua posting berlabel 'Binatang' dan 'Tanaman'. Agar kedua tipe posting itu bisa tampil, semua posting berlabel 'Binatang' dan 'Tanaman' diberi label lagi bernama 'Makhluk Hidup' (misalnya), setelah itu masukkan nama labelnya dalam variabel:

              rp_sortByLabel = "Makhluk Hidup"
  • Unknown

    Mas saya coba memasukkan kode mas didalam 2 HTML/JavaScript dengan menerapkan label yang berbeda tapi hanya 1 yang terload..
    begitu juga jika sudah terdapat widget daftar isi Blogger dengan navigasi halaman..
    hanya 1 yang terload..
    kira2 apa masalahnya mas..

    • Taufik Nurrohman

      Widget-widget ini memakai pemanggil berupa ID:

      <ul id="dte_recent-post"></ul>
      document.getElementById('dte_recent-post').doSomething();

      Kalau jumlah ID elemen ditemukan lebih dari satu hasilnya jadi error.

      • Unknown

        oh jadi gitu yah mas..
        jadi klo mau menggunakan lebih dari 1 label harus membuat/merubah file yang di:
        "http://reader-download.googlecode.com/svn/trunk/blogger-recent-post-with-preloader.js"
        mengganti "document.getElementById nya" dan nantinya untuk targetnya dibuat lagi ID lg..
        wah klo begi semakin banyak label maka javascript jg semakin banyak..

        atau apa bisa document.getElementById diganti dengan document.getElementByClass??

  • Unknown

    kok recent post nya ga keload? cuma mentok di gambar loading doank?

    mohon pencerahannya mas! ^_^

    • Taufik Nurrohman

      Widget ini Saya setel waktu muatnya dimulai saat halaman sudah termuat semua. Kalau widget tetap tidak termuat, lebih baik gunakan timer saja, jangan memakai indikator halaman termuat:

      rp_loadTimer = 3000; // Pemuatan widget dimulai tiga detik kemudian sejak halaman dibuka/script berhasil diakses

      Selengkapnya, baca tabel konfigurasi di atas.

  • Unknown

    kalau widget popular post preloader ada ga mas? :D

  • Unknown

    kalau cara hilangin tanggal, waktu, dan bulannya gimana mas?

  • Unknown

    makasih telah membantu mas! :D

  • Cahya Maulana

    mas kalo pangen jadi random post gmna mas ??

  • Ridwan N

    Mas Jika ingin memeasangnya dibawah setiap postingan bagaimana ya?

    • Taufik Nurrohman

      Letakkan widget di bawah kode <div class='post-footer'>

  • Unknown

    Makasih banyak widget bagusnya, mas.
    Jadi cakep deh tampilan blog saya :-bd

  • Unknown

    kalo widget recent post ini dibuat menjadi horizontal bisa gk....!!! kalo bisa apa aja yg perlu dirubah....

  • Belitungku.NET

    Assalamualaikum, siang mas.
    kok di blogku gak muncul ya mas? Loading lama, aku tungguin tp gak muncul juga.
    Mohon dibantu ya mas. Terimakasih tutorialnya.
    Kim

  • EM

    ada masalah mas, ketika saya mencoba untuk merubah warna background dari kelas berikut mas

    #dte_recent-post li {
    list-style:none;
    margin:0 0;
    padding:7px 7px;
    background-color:white; /* saya ubah menjadi transparent*/
    border-bottom:1px solid #ddd;
    }

    efek laodingnya yang seharusnya berhenti karena halaman sudah dimuat tetapi malah terus muncul mas,

    tetapi jika backgroundnya tidak dirubah, efek loadingnya hilang, untuk mengatasi masalah ini bagaimana caranya mas?

    terima kasih

    • Taufik Nurrohman

      Saya menambahkan latar warna putih pada elemen daftar untuk menutupi animasi loading di belakangnya. Jadi ketika konten telah termuat, efek animasi loading akan tertutupi oleh warna latar konten tersebut. Kalau dibuat transparan ya jadi terlihat latar di belakangnya. Intinya, samakan saja antara warna elemen daftar dengan warna latar animasi.

      • EM

        ok terima kasih mas
        :-bd

  • Anonim

    wah mantap ini..

  • Mardi

    Mas taufik widgetnya berhasil di pasang, tapi kok thumbnailnya gak muncul sesuai posting. yg muncul gambar no images. coba lihat ini mas http://blogsism.blogspot.com

    • Hari

      masalahnya hampir sama, bantu plz

  • Unknown

    YouTube thumbnail is not showing . It happened 4 days ago.

    • Taufik Nurrohman

      External hosted thumbnails will not go into Blogger JSON object. So the image from YouTube and another server will not be displayed on this widget (and most of the widgets I made). Consider to upload images directly through Blogger image uploader so that they could appear in JSON.

      • Unknown

        Oh no :(! . I need to upload an image on each post I made.
        My site is running a video-blog. Majority all my post contain YouTube Video.
        So , do you planning on fixing the widget?
        I hope you can fix it.

        • Taufik Nurrohman

          Fixing? No, this is currently not a bug. Blogger just simply don't accept/put YouTube thumbnail into their JSON. If you have time, maybe you can make a request about including YouTube thumbnails into Blogger JSON through https://productforums.google.com/forum/#!categories/blogger, so that the thumbnail could appear in the future. But I can't guarantee you'll get a response from them.

          Actually this problem can be solved using the old way like the comment I wrote here
          But this method is outdated. Taking the first thumbnail URL through image tag character detection. Only works with default feed mode. Waste of bandwidth IMO. And it was created when json.feed.entry[i].media$thumbnail.url hasn't been released.

          • Unknown

            I just asked them and no reply ..
            Its making me sad
            haha

  • Unknown

    kalau widget recent post auto reload bisa buatin nggak bos Taufik? ane cari2 di mbah google nggak ada..maksudnya yaitu seperti metode milik beranda facebook..jadi setiap ada post baru langsung muncul, tanpa melakukan reload halaman. kayaknya pernah baca dengan ajax bisa dibuat, tp entah saya juga belum tahu, hehe

    • Unknown

      oh iya sekalian..kalau yang daftar isi dengan halaman itu bisa buatin yang berdasarkan tanggal nggak bro? maksudnya kayak punya http://index.okezone.com/ itu, jadi kita milih tanggalnya, maka akan ketemu post pada tanggal itu. Thanks :)

  • Gue aja

    Makasih infonya bang

  • ISyamsun

    ijin pasang di blog mas. makasih :-bd

  • Angga

    Makasih buat widgetnya mas taufik.. :-bd
    Saya jg mau numpang tanya dong mas.
    . itu screenshot widget yg udah sy ubah pake CSS. yang jd masalah gimana caranya nilai rp_thumbWidthnya di buat berbeda, untuk li:first-child thumbnail besar dan li yang lain ukuran kecil. kalo cuma pake css kn pemborosan ukuran thumbnya mas. sejak kemaren-kemaren saya udah coba edit file JSnya tapi gak berhasil-berhasil mas.mungkin otak sy gak nyampe :'( . mohon pencerahannya mas taufik

    • Taufik Nurrohman

      Kamu bisa memanfaatkan indeks dari variabel i untuk menemukan posting pertama. Indeks yang paling awal tentunya adalah 0. Misalnya begini:

      if (rp_thumbWidth !== 0 && rp_thumbWidth !== false) {
      var rp_thumbWidthOriginal = rp_thumbWidth,
      rp_thumbWidthFirst = 600; // <= Ini untuk thumbnail pertama
      // Cek indeks elemen
      rp_thumbWidth = i === 0 ? rp_thumbWidthFirst : rp_thumbWidthOriginal;
      if ("media$thumbnail" in entry) {
      postImage = '<img style="width:' + rp_thumbWidth + 'px;height:' + rp_thumbWidth + 'px;" src="' + entry.media$thumbnail.url.replace(/\/s[0-9]+\-c/g, "\/s" + rp_thumbWidth + "-c") + '" alt="Loading..."/>';
      } else {
      postImage = '<img style="width:' + rp_thumbWidth + 'px;height:' + rp_thumbWidth + 'px;" src="' + rp_noImage + '" alt="Loading..."/>';
      }
      } else {
      postImage = "";
      }
      • Angga

        Makasih banget buat jawabannya Mas Taufik. udah saya coba, dan berhasil, tapi ada yg mesti di ubah sedikit deklarasi variabelnya. Semoga Mas Taufik dan keluarga senantiasa sehat.

  • Admin

    mas taufik, jika ingin link dan gambar ada title, dibagian js mana ya harus dirubah?

    • Taufik Nurrohman

      postImage = '<img title="' + postTitle + '" style="width:' + rp_thumbWidth + 'px;height:' + rp_thumbWidth + 'px;" src="' + entry.media$thumbnail.url.replace(/\/s[0-9]+\-c/g, "\/s" + rp_thumbWidth + "-c") + '" alt="Loading..." />';
      skeleton += '<a title="' + postTitle + '" href="' + postUrl + '"' + linkTarget + '>' + postImage + '</a>';
      • Admin

        thanks mas taufik :)

  • Unknown

    gak bisa ya jadiin versi carousel?? ._. saya nyoba make
    owlgraphic*com/owlcarousel/ gak bisa..

  • Direkori Penerjemah

    Mas, numpang tanya.
    Awalnya saya pake widget ini normal bahkan sudah beberapa tahun pake widget keren ini gak ada masalah.
    Tapi sekarang kok gak muncul widgetnya ya, mas?
    Kira-kira masalahnya dimana ya, mas?
    Ohm ya, blog saya >>> http://www.direktoripenerjemah.com/
    Terima kasih sebelumnya.

Komentar telah ditutup.