Show Blogger Post in Gird View with Thumbnail!

Recently I had shared a post on Adding Read More button with Thumbnails. And to 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 technique on Blog homepage are almost same. But the 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 shown like the below example. Have a look at the Demo below.

If you are blogging on Blogger platform then you can apply this design on your Blog. As the result of the application of this Gird View style on your blog all the posts will be display as a thumbnail gird of image in homepage and archive pages. In the normal view style you can only afford to display a few posts on homepage. But in Gird view style you can display many post 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 Dashboard.
• Then click on Template and then click on 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="http://code.jquery.com/jquery-1.9.1.js"></script>  
 <script src="http://code.jquery.com/jquery-migrate-1.1.0.js"></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 = 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLtYbtwt3ER4nyweaoCEQO8yCaO02IZeH__KQeR5c9nAVH5LGodMLObauF2TZ_QFGGdfdtHXIb5z2e67nUCB_M5n8ArcTGx_Szhkj0kV4ogdqw2S3VzTIdbo5eoIYtCfeyu_-jsN-6hwY/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>  

Customization:

• To modify the Thumbnail size, change width = 200 and height = 170 value.
•  Replace the image URL in Red with your own, to change the default thumbnail when there are no image.

• Finally click on 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.

Stay with www.iTTimesbd.com for more IT related post