Memasang Widget Recent Post Berdasar Label dengan Thumbnail Paling Mudah

Sampai saat posting ini diterbitkan, blogspot belum pernah secara khusus dan resmi merelease widget recent post (post terbaru) berdasarkan label. Hanya ada widget recent post berdasarkan posting terbaru dan widget archive yang berisi semua posting.

Padahal widget seperti ini sebenarnya cukup banyak dibutuhkan oleh blogger. Khususnya jika memiliki blog yang memiliki topik majalah atau berita.

Berikut ini akan Saya bagikan script untuk membuat dan menambahkan widget recent post berdasarkan label. Ada dua tipe yang ingin Saya bagikan. Yang pertama adalah untuk widget recent post label yang memiliki fitur thumbnail dilengkapi dengan judul dan deskripsi posting. Sedangkan yang kedua adalah untuk recent post based label yang hanya menampilkan thumbnail saja.

Panduan yang dibagikan di sini sengaja Saya pilihkan yang paling mudah, yaitu cukup memasangnya atau mengcopy script dengan sedikit editing untuk penyesuaian dengan blog Anda, dan memasangnya (Paste) ke dalam widget HTML/Javascript, melalui menu Layout/Tata Letak di dashboard blogger Anda.

Widget Recent Post berdasarkan Label dengan Thumbnail

Langsung saja copy paste script berikut ini ke widget HTML/JavaScript.

<style>
img.recent_thumb {padding:1px;width:55px;height:55px;border:0; float:left;margin:0 0 5px 10px;}
.recent_posts_with_thumbs {float: right;width: 100%;min-height: 70px;margin: 5px 0px 5px 0px;padding: 0;font-size:12px;}
ul.recent_posts_with_thumbs li {padding-bottom:5px;padding-top:5px;min-height:65px;}
.recent_posts_with_thumbs a {text-decoration:none;}
.recent_posts_with_thumbs strong {font-size:10px;}
</style>
<script src="https://cdn.rawgit.com/hugetarif/tukangtokoonline/master/rcpost_based_label.js"> </script>
<script>var numposts = 10;var showpostthumbnails = true;var displaymore = true;var displayseparator = true;var showcommentnum = true;var showpostdate = true;var showpostsummary = true;var numchars = 150;</script>
<script src="http://namabloganda.blogspot.com/feeds/posts/default/-/Label%20Blog%20Anda?orderby=published&alt=json-in-script&callback=showrecentpostswiththumbs"></script>

Keterangan :

#1. https://cdn.rawgit.com/hugetarif/tukangtokoonline/master/rcpost_based_label.js sebaiknya file javascript ini anda simpan di hosting Anda sendiri, untuk keamanan dan akses yang lebih cepat. Sebaiknya tidak disimpan di Google drive karena mulai Agustus 2016, Google drive akan menghentikan layanan hostingnya. Sebagai alternatif bisa Anda simpan di Github, tutorialnya bisa Anda cek di Panduan hosting di Github ini.

#2. var numposts = 10, ini adalah jumlah posting yang ingin ditampilkan, bisa diubah sesuai keinginan.

#3. http://namabloganda.blogspot.com, ganti dengan nama/url blog Anda.



Kemudian Simpan Widget.

Widget Recent Post berdasar Label hanya tampil Thumbnail

 Copy script berikut ini pada widget HTML/JavaScript di menu layout/tataletak pada dashboard blogger Anda.

<div id='bp_recent'></div>
<script style='text/javascript' src='https://cdn.rawgit.com/hugetarif/tukangtokoonline/master/rcpost_thumnail_only.js'></script>
<script style='text/javascript'>
var numberOfPosts = 6;
var showPostDate = false;
var showSummary = false;
var titleLength = 0;
var showCommentCount = false;
var showThumbs = true;
var showNoImage = true;
var imgDim = 125;
var imgFloat = 'left';
var myMargin = 5;
var mediaThumbsOnly = true;
var showReadMore = false;
</script>
<script src='/feeds/posts/default/-/label?orderby=updated&amp;alt=json-in-script&amp;callback=bprecentpostswiththumbnails'></script> 

Keterangan:

#1. https://cdn.rawgit.com/hugetarif/tukangtokoonline/master/rcpost_thumnail_only.js, file javascript ini bisa Anda simpan di penyimpanan hosting Anda sendiri, caranya seperti yang sudah dijelaskan di atas.

#2. var numberOfPosts = 6; Angka 6 adalah jumlah post yang akan tampil.

#3. var imgDim = 125; Angka 125 adalah ukuran pixel gambar thumbnail yang akan tampil. 

#4. /feeds/posts/default/-/label? Ganti label dengan nama label yang ingin Anda tampilkan postingnya.

Selanjutnya Simpan Widget.

Pemasangan dua widget ini memang cukup sederhana dan mudah. File javascript juga sengaja Saya simpan di server CDN Github sehingga loading lebih cepat dan tidak ada batasan akses seperti halnya jika file disimpan di Google Drive. Server CDN ini juga dipakai oleh font awesome, sehingga sudah teruji keandalannya. 

Semoga bermanfaat.