Show Blogger Post in Grid View with Thumbnail

Show Blogger Post in Grid View with Thumbnail!!

How to Show Blogger Post in Grid View with Thumbnail.

Recently I had shared a post on Adding Read More button with Thumbnails. And to the day I am gonna show how you can Display your Blogger Blog post in Gird View Style with Thumbnail. Actually both of these Post displaying techniques on the Blog homepage are almost the same. But the design and the code that you will have to use for this Gird view style is different. When you apply the Gird View style in your blog the posts of your Blog will show like the below example. Have a look at the Demo below.

Add Meta Description Tags to Blogger(Opens in a new browser tab)

If you are blogging on the Blogger platform then you can apply this design on your Blog. As a result of the application of this Gird View style on your blog, all the posts will be displayed as a thumbnail grid of the image on the homepage and archive pages. In the normal view style, you can only afford to display a few posts on the homepage. But in Gird view style you can display many posts in a gallery with thumbnail and post title. If your blogging on Wallpaper or Photo then this style can give the maximum result. Let’s see how to add this Gird view style on Blogger.

Warning: Before doing any kind of customization on your site’s HTML page, I will recommend you to backup your site Template. To know more about Template backup read This Post.

Adding Gird View Style to Blogger:
      • First>

    Sign into

      •  your>

    Blogger Account

      •  and go to>



  • Then click on Template and then click on the Edit HTML button. You will land on the HTML page.
  • Here in the HTML page find </head> tag and Paste the following code just above it.
 <script src=""></script>  
 <script src=""></script>  
 <b:if cond='data:blog.pageType == &quot;index&quot;'>  
 <script type='text/javascript'>//<![CDATA[  
 $(document).ready(function() {  
   var width = 200;  
   var height = 170;  
   var placeholder = '';  
   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();  
     if (image.attr('src')) {  
       var thumbHeight = image.attr('height');  
       var thumbWidth = image.attr('width');  
       var thumbParent = $(image).parent();  
       if (fitThumb) {  
           src: image.attr('src').replace(/sBd{3,4}/, 's' + width + '-c')  
         image.attr('width', width).attr('height', height);  
       } else {  
           src: image.attr('src').replace(/sBd{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);  
 .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 );  
r 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;  
  • Finally, click on the Save Template button to apply the Gird view style.
That’s it, Now view your blog and you will see that your blog’s posts are showing in nice Gird View style.

How To Add Keywords in Blogger Posts For Optimization? (Opens in a new browser tab)

The 5-Step Process to Write Viral Blog Posts Every Time(Opens in a new browser tab)

Leave a Comment

Scroll to Top