-->

Display Blogger Posts In Grid View With Thumbnails

- January 24, 2018
Wanna display Blogger Post In grid view with Thumbnails.

If yes then you are at perfect place. Today we will discuss on it.

In most blogs there a homepage full of blog posts with list style. Visitors have to scroll to go to down. So, if you want to give your visitors a good experience on your blog you should use blogs posts with Grid view.

Grid View is a script for blogger blog which will display Blogger blog post in Grid style with Thumbnails in homepage and archive pages. This is best for blogs with videos and wallpapers. Before proceeding to the steps for adding grid view, take a look at the demo.

                        Live Demo


display-blogger-posts-in-grid-view-with-thumbnails


I hope you have satisfied with the demo. And if you want to display Blogger posts in grid view with Thumbnails in your blog then follow the next steps.

Display Blogger Posts With Grid View With Thumbnails


Step 1: Login to your Blogger Dashboard.

Step 2: Go to Template >> Edit HTML.

display+blogger-posts-in-grid-view-with-thumbnails


Step 3: Click anywhere inside the code area and press Ctrl + F to open the search box.

Step 4: After that search for the </head> tag.

Step 5: When you find the code just above </head> code paste the code given below:

<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/AVvXsEiJXaVwLuybd1dxV-V2V4hilPm2rrMtLo-wdE1KkR-9uqeWfuNeQLop4UGLV4nv5d-Hjk5WwgklqQ8ICUWdDqHUz7xh-0kpNkssdIF3BDRXdi1VBnaWtVHqFQrSoqRKpoNif9_TVsb3_T0/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>

Customization:-


  • To change the width of the image replace 200 with your own size.



  • To change the height of image replace 170 with your own size.



  • To change default image, when there is no image then replace the link highlighted in red.


Last Words

Now your posts will start displaying in grid view with Thumbnails. I hope you liked this post. Comment down your problems and share this post with your friend. For more stay tuned with us...

11 comments

hostbazzar said...

Really very happy to say your post really intreasting to read. I never stop my self to say something about it.you're doing great article keep it up.

Md. Alfaaz said...

Thank you so much for appreciating my writing. Keep Visiting!

Md. Alfaaz said...

Thank you so much dear for appreciating my writing. I am glad that this post has helped you. Keep Visiting!

CrazzyAdda said...

It's a really superb post. Thank you so much to share. Keep it up.
Happy Friendship Day 2018 Status Quotes Greetings Wishes and Messages

hostbazzar said...

Nice collection ….keep posting such things

iamgeetha said...

Hi, I'm implemented in my blog but i need that thumbnail size is bigger. Please suggest. TIA

https://iamgeetha.blogspot.com

Md. Alfaaz said...

Hello @Iamgeetha. I have highlighted the height and width of the image in the code. Change it according to your size. Thanks for visiting. Take Care.

ume academy said...

Hi
I’ve been following your blog from few days.
Your latest post is fantastic and resonated with me. I thought it was something my audience would appreciate,
Thanks

Md. Alfaaz said...

Thank you so much for your feedback. Keep Visiting!!

Alain Reel said...

Hi Alfaaz, is it possible to show social share icon when people click on the images on my blog?

Md. Alfaaz said...

Hi @Alian. Yes, it is possible. Read this article