Widget Blogger untuk Menampilkan Daftar Posting Terbaru dalam Label-Label yang Spesifik

Tabel Konten
  1. Pemasangan Widget 
  2. Konfigurasi 
  3. Kode Sumber 
Screenshot of multiple recent post widget for Blogger.

Judulnya sangat panjang karena Saya sendiri tidak tahu harus memberi nama apa kepada widget ini. Pada intinya widget ini adalah widget recent post biasa, namun memiliki kemampuan untuk menggandakan diri agar bisa menampilkan daftar posting terbaru lebih dari satu buah berdasarkan label yang spesifik:

Lihat Demo

Pada awalnya Saya membuat widget ini agar bisa menampilkan posting-posting terbaru dari blog tunggal saja, namun mengingat ada juga beberapa blog yang suka menampilkan daftar posting dari blog lain, jadi sekarang widget ini tidak hanya berfungsi untuk menampilkan daftar posting dari satu feed blog, melainkan juga bisa menampilkan daftar posting dari feed blog Blogger yang lain.

Pemasangan Widget 

Masuk ke halaman Tata Letak kemudian tambahkan sebuah widget HTML/JavaScript. Salin kode ini dan letakkan di dalam formulirnya:

<link rel="stylesheet" scoped="scoped" href="//blogger-json-experiment.googlecode.com/svn/resources/multi-feed/multi-feed.min.css"/>
<style scoped="scoped">
/* Custom CSS */
.list-entries {
  margin:5px;
  width:270px; /* Lebar widget */
  float:left;
  font-size:11px;
}
</style>

<div id="feed-list-container"></div>
<div style="clear:both;"></div>

<script>
var multiFeed = {
    feedsUri: [
        {
            name: "Judul Widget 1",
            url: "//nama_blog-1.blogspot.com",
            tag: "jQuery"
        },
        {
            name: "Judul Widget 2",
            url: "//nama_blog-2.blogspot.com",
            tag: "CSS"
        },
        {
            name: "Judul Widget 1",
            url: "//nama_blog-3.blogspot.com",
            tag: "Widget"
        }
    ],
    numPost: 4,
    showThumbnail: true,
    showSummary: true,
    summaryLength: 80,
    titleLength: "auto",
    thumbSize: 72,
    containerId: "feed-list-container",
    readMore: {
        text: "Selengkapnya",
        endParam: "?max-results=20"
    }
};
</script>
<script src="//blogger-json-experiment.googlecode.com/svn/resources/multi-feed/multi-feed.min.js"></script>

Konfigurasi 

OpsiKeterangan
feedsUriBerupa array objek dimana di dalamnya terdapat beberapa data berupa name, url dan tag: name digunakan untuk menentukan judul widget, url digunakan untuk menentukan URL feed, tag digunakan untuk menentukan tag/label posting yang ingin ditampilkan.
numPostDigunakan untuk menentukan jumlah posting yang ingin ditampilkan
showThumbnailGanti nilainya menjadi false untuk menyembunyikan gambar posting
showSummaryGanti nilainya menjadi false untuk menyembunyikan ringkasan posting
summaryLengthDigunakan untuk menentukan jumlah karakter ringkasan posting
titleLengthDigunakan untuk memotong karakter judul posting yang terlalu panjang. Ganti nilainya menjadi angka untuk memotong karakter sebanyak angka tersebut, atau set sebagai "auto" untuk membiarkan judul posting sebagai apa adanya
thumbSizeDigunakan untuk menentukan ukuran thumbnail posting
containerIdDigunakan untuk menentukan ID kontainer yang akan digunakan untuk memuat widget
readMoreTerdiri dari text dan endParam. text digunakan untuk menentukan label tautan “Baca Selengkapnya” yang terletak di bawah masing-masing widget dan endParam digunakan untuk menentukan parameter akhir tautan tersebut (abaikan jika tidak perlu).

Opsi feedsUri merupakan array objek dimana setiap objek akan mewakili masing-masing widget:

// Tiga objek = tiga widget
feedsUri: [{}, {}, {}]

Setiap objek berisi beberapa data yang digunakan untuk menentukan judul widget, sumber URL dan tag/kategori posting spesifik:

feedsUri: [
    {
        name: "Judul Widget 1",
        url: "//nama_blog-1.blogspot.com",
        tag: "Blogger"
    },
    {
        name: "Judul Widget 2",
        url: "//nama_blog-2.blogspot.com",
        tag: "WordPress"
    },
    {
        name: "Judul Widget 3",
        url: "//nama_blog-3.blogspot.com",
        tag: "SEO"
    }
]

Setelah semua konfigurasi sudah diatur dengan benar, klik Simpan Widget. Modifikasi tampilan bisa dilakukan di dalam tag <style> yang Saya tambahkan pada widget di atas.

