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 you could 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 what it could 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 in to your Blogger account and go to Template > 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 style:
<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 = 'http://3.bp.blogspot.com/-7Ie-cUwxWB4/U2KIRWgvpNI/AAAAAAAAIfU/Mj6qpg5S2fk/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>
Note:
- If you want to make the post thumbnails larger, modify the 200 (width) and 170 (height) values in blue
- To change the default thumbnail for when there are no images, replace the URL in red with your own.

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!

53 comments:

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

    ReplyDelete
  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

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

    cornerstonechristianchat.com

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

      Delete
    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?
      T

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

    ReplyDelete
  5. nice post bro Keep it up :s

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

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

    ReplyDelete
  8. verry beautiful desainner master.

    ReplyDelete
  9. Anonymous5/08/2014

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

    ReplyDelete
  10. Anonymous5/09/2014

    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
  11. 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
  12. Anonymous5/18/2014

    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
  13. 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
  14. All tricks working but this trick isn't work? Coding problem

    ReplyDelete
  15. 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
  16. How can i make this only visible in some pages? I need your reply ASAP! Please! And thank you :)

    ReplyDelete
  17. 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
  18. 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
  19. 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
  20. 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
  21. 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
  22. 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
  23. after add this code all Head titles in page ared hidden

    ReplyDelete
  24. 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
  25. 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
    Replies
    1. I would like to know the same thing :)

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

    ReplyDelete
  27. 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
  28. Anonymous10/23/2014

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

    ReplyDelete
  29. 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
  30. sir i need to display posts by label in grid view with max no of posts option, please help me

    ReplyDelete
  31. its not working in internet explorer

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

Although every comment is appreciated, due to an overwhelming amount of questions, I can no longer provide personalized help. Keep in mind that comments are moderated and may take some time to appear. All spam comments will be deleted. Thanks for understanding!