Just a day to day of what's happening with my blog's

Sunday, February 5, 2017

Random Posts Gallery

Photo Example taken from my IcqGreeting4U Blog

LOVe Love Love this little blog goodie ... it shows a random 72 by 72 thumbnail of your posts and when moused over the title... ... goes nicely in the footer or sidebar... and nothing needs to be changed in the script to personalize it to your own blog unless you want it to open in NEW WINDOW then change the words _self to _blank

CODE 

<script type='text/javascript'>
//<![CDATA[
// Random Post Gallery
function arlinagrid(a){for(var t=a.feed.entry||[],e=['<div class="random-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="_self" title="'+r+'">'+m+p+"</a>";e.push('<div class="gallerytem">',g,"</div>")}e.push("</div>"),document.write(e.join(""))}
//]]>
</script>
<style>
/* CSS Random Post Gallery */
.random-gallery {padding:0;clear:both;}
.random-gallery:after {content:"";display:table;clear:both;}
.random-gallery .gallerytem{display:inline-block;position:relative;margin:6px 0;overflow:hidden;}
.random-gallery .gallerytem a{position:relative;float:left;margin:0 6px;text-decoration:none}
.random-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}
.random-gallery .gallerytem:hover .ptitle{visibility:visible;opacity:1}
.random-gallery a img{background:#fdfdfd;float:left;padding:2px;border:1px solid #e3e3e3;transition:all .3s}
.random-gallery a:hover img {border-color:#bbb;}
</style>
<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>


RESULT:

Share:
Began 2017 by LoriAnn. Powered by Blogger.

Random

Welcome

Video