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

Recent post image gallery for 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 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

  1. It is free from junk and errors and totally secure from heavy Java script compression, which decrease your site page speed.
  2. It is totally SEO and User friendly and made it professionally and simple.
  3. 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.
  4. It is responsive and will be fitted on every media query.
  5. It will not blur and crack your post image, it shows you and your upcoming visitor’s best image quality.

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 : 'http://3.bp.blogspot.com/-sWtp_qRPNT8/UZYmQq5sAdI/AAAAAAAAEec/7YDbpK4Q6g8/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.

COMMENTS

Name

Android,2,backlinks,7,Blogger,46,blogger theme,1,Errors,1,How To,31,Make Money Online,2,SEO,13,SMM,10,Templates,9,Tools,7,Tricks,15,Web designing,18,Widgets,24,WordPress,4,
ltr
item
PRO TECHNIFY: Add Recent Posts Image Gallery in Blogger
Add Recent Posts Image Gallery in Blogger
http://2.bp.blogspot.com/-dFhtOQBODjQ/Vd8iUd8N25I/AAAAAAAAIvA/BTmRTMdNsYo/s640/Recent-post-image-gallery-for-blogger.png
http://2.bp.blogspot.com/-dFhtOQBODjQ/Vd8iUd8N25I/AAAAAAAAIvA/BTmRTMdNsYo/s72-c/Recent-post-image-gallery-for-blogger.png
PRO TECHNIFY
https://www.protechnify.com/2015/08/add-recent-posts-image-gallery-blogger.html
https://www.protechnify.com/
https://www.protechnify.com/
https://www.protechnify.com/2015/08/add-recent-posts-image-gallery-blogger.html
true
8223102945718438291
UTF-8
Loaded All Posts Not found any posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All RECOMMENDED FOR YOU LABEL ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS CONTENT IS PREMIUM Please share to unlock Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy