Recent Post Gallery

Malam All

Widget Recent post atau posting terbaru merupakan widget penting bagi sebuah blog karena berfungsi sebagai penunjang navigasi blog. Terlebih ketika jumlah posting di hompage berjumlah satu /setelan satu , peran recent post sangat lah membantu pengunjung untuk melihat postingan terbaru dan beberapa postingan sebelumnya. Dan kali ini saya akan menawarkan recent post bergaya gallery yang cocok untuk semua template.

 Untuk DEMO sobat bisa melihat widget recent post di bawah tombol next

Berikut beberapa fitur dari Recent Post gallery 

• Sobat bisa mengatur ukuran gambar yang disesuaikan dengan selera.
• Recent post yang ditampilkan dapat disesuaikan dengan label 

#Kustomisasi

• Cari kode </head> dan tempatkan kode dibawah ini tepat atasnya

<script>
// Blogger Recent Posts [ OBC ]
// Tutorial at http://duniaradioku.blogspot.com
// Free to use or share, but please keep this notice intact.
//<![CDATA[
function bsrpGallery(root) {
var entries = root.feed.entry || [];
var html = ['<div class="bsrp-gallery nopin" title="Get this from BloggerSentral.com">'];
for (var i = 0; i < entries.length; ++i) {
var post = entries[i];
var postTitle = post.title.$t;
var orgImgUrl = post.media$thumbnail ? post.media$thumbnail.url : 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMrQkm69I_dcfgVhi4_Cu2m-h3VL1z-SJQWiIC5w__PgPM15Q6QxJMX4Equ0qegfVpnow3fu8PXv6CYijVRnvBER7iGUkg92s9QqEajZXn8tnhF9-Q_slYMa_iLQzGFUAZs_UrTOCBnsim/s72-c/default+image.png';
var newImgUrl = orgImgUrl.replace('s72-c', 's' + bsrpg_thumbSize + '-c');
var links = post.link || [];
for (var j = 0; j < links.length; ++j) {
if (links[j].rel == 'alternate') break;
}
var postUrl = links[j].href;
var imgTag = '<img src="' + newImgUrl + '" width="' + bsrpg_thumbSize + '" height="' + bsrpg_thumbSize + '"/>';
var pTitle = bsrpg_showTitle ? '<span class="ptitle">' + postTitle + '</span>' : '';
var item = '<a href="' + postUrl + '" target="_blank" title="' + postTitle + '">' + imgTag + pTitle + '</a>';
html.push('<div class="bs-item">', item, '</div>');
}
html.push('</div>');
document.write(html.join(""));
}
//]]>
</script>

• Selanjutnya cari kode ]]><b:skin> dan tempatkan kode dibawah ini tepat diatasnya 

/* BloggerSentral Recent Posts Image Gallery CSS Start */
.bsrp-gallery {padding:10px; clear:both;}
.bsrp-gallery:after {content: "";display: table;clear: both;}
.bsrp-gallery .bs-item a {position: relative;float:left;margin: 0 15px 15px 0 !important;text-decoration:none;}
.bsrp-gallery .bs-item .ptitle {background: rgba(0, 0, 0, 0.5); background: #7f7f7f\9; display: block; clear: left; font-size: 11px; line-height:1.3em; height: 2.6em; position: absolute; text-align: left; bottom: 10%; color:#fff; padding:2px 5px; word-wrap: break-word; overflow:hidden;}
.bsrp-gallery a img {background: #eee; float: left; padding: 5px; box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5); -moz-box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5); -webkit-box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5); transition: background-color 0.4s; -webkit-transition: background-color 0.4s; -moz-transition: background-color 0.4s;}
.bsrp-gallery a:hover img {background: #ee7e22;}
/* BloggerSentral Recent Posts Image Gallery CSS End */

Lalu Save 

• Dan masuk pada tataletak Add Gadget/HTML Javascript masukan kode dibawah ini 

<script>
var bsrpg_thumbSize = 150;
var bsrpg_showTitle = true;
</script>
<script src="/feeds/posts/summary?max-results=8&alt=json-in-script&callback=bsrpGallery"></script>

#NOTE

• Tulisan 150 merupakan ukuran gambar / thumbnails sobat bisa merubahnya sesuai selera
• Tulisan true ( thumb dengan keterangan ) bisa sobat ganti dengan farse ( thumb tanpa keterangan ) untuk memberikan penampilan yang berbeda 
• Angka 8 adalah jumlah thumb gallery yang ditampilkan 

Untuk menampilkan Recent Post sesuai label 

<script>
var bsrpg_thumbSize = 150;
var bsrpg_showTitle = true;
</script>
<script src="/feeds/posts/summary/-/Label =8&alt=json-in-script&callback=bsrpGallery"></script>

Ganti tulisan label  dengan label sobat