MyBacklink86 - There are various forms of display recent post widgets. There is only the post title, accompanied by a summary, and some are accompanied by thumbnails. All widgets recent post that diverse benefits. Bloggers can choose the look and according to his blog.
Recent post is a widget that displays the latest posts from the blog-post. One form is a recent post thumbnail grid, which is a widget that displays a thumbnail gallery of the latest post. So just a picture or photograph of latest posts displayed.
Widget recent post thumbnail grid model is suitable for the blog in the form of photoblog. Although the blog with any theme can also be used. Visual effects photograph, giving a new experience to the visitors to the blog to see the post from photos or drawings illustrations.
How to Make Recent Post Thumbnail Grid Display
1. Go to Blogger & gt; Template & gt; Click the Edit HTML & gt; Copy and save the code below right before the </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="_top" title="'+r+'">'+m+p+"</a>";e.push('<div class="gallerytem">',g,"</div>")}e.push("</div>"),document.write(e.join(""))}
//]]>
</script>READ ALSO:
How to Make a Simple Responsive Recent Posts in Blogspot
How to Install Widget Recent Post Responsive Slider in Sidebar Blog
2. Next, copy the following code right before the ]]></b:skin>
/* 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;}3. Save template.
4. The next step is open Layout & gt; Add new widget and then copy and store the code below in it:
<script>
var arlina_thumbs = 72;
var arlina_title = true;
</script>
<script src="/feeds/posts/summary?max-results=9&alt=json-in-script&callback=arlinagrid"></script>5. Save the widgets and see the result.
Description:
- var arlina_thumbs = 72: thumbnail size, change according to taste.
- var arlina_title = true: Displays the title of the post when the cursor select one post on the thumbnail.
- max-results = 9: The number of posts to be displayed.
Additional:
If you want to show posts by label, please replace the feed url above as below:
<script src="/feeds/posts/summary/-/BLOGGER?max-results=9&alt=json-in-script&callback=arlinagrid"></script>BLOGGER is the name of the label that will be displayed.
Quite so about How to Install Widget Recent Post Gallery, may be useful.
