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.
How to install recent post widget on blogger
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 - Login
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 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="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: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 .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 ". (See the below image)
Now copy the below code and paste it in Html box.
<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>
After that, click on the save widget button and see the magic.
Modification of this widget.
If you want to change the thumbnail size, then replace the highlighted 72.
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 9.
That's it! I hope you like this widget! Stay tuned for more blogger tips and tricks! Thanks for reading @Prince
0 Comment to "Gallery Style Recent Post Widget For Blogger"
Post a Comment