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.

 Ok Now Let Do it ..

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.

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 Like You Want :

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

Here Is Important For You ... Use It For Fix Debug

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.