Gallery Style Recent Post Widget For Blogger

How to install gallery style mouse hover recent post/label widget on blogger - Today I'm going to share with you a stylish (Mouse Hover) gallery style recent post widget for your blog. The function of this widget is same because the actual work of this widget is same like other recent post widget. However the best part of this widget is that, it's coming with a different look. So if you are really interested in this widget, and you want to take a look of this widget then, click on the below demo button and see how it's look like.

Live Demo

Now if you like this recent post widget, and you want to add this widget into your blog then follow the below simple steps.

Go to your blogger dashboard, Now go to the "Template" section and then click on the "EDIT HTML" button.

Now find the below code by pressing "Ctrl + F" key together from your keyboard.

</head>

After that, copy the below JavaScript code and paste it just before </head>

<script type='text/javascript'>
//<![CDATA[
// Recent Post Gallery
function smartpikgrid(a){for(var t=a.feed.entry||[],e=['<div class="recent-gallery">'],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"+smartpik_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="'+smartpik_thumbs+'" height="'+smartpik_thumbs+'"/>',p=smartpik_title?'<span class="ptitle">'+r+"</span>":"",g='<a href="'+d+'" target="_blank" title="'+r+'">'+m+p+"</a>";e.push('<div class="ad-item">',g,"</div>")}e.push("</div>"),document.write(e.join(""))}
//]]>
</script>

Now again find the below code.

]]></b:skin>

After that, copy the below CSS code and paste it just before ]]></b:skin>

/* CSS Recent Post Gallery */
.recent-gallery {padding:0;clear:both;}
.recent-gallery:after {content:"";display:table;clear:both;}
.recent-gallery .ad-item{display:inline-block;position:relative;margin:6px 0;overflow:hidden;}
.recent-gallery .ad-item a{position:relative;float:left;margin:0 6px;text-decoration:none}
.recent-gallery .ad-item .ptitle{background:rgba(0,0,0,.7);display:block;clear:left;font-size:18px;line-height:1.3em;position:absolute;text-align:left;bottom:3px;left:3px;right:3px;top:3px;color:#fff;padding:5px;word-wrap:break-word;overflow:hidden;visibility:hidden;opacity:0;backface-visibility:hidden;transition:all .2s}
.recent-gallery .ad-item:hover .ptitle{visibility:visible;opacity:1}
.recent-gallery a img{background:#fdfdfd;float:left;padding:2px;border:1px solid #e3e3e3;transition:all .3s}
.recent-gallery a:hover img {border-color:#bbb;}

Now click on the orange save template button to make changes.

Now go to the "layout" section and then select " Add a widget ". After that, select " Html/JavaScript ". Now copy the below code and paste it in Html box.

<script>
var smartpik_thumbs = 150;
var smartpik_title = true;
</script>
<script src="/feeds/posts/summary?max-results=4&alt=json-in-script&callback=smartpikgrid"></script>

If you want to change the thumbnail size, then replace the highlighted 150.

If you want to show/hide title, then edit highlighted true.

If you want to change the number of the posts, then change the highlighted 4.

That's it! I hope you like this widget! Stay tuned for more blogger tips and tricks!