Menyediakan informasi seputar perkembangan mesin Blogger dan internet secara umum.

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

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

Opsi Keterangan
feedsUri Berupa 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.
numPost Digunakan untuk menentukan jumlah posting yang ingin ditampilkan
showThumbnail Ganti nilainya menjadi false untuk menyembunyikan gambar posting
showSummary Ganti nilainya menjadi false untuk menyembunyikan ringkasan posting
summaryLength Digunakan untuk menentukan jumlah karakter ringkasan posting
titleLength Digunakan 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
thumbSize Digunakan untuk menentukan ukuran thumbnail posting
containerId Digunakan untuk menentukan ID kontainer yang akan digunakan untuk memuat widget
readMore Terdiri 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

  

Berlangganan

Berlangganan: Dapatkan berbagai materi dan informasi seputar dunia pemrograman yang tidak akan pernah bisa kalian dapatkan di buku dan di bangku kuliah.

 65 Komentar

Memuat…

Tautan (link) hidup dalam komentar akan terhapus secara otomatis.
Untuk menyisipkan tautan dengan aman, gunakan kode [url=http://example.com]Teks Tautan[/url]
Untuk menyisipkan kode, gunakan tag <i rel="code">KODE ANDA</i>
Untuk menyisipkan gambar, gunakan kode [img]URL GAMBAR[/img]
Untuk menyisipkan judul, gunakan tag <b rel="h4">JUDUL ANDA DI SINI…</b>
Untuk menciptakan efek tebal gunakan tag <strong>TEKS ANDA DI SINI…</strong>
Untuk menciptakan efek huruf miring gunakan tag <em>TEKS ANDA DI SINI…</em>

Khusus untuk membalas komentar disarankan menggunakan tombol balas di samping komentar terkait dibandingkan menggunakan formulir komentar di bawah agar komunikasi lebih terstruktur. Karena mungkin, apa yang Anda tanyakan/katakan saat ini akan sangat bermanfaat bagi pembaca lain.

:) :( ^_^ :D ;) :bd :'( :\ ;p B) :Q :Ozzz 7:( \o/ **p :* 0:) :a 7:O *fuck* x& x@ ~x( *yaya* =p*

Nama Saya Taufik Nurrohman. Sebenarnya Saya tidak bisa disebut sebagai seorang yang profesional dalam bidang ini, karena Saya tidak menguasai bidang ini melalui pendidikan formal. Saya hanyalah seorang antusias. Dibandingkan sebagai seorang desainer atau pengembang, Saya lebih suka jika disebut sebagai seorang hobiis saja yang tertarik dengan dunia web.

Daftar Tautan

Saya tidak bisa hidup tanpa JavaScript! Aktifkan JavaScript?
Ke atas!