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

Many people ask me that how can we change blogger template into grid style but,i refuse to tell them how to do it.Now lot of hard work and researches i finally found this tricks.

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

How To Add Grid Style To Blogger Post

• 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.mybloggerskill.blogspot.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.mybloggerskill.blogspot.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.mybloggerskill.blogspot.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.mybloggerskill.blogspot.in 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.mybloggerskill.blogspot.in -->

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. Yiepeee Now Save your template