How To Change Blogger Posts To Grid View With Thumbnails



Most of the blogger templates are in list style which makes your blog visitors to scroll down the home page to watch your all posts and it will take much time. But you can change any blogger template from list style to grid view. If you run a fashion blog, then this hack is useful for you. If you could display your posts with grid style and thumbnails with post titles on home page then that will be the better idea to attract your blog visitors. This grid view with thumbnails style will be better suited for photo and wallpaper blogs. Here is a simple trick how to change blogger posts to grid view with thumbnails. If you are really looking to make your blog more attractive by making some small changes in your HTML, then please go through the below instructions.


1.   Login to your blogger account and edit HTML




2.   Search (Ctrl + F) for the code </head> and just above this code copy and paste the following script.

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

3.   Now save your template to take changes. Refresh your blog home page and you will see the home page changed to grid view with thumbnails. That’s it!


Note: 
  • If you want to make the post thumbnails larger then modify the 200 (width) 170 (height) values in blue.
  • To change the default thumbnail for when there are no images, replace the URL in red with your own URL.

SHARE

PageToWatch

  • Image
  • Image
  • Image
  • Image
  • Image

55 Comments:

  1. it works but it is not showing Post Title

    ReplyDelete
  2. nice post thank for help

    www.raambaanilaj.com

    ReplyDelete
  3. i want to set the width to 30% and height to auto, how can i do it please?

    ReplyDelete
  4. Good way of explaining, and nice paragraph to get facts on the topic of my presentation topic, which i am going to deliver in academy.

    ReplyDelete
  5. We stumbled over here from a different page and thought I may
    as well check things out. I like what I see so i am just following you.

    Look forward to checking out your web page again.

    ReplyDelete
  6. Superb, what a weblog it is! This weblog gives useful facts
    to us, keep it up.

    ReplyDelete
  7. Marvelous, what a weblog it is! This weblog gives valuable information to us, keep it up.

    ReplyDelete
  8. I've been surfing online more than three hours today, yet
    I never found any interesting article like yours.
    It's pretty worth enough for me. In my view, if all web owners and bloggers made good content
    as you did, the web will be much more useful than ever before.

    ReplyDelete
  9. Unquestionably consider that which you stated.
    Your favorite justification seemed to be on the internet
    the easiest thing to take into accout of. I say to you, I definitely
    get annoyed even as people consider worries that they plainly
    don't realize about. You controlled to hit the nail upon the highest as well as defined out the entire thing without
    having side-effects , other folks can take a signal. Will likely be back to
    get more. Thank you

    ReplyDelete
  10. Nice post. I was checking constantly this blog and I am impressed!

    Very useful information particularly the last part :) I
    care for such information a lot. I was looking
    for this certain info for a very long time. Thank you and best of
    luck.

    ReplyDelete
  11. Hey! I'm at work browsing your blog from my new iphone 3gs!
    Just wanted to say I love reading through your blog and look forward to all
    your posts! Carry on the outstanding work!

    ReplyDelete
  12. This is really interesting, You're a very skilled blogger.

    I have joined your rss feed and look forward to seeking more of your wonderful post.
    Also, I've shared your website in my social networks!

    ReplyDelete
  13. Wow, this post is nice, my younger sister is analyzing these things,
    therefore I am going to convey her.

    ReplyDelete
  14. Wow, fantastic blog layout! How long have you been blogging for?
    you made blogging look easy. The overall look of
    your site is magnificent, let alone the content!

    ReplyDelete
  15. Generally I do not learn article on blogs,
    however I wish to say that this write-up very compelled me to take a look at and do so!
    Your writing style has been amazed me. Thank you, quite nice article.

    ReplyDelete
  16. I am actually thankful to the holder of this site who has shared this fantastic article at at this time.

    ReplyDelete
  17. Hey! I know this is kinda off topic nevertheless
    I'd figured I'd ask. Would you be interested in trading links or maybe guest writing a blog post or vice-versa?
    My site goes over a lot of the same topics as yours and I believe we could greatly benefit from each other.
    If you happen to be interested feel free to shoot me an email.
    I look forward to hearing from you! Excellent blog by the
    way!

    ReplyDelete
  18. Hello to all, it's in fact a fastidious for me to pay
    a visit this website, it includes helpful Information.

    ReplyDelete
  19. Hello! Quick question that's totally off topic. Do
    you know how to make your site mobile friendly?
    My site looks weird when browsing from my iphone4.
    I'm trying to find a template or plugin that might
    be able to correct this problem. If you have any suggestions,
    please share. With thanks!

    ReplyDelete
  20. Yes! Finally someone writes about minecraft.

    ReplyDelete
  21. If some one desires expert view on the topic of blogging
    and site-building then i advise him/her to pay a visit
    this blog, Keep up the pleasant work.

    ReplyDelete
  22. I'm gone to convey my little brother, that he should also visit this webpage on regular basis to get
    updated from most up-to-date news.

    ReplyDelete
  23. Hmm it appears like your website ate my first comment (it was super
    long) so I guess I'll just sum it up what I submitted and say, I'm thoroughly enjoying
    your blog. I too am an aspiring blog blogger but I'm still new
    to the whole thing. Do you have any suggestions for rookie blog writers?
    I'd certainly appreciate it.

    ReplyDelete
  24. I was extremely pleased to find this website.
    I want to to thank you for your time for this
    particularly fantastic read!! I definitely savored
    every little bit of it and I have you bookmarked to see new stuff in your blog.

    ReplyDelete
  25. I love your blog.. very nice colors & theme. Did you create this website yourself or did you hire someone to
    do it for you? Plz reply as I'm looking to construct my own blog and would
    like to find out where u got this from. appreciate it

    ReplyDelete
  26. Spot on with this write-up, I actually believe this site needs much more attention. I'll probably be returning to read through more, thanks for the advice!

    ReplyDelete
  27. That is a really good tip particularly to those fresh
    to the blogosphere. Short but very accurate information… Appreciate
    your sharing this one. A must read article!

    ReplyDelete
  28. Magnificent items from you, man. I have take note
    your stuff previous to and you're just too excellent.
    I actually like what you've got right here, certainly like what you're saying and the way in which during which you
    say it. You make it entertaining and you still take care of to keep it wise.

    I can not wait to learn much more from you. This is actually a great site.

    ReplyDelete
  29. It's awesome to pay a quick visit this site and reading the views of all mates on the topic of this paragraph, while I am also eager of getting
    know-how.

    ReplyDelete
  30. Its like you read my mind! You seem to know so much about this, like you wrote the book in it or something.
    I think that you can do with some pics to drive the message home a bit, but instead of that,
    this is magnificent blog. An excellent read. I'll certainly be back.

    ReplyDelete
  31. Aw, this was an incredibly good post. Taking a few minutes and actual effort
    to create a very good article… but what can I say… I
    procrastinate a whole lot and don't manage to get anything
    done.

    ReplyDelete
  32. I every time used to study post in news papers but now as I am
    a user of web thus from now I am using net for content, thanks to web.

    ReplyDelete
  33. What i do not understood is actually how you're no
    longer actually much more well-preferred than you might be
    right now. You are so intelligent. You already know therefore significantly
    with regards to this topic, made me personally consider it from numerous numerous angles.
    Its like women and men aren't interested unless it's something
    to do with Lady gaga! Your individual stuffs nice.
    Always take care of it up!

    ReplyDelete
  34. Hey there! This post couldn't be written any better!
    Reading through this post reminds me of my old room mate!

    He always kept chatting about this. I will forward this write-up to him.
    Pretty sure he will have a good read. Thanks for sharing!

    ReplyDelete
  35. Right away I am ready to do my breakfast, once having my breakfast coming
    over again to read additional news.

    ReplyDelete
  36. You have made some decent points there. I looked on the web for more info about the issue and found most people will go along with
    your views on this web site.

    ReplyDelete
  37. hi!,I like your writing very so much! percentage we be in contact more about your article on AOL?
    I require a specialist in this space to unravel my problem.
    May be that's you! Taking a look forward to see you.

    ReplyDelete
  38. Its like you read my mind! You appear to know a lot about this,
    like you wrote the book in it or something. I think that you could do with a few pics to drive the message
    home a little bit, but instead of that, this is excellent blog.
    An excellent read. I will definitely be back.

    ReplyDelete
  39. Hi there it's me, I am also visiting this website on a regular basis, this website is in fact fastidious and the viewers are truly sharing pleasant thoughts.

    ReplyDelete
  40. I'm curious to find out what blog system you happen to be using?

    I'm having some minor security issues with my latest website and I'd
    like to find something more risk-free. Do you have any suggestions?

    ReplyDelete
  41. Greetings from Florida! I'm bored at work so I decided to check out your site on my iphone
    during lunch break. I enjoy the knowledge you present here and can't wait to
    take a look when I get home. I'm amazed at how quick your blog loaded on my phone ..
    I'm not even using WIFI, just 3G .. Anyhow, very good site!

    ReplyDelete
  42. Hello! Do you know if they make any plugins to assist with SEO?
    I'm trying to get my blog to rank for some targeted keywords but I'm not seeing very good gains.
    If you know of any please share. Many thanks!

    ReplyDelete
  43. You really make it seem so easy with your presentation but I find this topic
    to be really something which I think I would never understand.

    It seems too complex and very broad for me. I am looking forward for
    your next post, I'll try to get the hang of it!

    ReplyDelete
  44. ilmu yg berguna gan.. terima kasih semoga berhasil konssten mohon pencerahan agar situs ane dapat naik ranking
    gan

    ReplyDelete
  45. terimakasih mas… lagi ngembangi business semoga
    berhasil ya mas...

    ReplyDelete
  46. Hey! This is my first comment here so I just wanted to give a quick shout out and
    tell you I truly enjoy reading your posts.
    Can you suggest any other blogs/websites/forums that
    deal with the same topics? Thanks a lot!

    ReplyDelete
  47. Hi there, I check your new stuff regularly. Your story-telling style is
    witty, keep up the good work!

    ReplyDelete
  48. This is a topic which is near to my heart... Thank you! Where are your
    contact details though?

    ReplyDelete
  49. Do you have a spam problem on this site; I also am a blogger, and I was curious about your situation; many of us have developed some nice procedures and we are looking to swap methods with
    other folks, please shoot me an email if interested.

    ReplyDelete
  50. Good day! I know this is kinda off topic but I was wondering
    which blog platform are you using for this website? I'm getting sick and tired of Wordpress because
    I've had issues with hackers and I'm looking at alternatives for another platform.
    I would be great if you could point me in the direction of a good platform.

    ReplyDelete
  51. My spouse and I stumbled over here by a different web
    address and thought I might check things out.
    I like what I see so now i'm following you. Look forward to finding out
    about your web page repeatedly.

    ReplyDelete
  52. I am really loving the theme/design of your site.
    Do you ever run into any browser compatibility issues?

    A couple of my blog audience have complained about my site not operating correctly in Explorer but looks great in Safari.

    Do you have any ideas to help fix this issue?

    ReplyDelete