18/05/13

Widget Cantik Untuk Menampilkan Artikel Terbaru Pada Label Tertentu

Klik gambar untuk lebih besar
Bingung mau beri judul apa untuk artikel ini. Karena memang widget ini adalah widget Artikel Terbaru biasa yang sering digunakan para blogger. Dan yang membedakannya adalah widget ini bisa menampilkan Artikel Terbaru dari Label atau Kategori yang spesifik. Bahkan bisa menampilkan lebih dari satu. Jika anda ingin melihat artikel sebelumnya, silahkan baca Modifikasi Cantik Widget Populer Posts Menjadi Animasi Colorful.

Pada awalnya Tutorial Jitu 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.

Langsung saja, berikut Tutorial Jitu ala Akhbar Islam:

Widget Cantik Untuk Menampilkan Artikel Terbaru Pada Label Tertentu

1. Masuk ke halaman Layout (Tata Letak)>>Add a Widget>>HTML/JavaScript
2. Masukkan kode berikut kedalamnya:

<link rel="stylesheet" type="text/css" scoped="scoped" href="http://blogger-json-experiment.googlecode.com/svn/resources/multi-feed/multi-feed.min.css"/>
<style type="text/css" 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 type="text/javascript">
var multiFeed = {
    feedsUri: [
        {
            name: "Judul Widget 1",
            url: "http://nama_blog-1.blogspot.com",
            tag: "JQuery"
        },
        {
            name: "Judul Widget 2",
            url: "http://nama_blog-2.blogspot.com",
            tag: "CSS"
        },
        {
            name: "Judul Widget 1",
            url: "http://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 type="text/javascript" src="http://blogger-json-experiment.googlecode.com/svn/resources/multi-feed/multi-feed.min.js"></script>

Untuk 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: "http://nama_blog-1.blogspot.com",
        tag: "Blogger"
    },
    {
        name: "Judul Widget 2",
        url: "http://nama_blog-2.blogspot.com",
        tag: "WordPress"
    },
    {
        name: "Judul Widget 3",
        url: "http://nama_blog-3.blogspot.com",
        tag: "SEO"
    }
]
Setelah semua konfigurasi sudah diatur dengan benar, klik Save Widget. Modifikasi tampilan bisa dilakukan di dalam tag <style> yang saya tambahkan pada widget di atas. Silahkan lihat hasil anda pada tampilan blog anda. Jika berhasil ucapkan al-hamdulillah... Jika gagal silahkan berikan komentar anda di bawah artikel ini.

Keyword: Widget Cantik Untuk Menampilkan Artikel Terbaru Pada Label Tertentu ala Tutorial Jitu Akhbar Islam

Artikel Terkait

Widget Cantik Untuk Menampilkan Artikel Terbaru Pada Label Tertentu
4/ 5
Oleh

Berlangganan

Suka dengan artikel di atas? Silakan berlangganan gratis via email

17 comments

31 Mei 2013 07.22 delete

Tutorialnya hanya sekedar untuk meningkatkan SEO Tutorial Jitu Akhbar Islam

Reply
avatar
15 Juni 2013 16.09 delete

Banyak warnanya gan..
Mantap :D

Reply
avatar
27 Juni 2013 00.37 delete

widgetnya mantap gan.,thanks,.

Reply
avatar
4 April 2014 08.04 delete

wahh makasih banget gan.. sangat membantu..

Reply
avatar
Anonim
22 April 2014 22.05 delete

Syukron akhi

Reply
avatar
15 Juni 2014 09.07 delete

Kalau gak ngerti bhaya juga kang hahahahahaha

Reply
avatar
7 Juli 2014 17.27 delete

ra mudeng mas -_____-||

Reply
avatar
8 Oktober 2014 09.41 delete

Ah dikit gitu aja wan... msak g ngerti... :kak:

Reply
avatar

BERIKAN KOMENTAR TERBAIK ANDA

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

NB: Dilarang memasukkan link aktif...!!! link aktif secara otomatis akan terhapus dari komentar.