Display Blogger Posts in Grid View with Thumbnails

Grid View with Thumbnails is a script for self-hosted Blogger blogs which will display blog posts as a thumbnail grid of images in homepage and archive pages. Instead of sending your blog visitors to a page that displays all the posts in full length with a large image which takes up too much space and requires too much scrolling, now we can have a clean page that displays a gallery grid, with thumbnails and post titles, linking back to the source post for that thumbnail.

Let's take a look at how it will look like in this demo blog.

grid view on blogger posts

If you have a wallpaper or photo blog that would benefit from displaying a thumbnail grid style layout, look no further. Here's how you can add Grid (gallery) View to Blogger posts.

Adding Grid (Gallery) View to Blogger Posts

Step 1. Log into your Blogger account and go to "Template", then click on the "Edit HTML" button

blogger template html

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 CSS codes:
<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/AVvXsEjmJomWk-K7nvT_RL4fojTZfeYScFDex3sndqOMkazQXMbKfxNEiUbZKHLkT7rWdURPiRGIJ3_TIkZVM9HxmYmVFPAOL9VN874XoT-XaoHqxfezZ8d__FG9K25Ia84eqiDdUr6Z0-uePXw/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>
Note: If there's too much space below the posts, modify the 170 height value.

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!

49 comments:

  1. This is really awesome sitemap of the blogger posts..
    Regards,
    ansmachine.blogspot.com

    ReplyDelete
  2. Hey dude, something is wrong in your 22th page. Please check it. I think you will correct it soon.

    ReplyDelete
  3. This style is beautiful.Thanks for sharing this post!

    ReplyDelete
  4. It only show one post which is the most recent

    ReplyDelete
  5. verry beautiful desainner master.

    ReplyDelete
  6. Have you tried to change the number of posts displayed on the main page?

    ReplyDelete
  7. Something wrong with this coding admin, have a look at it again.

    ReplyDelete
  8. I have the same problem as everyone else. Setting are for 9 posts per page so it looks even but it only shows the amount of posts per month.

    ReplyDelete
  9. Is there a way for me to change the type of font used? I'd like to use Josefin Sans. Thanks!

    ReplyDelete
    Replies
    1. Hi Missy G,

      You need to add this script above the </head> tag:
      <link href='http://fonts.googleapis.com/css?family=Josefin+Sans' rel='stylesheet' type='text/css' />

      Then add this CSS code after a.postThumbnail div { (step 4):
      font-family: 'Josefin Sans', sans-serif;

      To change the font size, replace the 12px value from font-size.

      Delete
  10. Bro Pls can you make a style like this website . I dont know how to edit the way posts look in homepage .
    I really want style like that for my blog.
    http://www.phonearena.com/
    The way they display news .


    I am trying to figure it out since 1 month but no success i guess you can help me .

    ReplyDelete
  11. I love having this on my blog, but for some reason the titles of all my gadgets disappear. Can you help me out?

    Thanks!
    www.missyg.com
    missygblog@gmail.com

    ReplyDelete
  12. All tricks working but this trick isn't work? Coding problem

    ReplyDelete
  13. I'm trying to work with this template because I think it's a cool idea, but my posts are a mess. I've tried 6, 9, 12 posts per page, but it's hanging on 5 on the front page with strange white lines across the background. Is there any simple fixes or should I just revert to my old template? My settings are currently for 9 posts.

    Thanks,
    Ryan
    http://ryinspace.blogspot.com/

    ReplyDelete
    Replies
    1. Hello I'm still having issues. I've left the site live with the errors (only 5 posts showing vs. 6 or 9). The white lines in the background are probably outlined boxed for the posts that are still anchored in the code. I'm not sure how to remove those to clean up and get my blog looking clean. Any help or suggestions would be appreciated to fix this.

      Is there a way to clean house on just this part of my template without losing all the other design?

      Thanks,
      Ryan
      http://ryinspace.blogspot.com/ (http://ryinspace.com)

      Delete
    2. Hi Ryan,

      To hide the while lines, add this code within the style tags (step 4)
      .post-outer {background: none; margin: 0px; padding: 0px; border: none}
      .jump-link {display: none;}

      And for the number of posts, insert a jump break somewhere in the middle of each of your posts and see if it works. Sorry for the very late reply! I hope this will solve the issue.

      Delete
    3. Dead Admin and team, those edits fixed the issue! I'm happy with the way this now looks! Thanks for the help and I hope others also enjoy this layout!

      Cheers,
      Ryan
      RyInSpace.com

      Delete
    4. I'm happy that it worked out for you :) Thanks for visiting!

      Delete
    5. Hi again Ryan,

      I'm not sure if you're still reading this but it seems that the issue regarding the number of posts was most likely caused by an outdated version of jQuery. So I would recommend you to replace this script in your template:
      <script language='javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js' type='text/javascript'/>

      With these scripts:
      <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>


      Hopefully, now everything works well.

      Delete
    6. Hello Admin,

      I made those changes. It's still working, so that's good. Just so you know, some posts would show the embedded graphic but wouldn't have a hyperlink hotspot, so I added a jump break before the image and the hyperlink and title now work, but it uses the default thumbnail for no images. It's probably the image type that's embedded? I don't mind, but though you may want to know.

      6 post example: http://ryinspace.blogspot.com/search?updated-max=2011-11-22T11:51:00-07:00&max-results=6&start=6&by-date=false

      Specific blog post example where jump break was added before image to fix: http://ryinspace.blogspot.com/2011/10/help-us-win-weddings-rings-flown-in.html

      It looks like jump breaks are the way to fix any issues!

      Cheers,
      Ryan
      RyInSpace.com

      Delete
    7. It looks like I'm still having issues on the front page. I noticed that some of my posts with issues have YouTube videos. Other posts like my 4th most recent (http://ryinspace.blogspot.com/2014/09/the-late-night-integrated-by-parts.html) do not seem to have any issues, but 5-9 are not loading on the front page. Is there another update that I need to make? The jump solution is not working as a work around in this scenario. The jump in post #3 seems to be needed or that causes a different error (the thumnail is attempted to be taken form the table row 1). Help is always appreciated!

      Cheers,
      Ryan
      RyInSpace.com

      Delete
    8. I solved my latest problem (post 16.g). It turns out that the blog post causing the page to fail to load more posts had too many images. The amount of data probably caused the code to timeout. I added a trusty jump into that post and now it's back to normal.

      Cheers,
      Ryan
      www.RyInSpace.com

      Delete
    9. Hi Ryan,

      If you're still having issues with this script, please try this one instead and add it just above the </head> tag (remove the previous one). Then, you'll need to replace the second and third occurrence of <data:post.body/> with this code.

      If you need more help or can't find the lines above, please send me a xml copy of your template at helplogger76@gmail.com.

      Delete
  14. How can i make this only visible in some pages? I need your reply ASAP! Please! And thank you :)

    ReplyDelete
  15. Hi, it is great, I love it, but for some reason, mu posts remains inactive, there is no title below the picture so people can enter directly... Can you help me?

    ReplyDelete
  16. Hi ,

    Thanks for sharing.

    I am planning to use this script. I have tried on the blog but there is two feature I think can be improved.

    Upon clicking the picture of the post , it maximize the picture and it does not go into the post, I would have to click the post title than it would lead me to the post. Is there anyway to change this?

    Additionally, If I post a picture that is larger than the preview size of the post, it will just show what is in the middle of the picture instead of sizing the picture down to fit the preview window. Could I change this too?

    ReplyDelete
  17. Hi there is problem when I used, it's working fine but my post title first letter not showing. Please help team

    ReplyDelete
    Replies
    1. Hi Rahul,

      Change the padding value (5) from this line:
      var titleLeftRightPadding = 5;

      Delete
  18. I really like your this blog to help me design mine. I am looking for a way to dislay my articles in grid only when a visitor select a category in my menu, is that possible ?

    ReplyDelete
  19. Hello there.
    I used this on my site,and it worked.Thank you for this guide.
    However,I was wondering if there is way to remove the grey line which contains the title of each post,and just display the thumbnails on the home page,no text over them.

    ReplyDelete
    Replies
    1. Hi Kuf,

      Add this just below a.postThumbnail div {
      display: none;

      Delete
  20. Is there any way of making the thumbnails desaturated?

    ReplyDelete
    Replies
    1. Hi Joe,

      Add these lines just below .post-body img {:
      filter: grayscale(1);
      filter: grayscale(100%);

      Please note that this will work only in Chrome, Opera (15+) and Safari.

      Delete
  21. after add this code all Head titles in page ared hidden

    ReplyDelete
  22. Hi Bro..........whats the code if I don't want thumbnails in grid view........i want to design my blog same as this..........http://attitudestatus.blogspot.in/..............can u help me in that ?

    ReplyDelete
  23. Hi,
    I'd like to know if there is a way that I can have the grid thumbnail only for my tabs pages and not on my homepage?

    ReplyDelete
  24. Hello! I'm loving the layout of this however, I'm having some troubles.. there's a line break between the thumbnails of posts from one month to another.. in addition to that, only the tumbnails from last month are hyperlinked but the ones I just posted today arent linked to anything. Any help is appreciated. thank you!
    Here's the blog I've been trying it out on : http://fchiuphoto.blogspot.ca/

    ReplyDelete
  25. How to create grid thumbnail for pages instead of my homepage ?

    ReplyDelete
  26. Hi,
    Dear Admin i added this but it doesn't links to the posts content only thumbnails are showing but doesn't clicks? Please reply Asap.

    Thank you,

    ReplyDelete
  27. sir i need to display posts by label in grid view with max no of posts option, please help me

    ReplyDelete
  28. its not working in internet explorer

    ReplyDelete
  29. Hi admin
    I used ur old grid view style for my blog it worked well a long time, but I don't know what happen.
    if i use page navigation then actual contents (posts) of 2 page is over written by older posts (they are showing in archives) in home page.
    but it showing fine if i navigate the posts by next post buttons by opening the first post from home page.
    i hope u understand. Please give a solution. thanks for ur help in advance
    my blog is : www.surkur.blogspot.com

    ReplyDelete
  30. Respectable Sir/Team;

    Is there any way to show grid view of blogger search labels (not the home page just label search as grid view)

    like given link should be displayed as grid view instead of read more view

    (It should not be like)http://tricks-andstips.blogspot.com/search/label/Adobe

    (It should be like) LINK:http://paktv12.blogspot.com/search/label/Bewafa%20Poetry

    (Please help me on the given topic I am searching alote and for long time for this plzzzz)

    I need this for my blog www.mobilepricess.com

    ReplyDelete