Top 10 Ultimate SEO Plugins For WordPress 2017-18


Add/Convert Blogger Post in Grid View

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 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.
 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 type='text/javascript'>
Grid Style Hack For Blogger By
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}
<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;}
<!-- PRO TECHNIFY Grid Style End -->
 Afterwards, search the below code.
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.body/></div> <script type='text/javascript'> createSummaryAndThumb("summary<>"); </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.


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.

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.


  1. How can I change the whole of the image and text box to be bigger, because it is overlapping the other posts?

    1. It's all depends on your previous list view styles, so remove your previous CSS styles and then increase your grid container size, image and text box.

  2. and how can I move the title into the middle?

    1. You can easily do this with the help of CSS styles (margin and padding).

  3. Thank you very much, it worked

  4. How can I change the number of posts to be seen on the page when i used this coding

    1. You can easily change the number of post on Homepage through Layout>> Blog Posts OR if you are using a Custom theme so set the number of Posts on previous list view script.

  5. My posts are of varying lengths so row 2 of my posts don't align to the left of the page. Instead, if post 1 in row 1 is longer, my second post in row 2 tends to create a gap on the left. Hope that makes sense. Is there a way I can fix this?

    1. If you are using a custom theme so first analyze your custom theme quite well, and increase your main or content wrapper size through CSS. It's a container sizing problem.

  6. thank you,

    some time i add image and iframe code or scripts, that time code also showing with image. how i can only show image and text, dont want show code, if i never add text then i want only show image, dont want codes

    1. Kindly add the code in a disciplined manner OR you can set the iframe code in HTML mode. And make sure that you haven't compressed it in a wrong way.

  7. Hello and thank you for your post! It really helped with my blog. Still, I have an issue and I don't know how to solve it. Unfortunately the updated code moved my „older posts” and „home” buttons in the right part of the screen between my posts and my layout gadgets. It's quite narrow and I'd like to be in the bottom as it used to be. Could you help me with this issue, please? If you want to see what's about you can have a look here:

    1. Always keep a backup before implementing any new style or third-party script, first study your whole template because different templates have different styles so it is necessary to know the structure of the template. I think the problem are you facing there is of container size try to adjust or increase the width size of main/content wrapper according to your needs.