Add/Convert Blogger Post in Grid View

New blogger templates are coming in a new body layout like grid masonry, top notification and search bar. It looks cool when your blog bo...

New blogger templates are coming in a new body layout like grid masonry, top notification and search bar. It looks cool when your blog body change into grid view, it has many benefits than list view because in list view responsive media query not work well and they tightly shrink with your responsive screen and creates lots of stress in coding while grid view make this work easy as drinking water just you have to add float code in the CSS style sheet for responsiveness. Nowadays every one look responsive style after update of Google new algorithm Mobilegeddon and template designer also starting to create a responsive template with grid view styling because it is easy and cool.

So you can also make your new template from grid masonry and if you are using a custom list view template so don’t worry in this tutorial I will define you that how you can change your body list view style into grid view by adding some little code inside a blog HTML viewer.

Read the below steps for safe and secure code implement.

First study your template if you are using a custom theme because every template has different style so it is important to know every little thing about the template.

Then Back up your template for safety and comfort.

Go to Template>> Edit HTML>> Press CTRL+F.

Search the below code.

</head>

 Add the below code above </head>.

<!-- PRO TECHNIFY 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 = 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.protechnify.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>
<!-- PRO TECHNIFY Grid Style End -->

 Afterwards, search the below code.

<data:post.body/>

Now replace <data: post. body/> with the below code and remember, don’t replace first replace second or third if available.

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

 Click to save template and jump on the next step.

Customization

If you want to remove thumbnail effects so change ‘Yes’ to ‘No’.

If you have removed thumbnail on the homepage so change “420” with your own numbers for displaying post summary on the home page.

If you have enabled thumbnail and want to set character numbers on the home page so change “185” with your desire number.

If you wish to change the height and width of the thumbnail image so change “140” for height and “230” for width by your selected number.

Want to change the Read More text so you can change by replacing Read More with your own favorite text.

Important Article: Install Custom Google Web Fonts in Blogger Blog.

Last Words

This was the new hack which makes your work easy and comfortable as well as for web designer also, as I told you can make your post gird style into responsive by a little knowledge of code. If you need some help with more editing so freely ask am here to solve your all queries. Stay tune and be happy.