How to Display Blogger Posts in Grid View with Thumbnails

If you are running Wallpaper or Funny Images niche blog, Here is a useful tutorial for you. In this article we gonna discuss on how you can display blogger posts in grid view with thumbnails. Grid View with Thumbnails is a script for self-hosted Blogger blogs that displays blog posts as a thumbnail grid of images in homepage and archive pages. Normally, your posts are displaying in full length with a large image that takes too much space in your blog and required too much scrolling. So, now if you would like to have your blog clean and fast loading then you should try out gallery grid, with thumbnails and post titles, linking back to the source post. Before you go for the steps of installing this feature to your blog Please check out this demo blog once.

Well, after seeing the demo of grid view feature on the demonstration blog, if you are satisfied with it and would you live to have the same in your blog, then follow the simple procedure below .

Related : How to add static page to blogger blog ( Updated )

Adding Grid (Gallery) View to Blogger Posts

Log-in with your blogger account and navigate to Template > click on the Edit HTML button
Click anywhere inside the code area and press CTRL + F to open search box
Type </head> inside the search box and hit ENTER to find it.
Once, you find the </head> tag in code, Add the following script and style:

<b:if cond='data:blog.pageType == &quot;index&quot;'>
<script language='javascript'  src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js'  type='text/javascript'/>
<script type='text/javascript'>//<![CDATA[

$(document).ready(function() {

    var width         = 200;
    var height        = 170;
    var placeholder    = 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjViC74hQnfSrKiKDv0wbDsz0wAyD7Cjxwf_-YfIzFhTpSGATrg-DmDSHhoAGNgVG9kMHiKmqriD8HZg9Mrx33taObXj8JdS8Tz8lZ3LivkaWHA7S7uW4mABlAcZ66aaJky3O4fYsYkqVs/s1600/no-thumb.png';
    var margins     = "0px 0px 10px 10px";
    var fitThumb                 = 1;
    var titleTopPadding            = 5;
    var titleBottomPadding        = 8;
    var titleLeftRightPadding    = 5;    

    var titlePadding = titleTopPadding + 'px ' + titleLeftRightPadding +  'px ' + titleBottomPadding + 'px ' + titleLeftRightPadding + 'px';
    $('.post-body').each(function(n, wrapper){
        var wrapper         = $(wrapper);
        var image         = $(wrapper).find('img').first();
        var link         = wrapper.parent().find('h3 a');
        var linkURL         = link.attr('href');
        var linkTitle        = link.text();

        $(link).remove();
        wrapper.empty();

        if (image.attr('src')) {
            var thumbHeight = image.attr('height');
            var thumbWidth = image.attr('width');    
            var thumbParent = $(image).parent();

            wrapper.append(thumbParent);

            if (fitThumb) {
                image.attr({src : image.attr('src').replace(/s\B\d{3,4}/,'s' + width + '-c')});
                image.attr('width',width).attr('height',height);
            } else {
                image.attr({src : image.attr('src').replace(/s\B\d{3,4}/,'s' + width)});
                image.attr('width',width);
                var changeHeight = (thumbHeight/thumbWidth * width).toFixed(0);
                image.attr('height',changeHeight);
            }
            
        } else {
            var image = $('<img>').attr('src',placeholder).attr('height',height).attr('width',width);
            var thumbParent = $('<a>').append(image).appendTo(wrapper);
        }

         thumbParent.attr('href',linkURL).css('clear','none').css('margin-left','0').css('margin-right','0').addClass('postThumbnail');
        
        var thumbTitle =  $('<div>').prepend(linkTitle).css('padding',titlePadding).css('opacity','0.9').css('filter','alpha(opacity=0.9)').css('width',width).appendTo(thumbParent);   
        var ptitleHeight = thumbTitle.height();
        var summary = parseInt(ptitleHeight) + parseInt(titleTopPadding) + parseInt(titleBottomPadding);
        thumbTitle.css('margin-top','-'+summary+'px');             wrapper.css('float','left').css('height',height).css('width',width).css('margin',margins).css('overflow','hidden');
    });
    $('#blog-pager').css('clear','both');
});

function hideLightbox() {
    var images = document.getElementsByTagName('img');
    for (var i = 0 ; i < images.length ; ++i) {
        images[i].onmouseover=function() {
            var html = this.parentNode.innerHTML;
            this.parentNode.innerHTML = html;
            this.onmouseover = null;
        };
    }
}

if (window.addEventListener) {
    window.addEventListener('load',hideLightbox,undefined);
} else {
    window.attachEvent('onload',hideLightbox);
}
//]]></script>
<style>
.post {
border-bottom: 0 dotted #E6E6E6;
margin-bottom: 0;
padding-bottom: 0;
}
h2,.post-footer {
display:none;
}
a.postThumbnail div {
text-decoration: none; color: #fff;
font-size: 12px;
font-weight: bold;
text-transform: capitalize;
background: rgb(125,126,125); /* Old browsers */
background: -moz-linear-gradient(top,  rgba(125,126,125,1) 0%, rgba(14,14,14,1) 100%);
background:  -webkit-gradient(linear, left top, left bottom,  color-stop(0%,rgba(125,126,125,1)), color-stop(100%,rgba(14,14,14,1)));  /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  rgba(125,126,125,1) 0%,rgba(14,14,14,1) 100%);
background: -o-linear-gradient(top,  rgba(125,126,125,1) 0%,rgba(14,14,14,1) 100%); 
background: -ms-linear-gradient(top,  rgba(125,126,125,1) 0%,rgba(14,14,14,1) 100%); 
background: linear-gradient(to bottom,  rgba(125,126,125,1) 0%,rgba(14,14,14,1) 100%); 
filter:  progid:DXImageTransform.Microsoft.gradient(  startColorstr=&#39;#7d7e7d&#39;,  endColorstr=&#39;#0e0e0e&#39;,GradientType=0 ); 
} 
a.postThumbnail:hover div {
display: block;
}
.post-body img {
background-color: transparent;
border: 1px solid transparent;
padding: 0px;
-webkit-border-radius: 12px; 
-moz-border-radius: 12px; 
border-radius: 12px; 
opacity: 1;
transition: opacity .25s ease-in-out;
-moz-transition: opacity .25s ease-in-out;
-webkit-transition: opacity .25s ease-in-out;
}
.post-body img:hover {
-ms-filter: &quot;progid:DXImageTransform.Microsoft.Alpha(Opacity=70)&quot;;
filter: alpha(opacity=70);
-moz-opacity: 0.7;
-khtml-opacity: 0.7;
opacity: 0.7;
}
</style>
</b:if>

Note:
- If you want to make the post thumbnails larger, modify the 200 (width) and 170 (height) values in blue
- To change the default thumbnail for when there are no images, replace the URL in red with your own.