Widget Blogger Untuk Menampilkan Daftar Posting Terbaru Dalam Label-Label Yang Spesifik - Dewa Blogger

Halaman

    Social Items

Buy Now
Screenshot of multiple recent post widget for Blogger Widget Blogger untuk Menampilkan Daftar Posting Terbaru dalam Label-Label yang Spesifik

Judulnya sangat panjang alasannya ialah Saya sendiri tidak tahu harus memberi nama apa kepada widget ini. Pada pada dasarnya widget ini ialah widget recent post biasa, namun mempunyai kemampuan untuk meniru diri biar bisa menampilkan daftar posting terbaru lebih dari satu buah menurut label yang spesifik:

Lihat Demo

Pada awalnya Saya menciptakan widget ini biar bisa menampilkan posting-posting terbaru dari blog tunggal saja, namun mengingat ada juga beberapa blog yang suka menampilkan daftar posting dari blog lain, jadi kini 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 arahan 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 dipakai untuk memilih judul widget, url dipakai untuk memilih URL feed, tag dipakai untuk memilih tag/label posting yang ingin ditampilkan.
numPost Digunakan untuk memilih 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 memilih jumlah aksara ringkasan posting
titleLength Digunakan untuk memotong aksara judul posting yang terlalu panjang. Ganti nilainya menjadi angka untuk memotong aksara sebanyak angka tersebut, atau set sebagai "auto" untuk membiarkan judul posting sebagai apa adanya
thumbSize Digunakan untuk memilih ukuran thumbnail posting
containerId Digunakan untuk memilih ID kontainer yang akan dipakai untuk memuat widget
readMore Terdiri dari text dan endParam. text dipakai untuk memilih label tautan “Baca Selengkapnya” yang terletak di bawah masing-masing widget dan endParam dipakai untuk memilih parameter selesai tautan tersebut (abaikan kalau 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 dipakai untuk memilih 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

Sumber https://www.dte.web.id/

Widget Blogger Untuk Menampilkan Daftar Posting Terbaru Dalam Label-Label Yang Spesifik

Screenshot of multiple recent post widget for Blogger Widget Blogger untuk Menampilkan Daftar Posting Terbaru dalam Label-Label yang Spesifik

Judulnya sangat panjang alasannya ialah Saya sendiri tidak tahu harus memberi nama apa kepada widget ini. Pada pada dasarnya widget ini ialah widget recent post biasa, namun mempunyai kemampuan untuk meniru diri biar bisa menampilkan daftar posting terbaru lebih dari satu buah menurut label yang spesifik:

Lihat Demo

Pada awalnya Saya menciptakan widget ini biar bisa menampilkan posting-posting terbaru dari blog tunggal saja, namun mengingat ada juga beberapa blog yang suka menampilkan daftar posting dari blog lain, jadi kini 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 arahan 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 dipakai untuk memilih judul widget, url dipakai untuk memilih URL feed, tag dipakai untuk memilih tag/label posting yang ingin ditampilkan.
numPost Digunakan untuk memilih 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 memilih jumlah aksara ringkasan posting
titleLength Digunakan untuk memotong aksara judul posting yang terlalu panjang. Ganti nilainya menjadi angka untuk memotong aksara sebanyak angka tersebut, atau set sebagai "auto" untuk membiarkan judul posting sebagai apa adanya
thumbSize Digunakan untuk memilih ukuran thumbnail posting
containerId Digunakan untuk memilih ID kontainer yang akan dipakai untuk memuat widget
readMore Terdiri dari text dan endParam. text dipakai untuk memilih label tautan “Baca Selengkapnya” yang terletak di bawah masing-masing widget dan endParam dipakai untuk memilih parameter selesai tautan tersebut (abaikan kalau 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 dipakai untuk memilih 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

Sumber https://www.dte.web.id/