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="http://3.bp.blogspot.com/-7Ie-cUwxWB4/U2KIRWgvpNI/AAAAAAAAIfU/Mj6qpg5S2fk/w500-h330-c/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);
<style type='text/css'>
.post {
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;
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:hover div {
display: block;
.postThumbnail img {
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;
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!


  1. This is really awesome sitemap of the blogger posts..

  2. I added this to my blog to test it out, and I must say, It looks horrible. The reason why I say this is because I had hoped it would display a number of my posts, but since I only have one post done for the month of May, it's only displaying that one single post. Id like to be able to display about 12 posts no matter what month they were posted in.
    see here. cornerstonechristianchat.com

  3. I had hoped that this script would display a gallery of posts but instead it's only showing one post made in the month of May, because I've only written one post so far for the month of May. How can I get it to show a dozen posts no matter what month the posts were made in.


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

    2. I've tried once again to install this code at www.cornerstonechristianchat.com, however, it sits off center on my page and there are three "Read More" links on the right side of the list that look horrible and are probably the reason the grid is off center. How can I fix this?

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

  5. This style is beautiful.Thanks for sharing this post!

  6. It only show one post which is the most recent

  7. verry beautiful desainner master.

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

  9. 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.

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

    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.

  11. 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.
    The way they display news .

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

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


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

  14. 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.


    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?

      http://ryinspace.blogspot.com/ (http://ryinspace.com)

    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.

    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!


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

    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.

    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!


    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!


    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.


    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.

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

  16. 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?

  17. 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?

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

    1. Hi Rahul,

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

  19. 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 ?

  20. 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.

    1. Hi Kuf,

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

  21. Is there any way of making the thumbnails desaturated?

    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.

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

  23. 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 ?

  24. 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?

  25. A great tutorial brother , can you please explain now how to change the number of columns in this grid view , in your demo blog here http://helploggergridview.blogspot.in/ you have implemented 3 columns but if we want to show 2 , 4 or more columns how can we do that also how can we show the title of the post in more space and at the top of the post image

  26. 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/

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

  28. 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,

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

  30. its not working in internet explorer

  31. 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

  32. 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