HOW TO CHANGE BLOGGER POSTS LIST TO GRID VIEW

Many Blogger blogs are already added this feature on their blogs even if you visited any professional site then mostly website owners are liked to display their blog posts in grid view. It’s not a difficult job you can change any template posts list to grid view by following some simple and easily tips. If you running a entertainment or fashion blog then this post is help you a lot because mostly fashion blogs are already displaying their posts in grid view and if you also want to enable it then you just need to follow below simple and easy tips.

After adding this feature into your blog you can also customize it according to your needs because every blog have different layouts so below we will also mention some tips that how you can make some changes in grid style and completely customized it according to your blog layout. It will simply work on Homepage, Label and Archive pages, so if you want to add it in your blog then just follow below steps.

Display Blogger Posts in Grid View

1. Go to Blogger Dashboard>> Template>> Edit HTML.

2. Find </head> tag in your template.

3. Simply copy below coding and paste above </head> tag.

<!-- Grid Style Start-->
<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 = 420;
summary_img = 185;
img_thumb_height = 140;
img_thumb_width = 230;
</script>
<script type='text/javascript'>
//<![CDATA[
/*
Grid Style Hack For Blogger By www.realcombiz.com 
*/
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 End -->

4. Click on “Save Template” and go for below steps.

5. Again find <data:post.body/> in your template.

6. Replace <data:post.body/> with below coding.

<!-- Grid Style 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 End -->

Note:

You may find <data:post.body/> more than 2-3 times in your template so don’t replace fist occurrence  with above code.

Customization:

• Replace “yes” to “no” if you don’t want to display image thumbnail.
• If you enabled image thumbnail on homepage then replace “185” with your own for displaying post characters on homepage.
• If you disabled image thumbnail on homepage then replace “420” with your own for displaying post characters on homepage.
• Replace image thumbnail height “140” with your own.
• Replace image thumbnail width “230” with your own.
• You can also replace “Read More” with your own Text or Image.

Note:

After adding grid style coding in your template, if Homepage, New Post, Older Post links or buttons are not displayed then simply follow below steps.

1. Go to Blogger Dashboard>> Template>> Edit HTML.

2. Find <b:includable id='nextprev'> in your template.

3. Past following code below it.

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

4. Click on “Save Template” button and you’re successfully done it.