Daftar Posting Terbaru atau Recent Posts Per Label

Kali ini saya ingin membagikan widget daftar posting terbaru berdasarkan tag/label. Bisa dikatakan widget ini adalah widget recent post per label seperti pada umumnya. Namun, widget ini dapat diletakkan di mana pun (multi fungsi), bisa sebagai widget recent post, bisa juga sebagai daftar isi per label seperti pada blog Kang Ismet.

Widget yang dibuat oleh Mas Taufik Nurrohman ini, tidak hanya berfungsi untuk menampilkan daftar posting terbaru dari satu blog, melainkan juga bisa menampilkan daftar posting dari feed blog lain.

Jika Anda ingin menampilkannya sebagai widget, silahkan letakkan pada kolom kosong ketika menambahkan widget HTML/Javascript. Namun jika Anda ingin menampilkannya di halaman statis seperti daftar isi blog Kang Ismet, silahkan Anda letakkan pada kolom kosong mode HTML (bukan compose).

Jika Anda tertarik untuk menggunakannya, silahkan letakkan kode berikut ini di tempat yang Anda inginkan.

<style scoped="scoped" type="text/css">
/* Basic Skin for Multi Feed Loader */
.list-entries{background:#fff;border:1px solid #d8d8d8}.list-entries li,.list-entries ul{margin:0;padding:0;list-style:none}.list-entries li{padding:1em;border-bottom:1px solid #ddd}.list-entries .main-title{padding:0}.list-entries .main-title h4{display:block;font:inherit;font-weight:700;padding:.5em 1em;background-color:#4f93c5;color:#fff;margin:0;line-height:normal;font-size:14px;margin-top:0!important}.list-entries .title a{font-weight:300;font-size:14px;text-decoration:none;line-height:.5em;color:#222}.list-entries .title a:hover{text-decoration:underline;color:#5886a7}.list-entries .fake-img,.list-entries img{border:none;background-color:#333;margin:0 1em 0 0;padding:0;float:left}.list-entries .summary{overflow:hidden;color:#999}.list-entries .more-link{border-bottom:none}.list-entries .more-link a{display:block;line-height:2em;height:2em;overflow:hidden;text-decoration:none;background-color:#82b965;padding:.5em 1em;position:relative;font-weight:700;color:#fff}.list-entries .more-link a:after{content:"";width:0;height:0;position:absolute;top:50%;right:.3em;border:4px solid transparent;border-left-color:#fff;margin-top:-4px}.list-entries .more-link a:hover{background-color:#71a555}
/* Custom CSS */
.list-entries {
margin:5px;
width:270px; /* Lebar widget */
float:left;
font-size:11px;
}
</style><br />
<br />
<div id="feed-list-container">
</div>
<div style="clear: both;">
</div>
<br />
<script type="text/javascript">
var multiFeed = {
feedsUri: [
{
name: "Blogger",
url: "http://wahyupratama.com/",
tag: "Blogger"
},
{
name: "HTML5",
url: "http://wahyupratama.com/",
tag: "HTML5"
},
{
name: "General",
url: "http://wahyupratama.com/",
tag: "General"
},
{
name: "SEO",
url: "http://wahyupratama.com/",
tag: "SEO"
},
{
name: "Widget",
url: "http://wahyupratama.com/",
tag: "Widget"
},
{
name: "Kang Ismet",
url: "http://blog.kangismet.net/",
tag: ""
},
],
numPost: 4,
showThumbnail: true,
showSummary: true,
summaryLength: 80,
titleLength: "auto",
thumbSize: 72,
newTabLink: true,
containerId: "feed-list-container",
readMore: {
text: "Selengkapnya",
endParam: "?max-results=8"
}
};
</script><br />
<script src="https://cdn.rawgit.com/Wahyututorial/project/master/multi-feed/multi-feed.js" type="text/javascript"></script>

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 (bisa menampilkan url feed blog lain), tag digunakan untuk menentukan tag/label posting yang ingin ditampilkan. 
  • numPost : Untuk menentukan jumlah posting yang ingin ditampilkan. 
  • showThumbnail : true atau false, untuk menampilkan atau menyembunyikan gambar posting. 
  • showSummary : true atau false, untuk menampilkan atau menyembunyikan ringkasan posting. 
  • summaryLength : Untuk menentukan jumlah karakter ringkasan/summary posting. 
  • titleLength : Untuk memotong jumlah 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 : Untuk menentukan ukuran thumbnail posting.
  • containerId : 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).

Sekian, semoga bermanfaat

Leave a Reply