How to Display Blogger Posts in Grid View with Thumbnails

How to Display Blogger Posts in Grid View with Thumbnails

In a Blogger, as a default, all posts are showing top to bottom in the lengthy bar But here I am sharing Grid view with thumbnails for the blogger posts on the home page and related posts in the short view which reduces users difficulty to show all posts in the grid view which user can select his required post immediately and he will put more interest on the additional posts if he needs. Grid view attracts more visitors and increases the views of our blogger posts. Thumb nails also play a very important role in what is the post in the one view. So you might have known list view templates in the grid style.
In my opinion, you have to reduce the complex long scrolling problems for page visitors to choose an interesting article.

In the below image, you can see the grid view with thumbnail posts.

Start Adding Grid view to Blogger Posts

Now, Go to the Blogger Dashboard ->Click on Theme Button->choose the EDIT HTML button.

Within the code,press CTRL+F to search the </Head> Tag.Just above the </head>  Tag ,Paste the below code.

<script src='http://code.jquery.com/jquery-1.9.1.js'/>

<b:if cond='data:blog.pageType != &quot;item&quot;'><b:if cond='data:blog.pageType != &quot;static_page&quot;'>

<script type='text/javascript'>//<![CDATA[

function hideLightbox(){for(var a=document.getElementsByTagName("img"),b=0;b<a.length;++b)a[b].onmouseover=function(){var a=this.parentNode.innerHTML;this.parentNode.innerHTML=a,this.onmouseover=null}}$(document).ready(function(){var a=200,b=170,c="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHJmgwVI1_wAMqirMmmWxvh6Vm-3tU-qdu38ne3uo1IxowpEpSHds5TsHmr_JPnt36rAMUbNHuTD9uQ26ZYnzY7DsSGY5gHa51Q9NDNmjw-F8IHGqT7cvKt_FlyD3MYjKKxvdn02kQxs4/w500-c-h330/no-thumb.png",d=1;$(".post-body").each(function(e,f){var f=$(f),g=$(f).find("img").first(),h=f.parent().find("h3 a"),i=h.attr("href"),j=h.text();if($(h).remove(),f.empty(),g.attr("src")){var k=g.attr("height"),l=g.attr("width"),m=$(g).parent();if(f.append(m),d)g.attr({src:g.attr("src").replace(/s\B\d{3,4}/,"w500-h330-c")}),g.removeAttr("width").removeAttr("height");else{g.attr({src:g.attr("src").replace(/s\B\d{3,4}/,"s"+a)}),g.removeAttr("width");var n=(k/l*a).toFixed(0);g.attr("height",n)}}else var g=$("<img>").attr("src",c),m=$("<a>").append(g).appendTo(f);m.attr("href",i).css("clear","none").css("margin-left","0").css("margin-right","0").addClass("postThumbnail");var o=$("<div>").prepend(j).css("opacity","0.9").css("filter","alpha(opacity=0.9)").appendTo(m);o.height();o.css("margin-top","-28px"),f.css("height",b).css("overflow","hidden")}),$("#blog-pager").css("clear","both")}),window.addEventListener?window.addEventListener("load",hideLightbox,void 0):window.attachEvent("onload",hideLightbox);

//]]>

</script>

<style type='text/css'>

.post {

width:31.3%;

float:left;

display:inline-block;

border-bottom: medium none;

margin: 0 1% 2%;

padding-bottom: 0;

}

h2.date-header,.post-footer {

display: none;

}

h3.post-title, .comments h4,.post-header{margin:0;}

.postThumbnail:hover {text-decoration:none;}

a.postThumbnail div {

text-decoration: none;

color: #fff;

padding:0 5px;

height:24px;

font:bold 12px/25px &quot;Trebuchet MS&quot;,Trebuchet,Verdana,sans-serif;

text-transform: capitalize;

background: rgb(125,126,125);

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)));

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 );

}

.postThumbnail{width:100%;}

.postThumbnail:hover div {

display: block;

}

.postThumbnail img {

width:100%;

background-color: transparent;

border: medium none;

padding: 0px;

-webkit-border-radius: 12px;

-moz-border-radius: 12px;

border-radius: 12px;

transition: opacity .25s ease-in-out;

-moz-transition: opacity .25s ease-in-out;

-webkit-transition: opacity .25s ease-in-out;

}

.postThumbnail 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></b:if>

Finally, save the Blogger Template, view the blogger theme view for testing whether a grid view with thumbnails has been successfully created.

Conclusion

If you know more about How to Display Blogger Posts in Grid View with Thumbnails? Please comment below, or share this article to help others.