Add Recent Posts Image Gallery in Blogger

If you are not taking advantage from Recent or Related post widgets so you are dropping your page views traffic and don’t forget that tra...

If you are not taking advantage from Recent or Related post widgets so you are dropping your page views traffic and don’t forget that traffic is a big factor for every successful blog and in traffic the main thing is only visits and page views, if you are getting less visits on your blog so don’t be upset because still you can make your blog user friendly from which you will observe high traffic and less bounce rate in your Web Analytics i.e. Google Analytics.

I have shared some different types of Recent and Related post widgets but this one has special features and benefits as mentioned in below Widget features.

Widgets Features

It is free from junk and errors and totally secure from heavy Java script compression, which decrease your site page speed.
It is totally SEO and User friendly and made it professionally and simple.
The best and main features of this related post widget which make it different from others that “It is compatible and applicable to all HTML layouts whether it is in the HTML post mode or in HTML/Java script gadget.
It is responsive and will be fitted on every media query.
It will not blur and crack your post image, it shows you and your upcoming visitor’s best image quality.

DEMO

How to Add Recent Post Image Gallery in Blogger

First open your blogger account.

Move on Template and don’t forget to back up the blog theme before implementing code in it.

Now paste the below code just before the </head> tag.

<script>
// Blogger Recent Posts Gallery by protechnify.com
// Tutorial at http://www.protechnify.com/2013/05/recent-posts-image-gallery-blogger.html
// 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 protechnify.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/AVvXsEgiLDO9dXRR1CquZTCV6a4mpQEJNGBmjcCXjgr4MOEXSe9N4n6dax8fTDP469V2dJjos9pHZge_96ui9WRIUj0uAuLj8T0XCb-Ye4x5zD0qFnWt-5ZqysGTyOudPsF0BdIVRCr1HA4sxgAh/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(""));
}
//]]>

Then open your CSS style sheet and add the below styles just before </b:skin> style sheet.

/* Protechnify 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;}
/* Protechnify Recent Posts Image Gallery CSS End */

Finally, add this below code wherever you want to display this widget, you can also add this code in post, page section or in the HTML/Java script gadget.

<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>

Change 150 with your desire number, if you want to change image size.
Replace True to False if you don’t want to show the Overlay effect on the image.
If you want to show only special labels so add the below feed address instead of the current.
Change Max-results with your maximum recent posts numbers.

Check This:

Check your new recent post image gallery widget on your blog and see it is correctly adjust or not, if yes so don’t forget to subscribe with us and if not so ask freely in below comments with correct problem interface.