Mecha versi 2.6.4 sudah dirilis!

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

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

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.

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.. :)

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 ..

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/

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 ??

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.