How to Show Grid Style Posts in Blogger?

Blogger blog posts today to show the grid style of the most popular ways to share a great and am. Important images or template that you are blogging on such niches. I appear out of styling your grid when it looks professional. It appears from your posts and visitors to your visitors to read the full post, click on it to increase their pageviews. Also you can edit the code accross your needs. To display it in your blog post must have a picture. Posting your Blogger blog to display the grid are interested, please follow the following steps.

Features:-

1) All post is styled grid. 

2) Post editing is exclusive. 

Home, label and archive pages) Post (3) Length can be changed, but it affected all posts. 

4) Auto Read more posts, no discount will be applied. 

5) The first image in each post automatically home, label and archive pages) (to be used as a thumbnail., You can choose not to display the thumbnail. 

5) only) home, label and archive pages (piece loads. 

6) This will create professional looking blog. 

7) Visitors will click that increases your page views full post to read more. 

8) Home, label and archive pages) loading time (your page will be reduced. 

9) Perfect for better SEO. 

10) You will -The Each post is to be broken. 

11) This is the age of your blog (new) will affect all of your post. 

12) 99% of bloggers are using this code. 

13.) HTML- uses JavaScript code. 

Search 14) Quick and easy to install. 

15) Added an external file. 

16) No copyright popup or redirect code. 

17) If the post title and the picture will appear first. 

18) code is stored. 

19) to match your template with the following code to change the CSS has come.

How To Add In Your Blog:

1.) Go To Your www.blogger.com
2.) Open Your Desire Blog.
3.) Go To "Template".
4.) Click "Edit HTML".
5.) Click "CTRL+F" Inside The Template BoxTo Find </head> Code.
6.) Now Copy The Below Code And Paste It Before The Above Code.

<!-- Auto Auto Image Thumbnail & ReadMore Link By MyBloggerBuzz Start -->
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<style type='text/css'>
.date-outer .post-outer{width:46%;float:left;margin:20px 0px 0px 20px;height:490px;}
.date-outer .post-outer .post-body {font-family:Helvetica, Arial;font-size:13px;height:432px;}
.date-outer .post-header {margin:0px;}
.date-outer .post-outer h2.mbb_post_TITLE {margin:0px;font-size:24px;font-family:fantasy;font-weight:normal;}
.date-outer .post-outer h2.mbb_post_TITLE a:hover{text-decoration:underline;}
.date-outer .post-outer img.mbb_post_IMG {width:240px;height:240px;margin-bottom:4px;}
.date-outer .post-outer .mbb_post_Desc  {font-size: 12px;padding: 10px;display: block;}
.date-outer .post-outer .post-footer {text-align:left;display:block;padding:10px;font-size:11px;}
#mbb_readmore {background:#424242;color:#fff;padding:5px;text-decoration:none;margin-top:4px;display:block;width:90px;float:right;}
.post-title, .post-author, .post-timestamp, .post-icons, .post-labels, .post-location, .author-profile, .date-header, .jump-link {display:none;}
</style>
<script type='text/javascript'>
//<![CDATA[
var noImgSum = 800;
var imgSum =180;
var _0xa07b=["\x3C","\x69\x6E\x64\x65\x78\x4F\x66","\x73\x70\x6C\x69\x74","\x6C\x65\x6E\x67\x74\x68","\x3E","\x73\x75\x62\x73\x74\x72\x69\x6E\x67","","\x6A\x6F\x69\x6E","\x63\x68\x61\x72\x41\x74","\x20","\x2E\x2E\x2E","\x67\x65\x74\x45\x6C\x65\x6D\x65\x6E\x74\x42\x79\x49\x64","\x69\x6D\x67","\x67\x65\x74\x45\x6C\x65\x6D\x65\x6E\x74\x73\x42\x79\x54\x61\x67\x4E\x61\x6D\x65","\x3C\x64\x69\x76\x20\x63\x6C\x61\x73\x73\x3D\x22\x65\x78\x65\x5F\x70\x6F\x73\x74\x5F\x44\x49\x56\x22\x3E\x3C\x69\x6D\x67\x20\x63\x6C\x61\x73\x73\x3D\x22\x65\x78\x65\x5F\x70\x6F\x73\x74\x5F\x49\x4D\x47\x22\x20\x73\x72\x63\x3D\x22","\x73\x72\x63","\x22\x20\x2F\x3E","\x3C\x68\x32\x20\x63\x6C\x61\x73\x73\x3D\x22\x65\x78\x65\x5F\x70\x6F\x73\x74\x5F\x54\x49\x54\x4C\x45\x22\x3E\x3C\x61\x20\x68\x72\x65\x66\x3D\x22","\x22\x3E","\x3C\x2F\x61\x3E\x3C\x2F\x68\x32\x3E\x3C\x73\x70\x61\x6E\x20\x63\x6C\x61\x73\x73\x3D\x22\x65\x78\x65\x5F\x70\x6F\x73\x74\x5F\x44\x65\x73\x63\x22\x3E","\x69\x6E\x6E\x65\x72\x48\x54\x4D\x4C","\x3C\x2F\x73\x70\x61\x6E\x3E\x3C\x2F\x64\x69\x76\x3E"];function removeHtmlTag(_0xe2dax2,_0xe2dax3){if(_0xe2dax2[_0xa07b[1]](_0xa07b[0])!=-1){var _0xe2dax4=_0xe2dax2[_0xa07b[2]](_0xa07b[0]);for(var _0xe2dax5=0;_0xe2dax5<_0xe2dax4[_0xa07b[3]];_0xe2dax5++){if(_0xe2dax4[_0xe2dax5][_0xa07b[1]](_0xa07b[4])!=-1){_0xe2dax4[_0xe2dax5]=_0xe2dax4[_0xe2dax5][_0xa07b[5]](_0xe2dax4[_0xe2dax5][_0xa07b[1]](_0xa07b[4])+1,_0xe2dax4[_0xe2dax5][_0xa07b[3]]);} ;} ;_0xe2dax2=_0xe2dax4[_0xa07b[7]](_0xa07b[6]);} ;_0xe2dax3=(_0xe2dax3<_0xe2dax2[_0xa07b[3]]-1)?_0xe2dax3:_0xe2dax2[_0xa07b[3]]-2;while(_0xe2dax2[_0xa07b[8]](_0xe2dax3-1)!=_0xa07b[9]&&_0xe2dax2[_0xa07b[1]](_0xa07b[9],_0xe2dax3)!=-1){_0xe2dax3++;} ;_0xe2dax2=_0xe2dax2[_0xa07b[5]](0,_0xe2dax3-1);return _0xe2dax2+_0xa07b[10];} ;function MBBautoReadMore(_0xe2dax7,_0xe2dax8,_0xe2dax9){var _0xe2daxa=document[_0xa07b[11]](_0xe2dax7);var _0xe2daxb=_0xa07b[6];var _0xe2daxc=_0xe2daxa[_0xa07b[13]](_0xa07b[12]);var _0xe2daxd=noImgSum;if(_0xe2daxc[_0xa07b[3]]>=1){_0xe2daxb=_0xa07b[14]+_0xe2daxc[0][_0xa07b[15]]+_0xa07b[16];_0xe2daxd=imgSum;} ;var _0xe2daxe=_0xe2daxb+_0xa07b[17]+_0xe2dax9+_0xa07b[18]+_0xe2dax8+_0xa07b[19]+removeHtmlTag(_0xe2daxa[_0xa07b[20]],_0xe2daxd)+_0xa07b[21];_0xe2daxa[_0xa07b[20]]=_0xe2daxe;} ;
//]]&gt;
</script>
</b:if>
</b:if>
<!-- Auto Auto Image Thumbnail & ReadMore Link By MyBloggerBuzz Script End -->

