Widget Blogger untuk Menampilkan Daftar Posting Terbaru dalam Label-Label yang Spesifik
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:
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
Labels: Blogger, JavaScript, Widget
65 Comments:
Mantab mas Taufik, \o/
Dan Terus Berkreasi :-bd ^_^
mantaf...nih,cocok dengan saya :3
Mantap.. :-bd
super!
cerdddaasssss... keren ni.. thanks om.. :)
okey :Q
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...
keren mas... :-bd
Sudah diperbaiki.
mas jikalau saya pasang untuk daftar isi dengan penambahan feedsUri sesuai lebel yang ada bisa memberatkan blog ga mas? atau biasa aja :p
mas kok masih ga tepat iah, ga sesuai label :p
bisa tidak memakai tag??
#seperti recent post?
ternyata bisa :D
Coba lagi!
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
JSON code yang terlihat anggun sekali.
salute banget pokonya mas.
Hadew sudah jauh-jauh mutar pakai pencarian google Akhirnya Malah Ketemu di sini juga tutorialnya..
masukan banged ne,.. makasi guyz
Kang... buatin jadi new tab target='_blank' :-bd haha
assalamu'alaikum,
code sudah saya copy dan paste di widget html/javascript, tapi hasilnya nihil, mohon bantuannya..
Waalaikumsalam. Mungkin itu karena feed posting blog Anda dimatikan. Untuk membuat widget bekerja, feed posting tidak boleh dimatikan.
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
Fresh and cool tampilannya, satu lagi loadingnya cepat :)
Tajuk hilang sekiranya saya membuang float:left pada .list-entries img
http://jsfiddle.net/LSssw/1/
ada solusinya gak?
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
};
keren euy \o/
Mantap banget gan, super load deh,,,top
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.
haiss.. mantap! pas nih di bahwan navigasi :D
#typo > bahwan maksudnya bawah, bukan bakwan :D
#bloggertanpamenueditkomen
Keren widget nya mas! Ringan lagi.. :)
gak dikasih izin buat ngubah warna :D
keren, loadingnya cepat bang, tapi cuma bisa pasang satu script. untuk di tempatkan di element lain. misal (sidebar dan footer) tidak bisa yah .?
Mantab Mas, banyak kebaikan yang mas dah buat nech
mas, bisa gak setiap widgetnya CSSnya di edit.
soalnya pengen ngedit tampilan judulnya masing-masing supaya beda-beda gitu. :)
mohon bantuannya mas. 0:)
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.
tutorial yg sangat menakjupkan
pokoknya kalau mau mencari widget dengan style html5 tempatnya disini keren and ga nyesel www.fantasiku.com
oke mbak langsu ke lokasi aja nih ..
Ok makasi boz
pak, kalo scriptnya jalan setelah semua elemen blog selesei gimana ? apa bisa langsung dimasukkan ke jquery document ready function?
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";
}
};
ini widgetnya langsung muncul tiga gitu ya mas, misalnya mau dibuat satu satu gitu gimana mas :yaya:
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 ?
:)
Widget ini terbatas untuk platform Blogger saja :(
Makasih masbro :-bd
bisa cek sini hasilnya http://adi7bello.blogspot.com/
ajib...Izin Pasang mas...makasi
Sama, saya jg. cara menghidupkan feed postingannya gmn ya?
gan, kalau mau ngatur agar semua postingan pada label keluar semua gmana ya? apa tinggalganti jumlah yg akan keluar?
Ini yg kucari ada disini, ijin pakai mas :)
mantap masbos...sy masih nubi pengen belajar juga ngutak atik, meski otodidak
penerapan ini bisakah pada sidebar ? :-bd
Mas kalo buat (3 diatas 3 di bawah) gimana ya?
mas kalo buat warna masing masing label beda gimana ya?
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.
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.
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}
…
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>
Coba naruhnya di atas </body>
saya coba di halaman statis bisa gak ??
mantap kang
Pertama make bisa, trus sehari kemudian blog di buka ndak muncul lagi gan, mohon petunjuknya gan.. sungram-probolinggo.blogspot.com
Assalamu'alaikum.
Mas Taufik, Saya mohon izin menyimpan + menggunakan kode js dan css widget ini. Terima kasih
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.
Depends. If the result is an iframe, I can do nothing. Other than that depends to the Blogger XML API.
Post a Comment
<< Home