Membuat Recent Post ber-Gambar pada Blog

M-S Blog || Membuat Recent Post ber-Gambar pada Blog, Untuk DEMO sobat bisa melihat widget recent post di sidebar footer (scroll sampai bawah)

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/AVvXsEhJH2Lnd9zCIOjxqZwrU6pUYF7zN4zP1YbsGgKwqCbzTGfHGUw4D7fIHgkSvJnNIfZzcNXJdC2IPlaCYitMrsGN7jTSn1DoiC-bngESbhRAq4EBXeKQKh7OM9sJc1BA1k2We6LTfhgUTU_l/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