How to Change Your Blogger Posts List to Grid View

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

Share This:

Tags:

Blogging Tips

• Prevoius
• Next