Showing Blogger Posts in Grid View with Thumbnails

Blogger Posts in Grid View with Thumbnails

Grid View with Thumbnails is a script designed specifically for self-hosted Blogger blogs. Its purpose is to present blog posts in a visually appealing manner by showcasing them as a grid of thumbnail images on the homepage and archive pages. This script offers an alternative to the traditional approach of displaying full-length posts with large images, which often leads to excessive scrolling and takes up a significant amount of space on the page.

With Grid View with Thumbnails, bloggers can create a clean and organized layout that showcases a gallery grid of post thumbnails accompanied by their respective titles. By clicking on a thumbnail, visitors are directed to the source post associated with that specific image. To get a better sense of how this script works, you can explore a demo blog provided in this.

If you run a wallpaper or photo blog and want to enhance its visual appeal with a thumbnail grid layout, Grid View with Thumbnails is an excellent solution. Here's a step-by-step guide on how to add the Grid (gallery) View to your Blogger posts:

Adding Grid (Gallery) View to Blogger Posts

Step 1. Log in to your Blogger account and go to Template > click on the Edit HTML button

Step 2. Click anywhere inside the code area and press the CTRL + F keys to open the search box

Step 3. Type </head> inside the search box and hit Enter to find it.

Step 4. Just above the </head> tag, 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/AVvXsEgYnHj9vMBKEri2wSj7LhmingxzROSu66zD-uesmh2RTXn8DARfTSGq8RKLlLzxBzPLqr2Sdx33wDdMEOe4_pqQWLA1g4YlI3IrRNI5BuDoHYvNkqUjT4X3b8oX1SLbFTJoGvQstgKmb7g/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.

Step 5. Click on the Save template button to save the changes and View your blog. Now you should have a nice grid view on your Blogger posts. Enjoy!