Mrkunlex
What is Blogger Recent Post Image Gallery?
Blogspot Recent Post Gallery is a blogger widget which displays the thumbnails of your Recent articles according to the number of thumbnails display set on your blogspot Gallery code/widget.
The recent post Images that will be displayed are clickable to the post they image belongs.
I.e if You create a post about how to make money online and added an image of any currency , If recent post Gallery code is set on your widget that currency image will be shown with a link to the post "how to make money online"
This feature will not only beautify your blogger website but also it will enhance easy Navigation and also it will reduce your bounce rate and increase your daily pageviews as well knowing that some of your readers may likely get attracted by your post images and click on them to read articles related to the thumbnails.
To Add Recent image Gallery widget to your blogspot website simply follow below steps:
HOW TO ADD RECENT POST IMAGE GALLERY TO YOUR BLOGSPOT WEBSITE
Login To Your Blogger Dashboard and click on Layout:
From the layout section Select add Gadget in the area you want this feature to display on your Website.
Now there are many Gadgets but you have to select the HTML section gadget to place your code
Now copy The below blogspot Recent post Gallery widget code
<style>
/* CSS Recent Post Gallery Widget */
.recent-grid {padding:0;clear:both;}
.recent-grid:after {content:"";clear:both;display:table;}
.recent-grid .galleryview{position:relative;display:inline-block;margin:6px 0;overflow:hidden;}
.recent-grid .galleryview a{text-decoration:none;float:left;position:relative;margin:0 6px}
.recent-grid .galleryview .ptitle{display:block;background:rgba(0,0,0,.7);clear:left;position:absolute;font-size:10px;line-height:1.3em;text-align:left;bottom:3px;left:3px;right:3px;top:3px;color:#fff;overflow:hidden;padding:5px;word-wrap:break-word;visibility:hidden;opacity:0;backface-visibility:hidden;transition:all .2s}
.recent-grid .galleryview:hover .ptitle{visibility:visible;opacity:1}
.recent-grid a img{background:#fdfdfd;float:left;padding:2px;border:1px solid #e3e3e3;transition:all .3s}
.recent-grid a:hover img {border-color:#bbb;}
</style>
<script type='text/javascript'>
//<![CDATA[
// Recent Post Gallery
function gallerygrid(a){for(var t=a.feed.entry||[],e=['<div class="recent-grid">'],i=0;i<t.length;++i){for(var l=t[i],r=l.title.$t,n=l.media$thumbnail?l.media$thumbnail.url:"http://2.bp.blogspot.com/-4fCf53FqYKM/Vccsy7apoZI/AAAAAAAAK4o/XJkv3RkC0pw/s1600/default%2Bimage.png",s=n.replace("s72-c","s"+recentpost_thumbs+"-c"),h=l.link||[],c=0;c<h.length&&"alternate"!=h[c].rel;++c);var d=h[c].href,m='<img src="'+s+'" width="'+recentpost_thumbs+'" height="'+recentpost_thumbs+'"/>',p=recentpost_title?'<span class="ptitle">'+r+"</span>":"",g='<a href="'+d+'" target="_blank" title="'+r+'">'+m+p+"</a>";e.push('<div class="galleryview">',g,"</div>")}e.push("</div>"),document.write(e.join(""))}
//]]>
</script>
<script>
var recentpost_thumbs = 72;
var recentpost_title = true;
</script>
<script src="/feeds/posts/summary?max-results=9&alt=json-in-script&callback=gallerygrid"></script></textarea>
Copy code
and paste it in the gadget area as show in the below screenshot
With the Above steps completed you have successful added an image Gallery widget to your Blogger website and it will show as below screenshot:
