Don't Miss

How to Change Your Blogger Posts List to Grid View

By Zohaib Liaqat - 52 Comments
After sharing a large number of great and amazing widget let's come to Blogging Tips. So, friends today I'm going to share an amazing hack that will change your Blogger Posts List to Grid View. Most of the blogger template are in list style 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. This hack will only work on Homepage, Archive and Label.

Change Your Blogger Posts List to Grid View

Step 1. Log in to your Blogger Dashboard
Step 2. Select your Blog >> Template and Hit the Edit HTML Button
Step 3. Search for </head> Tag, Copy and Paste the following code just Before/Above the </head> tag.

<!-- Grid Style Hack Start By Blogolect.blogspot.com-->
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<script type='text/javascript'>
var thumbnail_mode = &quot;yes&quot; ;
summary_noimg = 400;
summary_img = 180;
img_thumb_height = 130;
img_thumb_width = 220;
</script>
<script type='text/javascript'>
//<![CDATA[

function removeHtmlTag(strx,chop){if(strx.indexOf("<")!=-1){var s=strx.split("<");for(var i=0;i<s.length;i++){if(s[i].indexOf(">")!=-1){s[i]=s[i].substring(s[i].indexOf(">")+1,s[i].length)}}strx=s.join("")}chop=(chop<strx.length-1)?chop:strx.length-2;while(strx.charAt(chop-1)!=' '&&strx.indexOf(' ',chop)!=-1)chop++;strx=strx.substring(0,chop-1);return strx+'...'}function createSummaryAndThumb(pID){var div=document.getElementById(pID);var imgtag="";var img=div.getElementsByTagName("img");var summ=summary_noimg;if(img.length>=1){imgtag='<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';summ=summary_img}var summary=imgtag+'<div>'+removeHtmlTag(div.innerHTML,summ)+'</div>';div.innerHTML=summary}
//]]>
</script>
<style type='text/css'>
.post {width:44%;height:370px;float:left;margin:10px;position:relative;display: block;}
.post h3{height:32px;margin-top:60px; margin-bottom:-15px;padding:5px;font-family: Helvetica, Arial;line-height:1em;font-weight: bold;  font-size:16px;letter-spacing:-0.5px;}
.post-body {padding:5px;height:241.5px;font-family: Helvetica, Arial; font-size: 13px; margin:20px;}
.post-footer {margin-top:20px;height:20px;}
.post-labels {display:none;}
.mobile .post {width:auto;height:auto;}
.mobile .post-body {height:auto;}
</style>
</b:if>
</b:if>
<!-- Grid Style Hack End By Blogolect.blogspot.com -->

Update:
  • summary_noimg = 400; No of characters to show for posts with images
  • summary_img = 180; No of characters to show for posts without images
  • img_thumb_height = 130; Height of the image thumbnail
  • img_thumb_width = 220; Width of the image thumbnail 
  • width:44%;height:370px; Height and width of post container (You can also use px form for width)
Step 4. Now Search for <data:post.body/> and replace it with the following code

<!-- Grid Style Hack start -->
<b:if cond='data:blog.pageType == "item"'> <data:post.body/> <b:else/> <b:if cond='data:blog.pageType == "static_page"'> <data:post.body/> <b:else/> <div expr:id='"summary" + data:post.id'><data:post.body/></div> <script type='text/javascript'> createSummaryAndThumb("summary<data:post.id/>"); </script> <a class='more' expr:href='data:post.url'>Read More...</a> </b:if> </b:if>
<!-- Grid Style Hack End --> 

Note :
>>> If You Find Your Home, Newer and Older post links missing. Don't worry, in the Edit HTML Section search for <b:includable id='nextprev'> and paste the following code Below/After it.

<div style='clear:both;'/>

Step 4. Hit the Save Template Button.
And that's it...

52 comments to ''How to Change Your Blogger Posts List to Grid View"

ADD COMMENT
  1. hi.. in blogger template there are more than one data:post.body.. should i replace all of them ?

    ReplyDelete
    Replies
    1. you need to replace the third of them

      Delete
    2. don't replace the first occurrence, replace the second or third occurrence.

      Delete
    3. This comment has been removed by a blog administrator.

      Delete
  2. Thank you verry much i have cheched this article it is possible to have 3 or 4 post by line 2 post are kind less for me.

    ReplyDelete
    Replies
    1. Hello, your code is awesome however I have hard time figuring out what happened when I apply the code to my site. Please help. www.laagbisaya.info

      Delete
  3. Can you tel me pelase how to do that?

    ReplyDelete
    Replies
    1. you've to change the width and height from the first code
      Give me your blog's URL, after making necessary changes i'll send the codes to you

      Delete
  4. Thank you verry much :http://incefikirli.blogspot.gr/

    ReplyDelete
    Replies
    1. use this code instead of the first code

      <!-- Grid Style Hack Start By Blogolect.blogspot.com-->
      <b:if cond='data:blog.pageType != "item"'>
      <b:if cond='data:blog.pageType != "static_page"'>
      <script type='text/javascript'>
      var thumbnail_mode = "yes" ;
      summary_noimg = 180;
      summary_img = 120;
      img_thumb_height = 110;
      img_thumb_width = 220;
      </script>
      <script type='text/javascript'>
      //<![CDATA[

      function removeHtmlTag(strx,chop){if(strx.indexOf("<")!=-1){var s=strx.split("<");for(var i=0;i<s.length;i++){if(s[i].indexOf(">")!=-1){s[i]=s[i].substring(s[i].indexOf(">")+1,s[i].length)}}strx=s.join("")}chop=(chop<strx.length-1)?chop:strx.length-2;while(strx.charAt(chop-1)!=' '&&strx.indexOf(' ',chop)!=-1)chop++;strx=strx.substring(0,chop-1);return strx+'...'}function createSummaryAndThumb(pID){var div=document.getElementById(pID);var imgtag="";var img=div.getElementsByTagName("img");var summ=summary_noimg;if(img.length>=1){imgtag='<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';summ=summary_img}var summary=imgtag+'<div>'+removeHtmlTag(div.innerHTML,summ)+'</div>';div.innerHTML=summary}
      //]]>
      </script>
      <style type='text/css'>
      .post {width:29%;height:380px;float:left;margin:10px;position:relative;display: block;}
      .post h3{height:32px;margin-top:60px; margin-bottom:-15px;padding:5px;font-family: Helvetica, Arial;line-height:1em;font-weight: bold; font-size:16px;letter-spacing:-0.5px;}
      .post-body {padding:5px;height:241.5px;font-family: Helvetica, Arial; font-size: 13px; margin:20px;}
      .post-footer {margin-top:20px;height:20px;}
      .post-labels {display:none;}
      .mobile .post {width:auto;height:auto;}
      .mobile .post-body {height:auto;}
      </style>
      </b:if>
      </b:if>
      <!-- Grid Style Hack End By Blogolect.blogspot.com -->

      Delete
  5. Now looks better!..thank you verry much i have to make somechanges that was verry helpfull.

    ReplyDelete
  6. Sometimes the post links doesnt work any solution ?

    ReplyDelete
  7. bro.i have grid type in my blog.plz tell how to i can change grid to list type.
    plz reply as early as possible

    ReplyDelete
    Replies
    1. It depends on your template design

      Delete
  8. hi, I have video blog. So how I get video thumb image in grid view?

    ReplyDelete
  9. Assalam alikum , bhai I also have a video blog how i get vedeo thumberland image in grid view .
    my blog adress - http://qtv-on.blogspot.in/. please help me bhai.

    ReplyDelete
  10. Hi Bro........i have used this code & its works very good for me........but I am facing 1 issue..........on top right I am getting option of " READ MORE " & ' OLDER POSTS "..........i want to this two at the end of my page.............what should I do now ?? please help me

    ReplyDelete
  11. This comment has been removed by the author.

    ReplyDelete
  12. Hii bro i have grid view and list view both in my website www.firetreat.com
    How can i change it to list view only and do you know how to remove lastest news running above posts on my blog?

    ReplyDelete
  13. sir i need to widget code for displaying recent posts by labels in grid view with maximum no of posts option, please help me

    ReplyDelete
  14. This comment has been removed by the author.

    ReplyDelete
  15. 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 single post or read more view

    (It should not be like) LINK: 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
    Want LIKE these pages/ searched labels in gridview :: www.mobilepricess.com/search/label/3G

    ReplyDelete
  16. This comment has been removed by a blog administrator.

    ReplyDelete
  17. Can you help me to add Related Post Just like your Related Post

    ReplyDelete
  18. Hi! im having a really hard time making a grid view on my blog. Could you please help me with it?

    ReplyDelete
  19. Hi Thank You for this code. How do I remove the "see older posts" link from the top right?

    ReplyDelete
  20. Another question I have, is there a way to remove the blog text and just have the title?

    ReplyDelete
  21. This comment has been removed by the author.

    ReplyDelete
  22. This comment has been removed by the author.

    ReplyDelete
  23. sir i need some help am using blogger but here is a two option in view mode when we open blog then appear automatic grid mood but list mode be available but i want to active list mode if you know plz guide me

    ReplyDelete
  24. This comment has been removed by a blog administrator.

    ReplyDelete
  25. This comment has been removed by the author.

    ReplyDelete
  26. hi please cant find data:post.body

    ReplyDelete
  27. This comment has been removed by the author.

    ReplyDelete
  28. Hi Zohaib Liaqat. Grid style is really good but I wanna make post title on the bellow of post . Could help for it

    ReplyDelete
  29. Hi, I applied the code and all looked like it was working, however there was a huge gap between one of my posts (column 1, row 2). I modified your code slightly so that the height of the post container is auto since my posts are of varying lengths. Do you know why the gap would appear?

    ReplyDelete
  30. It may be very onerous to mention once exactly ought to be pressured to cash your test.
    unitedcheckcashing.com

    ReplyDelete
  31. Hello is there anyway I coud show my categories in grid style and let my homepage as it is?

    ReplyDelete
  32. Ajrin Construction Inc. is a privately owned firm and has been providing home improvement and remolding services to clients all across the boroughs of Westchester County NY. Best Construction Company Westchester County

    ReplyDelete
  33. thanks for code , but in my mobile also its showing grid ? how to fix

    ReplyDelete
  34. send me code for this template.. when i apply this code so.. all post show in one line vertically

    ReplyDelete
  35. Sir I want my blog from grid to list view
    Grid view change to list view

    ReplyDelete