Grid Style Recent Post Gallery Widget for Blogger

Hello Readers, How about you all? Hopefully all are well. Today I am present to you give a new widget. So, take a look!

Grid Style Recent Post

### Recent Post widget is necessary for all blog. If you want to add a Grid Style Recent post widget on your blog follow bellow step one by one.

Step #1: Go to your Blogger Dashboard > Template > Edit HTML Copy and past following code before </head>

 <script type='text/javascript'>
//<![CDATA[
// Recent Post Gallery
function arlinagrid(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"+arlina_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="'+arlina_thumbs+'" height="'+arlina_thumbs+'"/>',p=arlina_title?'<span class="ptitle">'+r+"</span>":"",g='<a href="'+d+'" target="_blank" title="'+r+'">'+m+p+"</a>";e.push('<div class="gallerytem">',g,"</div>")}e.push("</div>"),document.write(e.join(""))}
//]]>
</script>

Step #1: Now again Copy and past following CSS code before ]]></b:skin> or Style

 /* CSS Recent Post Gallery */
.recent-gallery {padding:0;clear:both;}
.recent-gallery:after {content:"";display:table;clear:both;}
.recent-gallery .gallerytem{display:inline-block;position:relative;margin:6px 0;overflow:hidden;}
.recent-gallery .gallerytem a{position:relative;float:left;margin:0 6px;text-decoration:none}
.recent-gallery .gallerytem .ptitle{background:rgba(0,0,0,.7);display:block;clear:left;font-size:10px;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 .gallerytem: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;}

Step #3: Save Template

Step #4: Now again go to Layout > Add a Gadget > HTML/JavaScript > Copy and past following HTML code in Content box.

 <script>
var arlina_thumbs = 72; 
var arlina_title = true; 
</script>
<script src="/feeds/posts/summary?max-results=9&amp;alt=json-in-script&amp;callback=arlinagrid"></script>

Step #5: Click Save Button

Customization

var arlina_thumbs=72;
var arlina_title=true;
max-results=9&

Also Read: #1 Animated Contact Form Widget for blogger
     #2 Add your youtube video on blog with CSS stylish Laptop frame
   #3 Add a YouTube Subscribe Button in Blogger
   #4 Add a Show and Hide Comments Button in Blogger

Note: If you find any problems please contact with us in our contact page. Don't forget to share and comment this post. Keep Enjoy.

Follow Our blog footer

Grid Style Recent Post Gallery Widget for Blogger

Author: Blogger King

Related Posts