7.) After That, Find This Below Code Using "CTRL+F.
<data:post.body/>
8.) You Will Find Three Of Them, Replace The Third One With The Following Code.

<!-- Auto Auto Image Thumbnail & ReadMore Link By MyBloggerBuzz Script Start -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<data:post.body/>
<b:else/>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<data:post.body/>
<b:else/>
<div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>
<script type='text/javascript'> MBBautoReadMore(&quot;summary<data:post.id/>&quot;, &quot;<data:post.title/>&quot;, &quot;<data:post.url/>&quot; );
</script>
<a expr:href='data:post.url' id='mbb_readmore'>Read More...</a>
</b:if>
</b:if>
<!-- Auto Auto Image Thumbnail & ReadMore Link By MyBloggerBuzz Script End -->

9.) Click Preview. If It Works, Then Click Save.

Customization:

1.) Change The CSS According To Your Desired.
2.) If Your Post Have No Images Then The Words On Main Pages (On Home, Labels And Archive Pages) Are 800 You Can Change It With Your Desire.
3.) If Your Post Have Images Then The Words On Main Pages (On Home, Labels And Archive Pages) Are 180 You Can Change It With Your Desire.
4.) Height Of Thumbnail Of Your Image On The Page (On Home, Labels And Archive Pages) Is 240 You Can Change It With Your Desire.(It Is Calculated In Pixels)
5.) Width Of Thumbnail Of Your Image On The Page (On Home, Labels And Archive Pages) Is 240 You Can Change It With Your Desire.(It Is Calculated In Pixels)
6.) You Can Change The Words “Read More...” With Your Desire, If You Want To Show An Image Instead Of  Text Then Change It With

<img  src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBhHmYgn3kmjUM-jnyoxtsLiuu0F4BLrpW9Vafi1Rg1YpAS5OE90WFEHmchZRHJUfjSb80NoG16he1RtyS8UKWoYS80ZYq3_0i-DOYqpRYqbVqGLm4biHk3XVgo8yyg7xVqGFs_ERkqQ/s1600/Read-More-Button.png" style="float: right; margin: 0 10px 0 5px;" title="Read The Full Awesome Article" alt="Read More"  />

Next/Prev/Home Buttons Bugs Fixed:

You have a custom template or the template blogger if you are near the end of the blog Next / Prev / home button would hide and move them to the top of the code may be a bug 's. You are seeing this problem, so here is the solution for you then do not feel Horriable.

1.) Go To Your www.blogger.com
2.) Open Your Desire Blog.
3.) Go To "Template".
4.) Click "Edit HTML".
5.) Click "CTRL+F" Inside The Template Box To Find <b:includable id='nextprev'> Code.
6.) Now Copy The Below Code And Paste It Just After The Above Code.

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

7.) Click Save template.