Kode Sumber 

  1. multi-feed.css
  2. multi-feed.min.css
  3. multi-feed.js
  4. multi-feed.min.js

65 Komentar

  • Anonim

    Mantab mas Taufik, \o/
    Dan Terus Berkreasi :-bd ^_^

  • uki

    mantaf...nih,cocok dengan saya :3

  • Unknown

    Mantap.. :-bd

  • Unknown

    super!

  • Unknown

    cerdddaasssss... keren ni.. thanks om.. :)

  • Beben Koben

    okey :Q

  • Naderu

    tapi kenapa ya bang. koq kadang2 bekerja dengan baik, dan kadang2 ngawur..
    coba lihat ini http://prntscr.com/z9cko
    di kotak label novel yang tampil malah post dari tag template, lalu di kotak label CSS malah post dari label Original RVmalice yang tampil...
    dan itu tidak tentu, kadang berbeda lagi tempatnya...

  • Panjz mackenzie

    keren mas... :-bd

    • Panjz mackenzie

      mas jikalau saya pasang untuk daftar isi dengan penambahan feedsUri sesuai lebel yang ada bisa memberatkan blog ga mas? atau biasa aja :p

  • Unknown

    bisa tidak memakai tag??
    #seperti recent post?

  • Surga Kenari

    mas taufik keren amat, di scroll ga berubah web nya, width sama margin nya pake persentasi bukan piksel :D

    jadi seperti responsive ya?
    ikutin ah cara hebatnya.. :-bd

  • Amdhas

    JSON code yang terlihat anggun sekali.

  • M. Alex Joenaedi

    salute banget pokonya mas.

  • Anonim

    Hadew sudah jauh-jauh mutar pakai pencarian google Akhirnya Malah Ketemu di sini juga tutorialnya..

  • Anonim

    masukan banged ne,.. makasi guyz

  • Gal-ZeXa

    Kang... buatin jadi new tab target='_blank' :-bd haha

  • EM

    assalamu'alaikum,
    code sudah saya copy dan paste di widget html/javascript, tapi hasilnya nihil, mohon bantuannya..

    • Taufik Nurrohman

      Waalaikumsalam. Mungkin itu karena feed posting blog Anda dimatikan. Untuk membuat widget bekerja, feed posting tidak boleh dimatikan.

    • admin

      Sama, saya jg. cara menghidupkan feed postingannya gmn ya?

  • Unknown

    awalx sy pake widget daftar isi Blogger dengan navigasi halaman tp scripx bertabrakan dgn scrip homepage sy jd pake scrip yg diatas aja mas.. :p

    tp sy masukkan dlm postingan, trus tuk membuat rata tengah gmn tuh mas?

    sy berandai-andai dan ngareppp, mgkn keren klo pake navigasi \o/

    http://rohis-facebook.blogspot.com/2011/03/artikel-terbaik-pilihan-pengunjung.html

  • Inspironi

    Fresh and cool tampilannya, satu lagi loadingnya cepat :)

  • Unknown

    Tajuk hilang sekiranya saya membuang float:left pada .list-entries img

    http://jsfiddle.net/LSssw/1/

    ada solusinya gak?

    • Taufik Nurrohman

      This widget will force the height of each item to match the height of the image. This is intended to ensure that each widget will have the same height. The title of each item just hidden outside the part of the excess height.

      There is a hidden option inside the widget called autoHeight, but I didn't include it in the configuration table considering this option is not very productive. If you want to disable the force height of the widget item, just add this option, and set to true

      var multiFeed = {
      autoHeight: true
      };
  • Anonim

    keren euy \o/

  • Anonim

    Mantap banget gan, super load deh,,,top

  • Islamic Book Corner

    Misi numpang tanya ya gan. Klo ane punya blog tapi pada halaman utama selalu nampilin posting terbaru. padahal saya pengen postingan dengan label tertentu saja tidak tampil disana. kira2 gimana ya cara bikinnya. saya sudah googling tapi kurang pas.

  • Andi AF Studio

    haiss.. mantap! pas nih di bahwan navigasi :D

    • Andi AF Studio

      #typo > bahwan maksudnya bawah, bukan bakwan :D

      #bloggertanpamenueditkomen

  • Unknown

    Keren widget nya mas! Ringan lagi.. :)

  • Andi AF Studio

    gak dikasih izin buat ngubah warna :D

  • ansari jelek

    keren, loadingnya cepat bang, tapi cuma bisa pasang satu script. untuk di tempatkan di element lain. misal (sidebar dan footer) tidak bisa yah .?

  • Aulia Batubara

    Mantab Mas, banyak kebaikan yang mas dah buat nech

  • V

    mas, bisa gak setiap widgetnya CSSnya di edit.
    soalnya pengen ngedit tampilan judulnya masing-masing supaya beda-beda gitu. :)

    mohon bantuannya mas. 0:)

  • Unknown

    Mas Taufik, saya mau tanya. Misalnya saya memiliki banyak blog dalam satu account, salah satunya sebagai blog utama. Saya ingin setiap postingan yang saya buat pada masing2 blog akan muncul secara otomatis di blog utama. Apa mas taufik tau bagaimanya caranya? saya sudah mencoba mencari caranya diberbagai situs tapi saya tidak menemukannya sama sekali. jika mas taufik punya ide, tolong saya untuk menyelesaikannya. sebelumnya saya ucapkan terima kasih banyak.

  • Unknown

    tutorial yg sangat menakjupkan

  • fantasiku

    pokoknya kalau mau mencari widget dengan style html5 tempatnya disini keren and ga nyesel www.fantasiku.com

    • Unknown

      oke mbak langsu ke lokasi aja nih ..

  • Unknown

    Ok makasi boz

  • Fahru Rofi

    pak, kalo scriptnya jalan setelah semua elemen blog selesei gimana ? apa bisa langsung dimasukkan ke jquery document ready function?

    • Taufik Nurrohman

      Paling mudah dibuat hilang wujudnya dulu, lalu munculkan setelah semua posting di dalam widget termuat:

      #feed-list-container {display:none}
      var multiFeed = {
      onLoadComplete: function() {
      document.getElementById(this.containerId).style.display = "block";
      }
      };
  • Anonim

    ini widgetnya langsung muncul tiga gitu ya mas, misalnya mau dibuat satu satu gitu gimana mas :yaya:

  • Unknown

    assalammualaikum pak taufik

    URL nya harus pake nama webnya yang pak ?

    misalkan kalo kita pake URL: yang seperti ini

    http://jurnalotaku.com/category/animanga/

    Bisa gk yah ?

    :)

  • Adi Hermawan

    Makasih masbro :-bd
    bisa cek sini hasilnya http://adi7bello.blogspot.com/

  • friend of the night

    ajib...Izin Pasang mas...makasi

  • Unknown

    gan, kalau mau ngatur agar semua postingan pada label keluar semua gmana ya? apa tinggalganti jumlah yg akan keluar?

  • Unknown

    Ini yg kucari ada disini, ijin pakai mas :)

  • Cito

    mantap masbos...sy masih nubi pengen belajar juga ngutak atik, meski otodidak
    penerapan ini bisakah pada sidebar ? :-bd

  • Unknown

    Mas kalo buat (3 diatas 3 di bawah) gimana ya?

    • Taufik Nurrohman

      Diatur saja lebar kontainernya supaya cuma muat tiga widget, nanti sisanya ke kanan yang tidak muat akan turun ke bawah dengan sendirinya membuat ruang kosong baru di bawahnya.

  • Blog Adhwa

    mas kalo buat warna masing masing label beda gimana ya?

    • Taufik Nurrohman

      Pakai CSS3:

      .list-entries:nth-of-type(1) {background-color:red}
      .list-entries:nth-of-type(2) {background-color:orange}
      .list-entries:nth-of-type(3) {background-color:yellow}
      .list-entries:nth-of-type(4) {background-color:green}
      …
  • Unknown

    wah..., saya suka sekali, trims untuk free templatenya mas, bagus dan fast loading, juga script ini sudah saya pasang dan hasilnya tidak memberatkan loading blog.

  • Febri Tri Harmoko

    mas taufik . saya sudah berhasil menggunakan nya. tapi ini mau saya gunakan untuk di bagian footer di jadiin recent post gitu per label.
    nah masalah nya kan saya mau bikin hanya 2 objek saja. trus bikin lagi yg baru di seblh ny.
    pertama saya sudah pindahkan CSS am JS + link nya pindah ke tamplate/ HTML ny langsung.
    maksd ny sih biar ntr kalau mau pasang widget ny banyak2 gak perlu masukin JS yg sama berulang2 gt. tpi kenpa gak work yah ? JS ny saya letakan di </head>

  • ryan

    saya coba di halaman statis bisa gak ??

  • desa linggajati

    mantap kang

  • Tuppy Probolinggo

    Pertama make bisa, trus sehari kemudian blog di buka ndak muncul lagi gan, mohon petunjuknya gan.. sungram-probolinggo.blogspot.com

  • Awax Badan

    Assalamu'alaikum.
    Mas Taufik, Saya mohon izin menyimpan + menggunakan kode js dan css widget ini. Terima kasih

  • Addict Covers

    Hi Taufik, i have one doubt.

    Blogger has the Feed gadget, as you may know, we can input a url feed from another souce, if this source provide feed rss, of course, how to callback the post thumbnail from that feed source?

    the native blogger feed gadget only provide a list.

    • Taufik Nurrohman

      Depends. If the result is an iframe, I can do nothing. Other than that depends to the Blogger XML API.

Komentar telah ditutup.