How To Change Your Blogger List Post Into a Grid or Gallery View

Generally, all default blogger template are arrange in list style, while some bloggers (especially those who run a fashion blog) have been looking for a way to style their blogger template to a grid  or gallery style. I have receive couple of emails from different bloggers asking, if there is a way they can style their blogspot template into a grid style. Now here i come with a hack that can do the job perfectly well.

This hack will position your post thumbnail at the top, and align the post summary at the bottom with an automatic jump break or "read more" link, which will appear at the end of each summary after a specified number of characters. Bigs-up to Muhammad Hassan on these.
The hack will only work on homepage, archive,  label and search page (not with Google custom search.) Love that? Let's get it done then.

Turning List Style to Grid Style

• Go to your blogger dashboard
• Click on Template > Edit HTML
• Use ctrl F to find </head> and paste the following code above/before it.

<!-- Grid Style Hack For Blogger By www.RealcomBiz.com 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 = 400;
summary_img = 180;
img_thumb_height = 130;
img_thumb_width = 220;
</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 Hack For Blogger By www.RealcomBiz.com  End -->

Now search for <data:post.body/> and replace it with the following code. You may find 2-3 occurrence of this line, but don't replace the first occurrence with it.

<!-- Grid Style Hack For Blogger By www.RealcomBiz.com 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 For Blogger By www.RealcomBiz.com End -->

Customization

• If you don't want to show post image thumbnail, change "yes" to "no"
• "400" represent the number of characters to be displayed if a post has no image.
• "180" represent the number of characters to be displayed if a post has an image, but only the first image within the post structure will be use as thumbnail.
• The height of the thumbnail is "130"
• The width of the thumbnail is "220". Both the thumbnail height and width value can be adjusted to your own preferred value.
• You can change the word "Read More..."  to something more enticing like "Continue reading..." Better still, replacing the read more link with image button will be super-cool.

Note: You may find your Home, Newer, Older post link missing. Don't worry, here is a fix for it. Go to the Edit HTML section of your template, find <b:includable id='nextprev'> and paste the following code after/below it.

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

Save your template. Taaddaaaa! You are done.

Go Social:

Subscribe For Free Updates!

*Please confirm the email sent to your inbox after clicking "Sign Up!".

Follow @realcombiz