Add Masonry Gride Layouts To Blogger Posts With CSS and Javascript

Hello and Welcome to GetWebInfo. Here on this post you will learn about how can your add Grid type of Layout in blogger posts home page style. How a website's content is displayed can spell the difference between being popular and obscure. Anything that looks chaotics or hardly readable is never going to be anyone favorite. This is why content must be displayed in an organized easy to follow and straightforward manner. nothing works better than a structured grid in this case.




Posts listed in grid view provide an excellent viewing experience for both the blogger or website owner and the visitors, this is especially true if the grid comes with images that would play with a person visual inclination. What is great about grid is the seamless and smooth layout, complemented with a structured yet wimple architecture. this makes it easier to navigate through a blog archive or product page. The style also enables a website owner to present posts in a more artistic and informative manner. Without delving into the details suffice to say that a grid view demands creativity to be effortlessly mixed with functionality.


Features of the Grid List type Home page Posts


  • All the posts will follow the grid style when switching to grid view.
  • While the codes are being customized, the posts are left untouched their length however could be changed accordingly
  • Auto read more will applied on all posts
  • Thumbnails are automatically added based on the first picture found in each post
  • Code is secure and is used across the board in face 99% of bloggers are using similar code to enable grid style posts blogger
  • Quick Loading Time of Posts since only the snippets are loaded in certain pages or a thumbnail and a caption, pulling up a blog archive would be quicker. When loading time is decreased user experience is greatly enhanced
  • Professionally looking blog. Without the chaos and concerns on readability a website can look really clean and professional. Combined with the right colors and images,. it can also leave visual impact.

How to Create Masonry Gride style Posts in Blogger

Step 01: Log in to your Blogger Account and Open Blogger Dashboard and click on the blog where you want to apply the grid style

Step 02: Go to Template located on the left side of the screen and press the Edit HTML button 

Step 03: Click any where inside the code area and press the CTRL+F keys to open the search bod 

Step 04: Then type the following tag inside the box [Hit enter to find it]

      </head>
Step 05: Now copy the script below and past it just before the </head> tag:

<script type='text/javascript'>posts_no_thumb_sum = 100;posts_thumb_sum = 100;</script><script type='text/javascript'>//<![CDATA[function removeHtmlTag(a,b){if(a.indexOf("<")!=-1){for(var c=a.split("<"),d=0;d<c.length;d++)c[d].indexOf(">")!=-1&&(c[d]=c[d].substring(c[d].indexOf(">")+1,c[d].length));a=c.join("")}for(b=b<a.length-1?b:a.length-2;" "!=a.charAt(b-1)&&a.indexOf(" ",b)!=-1;)b++;return a=a.substring(0,b-1),a+"..."}function createSummaryAndThumb(a,b,c){var d=document.getElementById(a),e="",f=d.getElementsByTagName("img"),g=posts_no_thumb_sum;f.length>=1?(e='<div class="posts-thumb" style="float:left;"><a href="'+b+'"><img src="'+f[0].src+'" /></a></div>',g=posts_thumb_sum):(e='<div class="posts-thumb" style="float:left;"><a href="'+b+'" title="'+c+'"><img src="https://2.bp.blogspot.com/-Gbn3dT1R9Yo/VPXSJ8lih_I/AAAAAAAALDQ/24wFWdfFvu4/s1600/sorry-image-not-available.png" /></a></div>',g=posts_thumb_sum);var h=e+'<div class="post-summary-text">'+removeHtmlTag(d.innerHTML,g)+"</div>";d.innerHTML=h}//]]></script>

Step 06: Find  the following code snippet using CTRL+F or command +F:

<data:post.body/>

Step 07: After pressing the Enter key on your keyboard you may find three occurrences of the above code replace only the second and the third one with this code given below


<b:if cond='data:blog.pageType != &quot;static_page&quot;'>    <b:if cond='data:blog.pageType != &quot;item&quot;'>        <div expr:id='&quot;summary&quot; + data:post.id'>            <data:post.body/>        </div>        <script type='text/javascript'>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;,&quot;<data:post.url/>&quot;);</script>        <b:if cond='data:post.allowComments'>            <a class='comment-bubble' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'>                <data:post.numComments/>            </a>        </b:if>    </b:if></b:if><b:if cond='data:blog.pageType == &quot;item&quot;'>    <data:post.body/></b:if><b:if cond='data:blog.pageType == &quot;static_page&quot;'>    <data:post.body/></b:if>
Step 08: Now choose one of the styles below copy the code provided and paste it just above the </head> tag:




<b:if cond='data:blog.pageType != &quot;static_page&quot;'><b:if cond='data:blog.pageType!= &quot;item&quot;'><style type="text/css">#blog-pager{clear:both}.post{height:auto;width:30.8%;overflow:hidden;display:inline-block;text-decoration:none;float:left;margin:0 1.1% 2%;padding:0!important}h3.post-title a{font-size:75%;font-family:&#39;Open Sans Condensed&#39;,sans-serif;text-transform:uppercase;padding:0;color:#444}h3.post-title{height:26px;text-align:center;width:100%;margin:0!important;padding-bottom:4%}.date-header{display:none}.post-body a{text-decoration:none}.posts-thumb{width:100%;height:190px;overflow:hidden;position:relative}.posts-thumb img{position:absolute;left:-100%;right:-100%;top:-100%;bottom:-100%;margin:auto;width:auto;max-width:340px;height:auto;padding:0;border:none;outline:none;}.post-summary-text{color:#777;font-size:100%!important;font-family:&#39;Open Sans Condensed&#39;,sans-serif;text-align:center;clear:both;overflow:hidden;margin:5px 0 0;padding:7% 10%}a.comment-bubble{color:#fff;text-decoration:none;font-size:100%;font-weight:700;right:10px;position:absolute;top:165px;text-shadow:1px 2px 1px #333;font-family:&#39;Open Sans Condensed&#39;,sans-serif;}a.comment-bubble:before{content:&quot;Comments: &quot;;}.post-header,.post-footer{display:none}</style></b:if></b:if><link href='http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300' rel='stylesheet' type='text/css'/>



<b:if cond='data:blog.pageType != &quot;static_page&quot;'><b:if cond='data:blog.pageType!= &quot;item&quot;'><style type="text/css">#blog-pager{clear:both}.post{height:auto;width:31%;display:inline-block;text-decoration:none;float:left;margin:0 1.1% 2%;padding:0!important;}h3.post-title a{font:95% &#39;Open Sans Condensed&#39;,sans-serif;text-transform:uppercase;color:#fff;padding:0;text-shadow:2px 2px 3px #222}h3.post-title{height:22px;text-align:center;position:absolute;top:1%;width:100%;z-index:101;overflow:hidden;margin:0!important;padding:10px 0}.date-header{visibility:hidden;height:0!important;width:0!important;margin:0!important;padding:0!important;}.posts-thumb{width:100%;height:190px;overflow:hidden;position:relative;}.post-body{position:relative;overflow:hidden}.post-body a{text-decoration:none;}.posts-thumb img{position:absolute;left:-100%;right:-100%;top:-100%;bottom:-100%;margin:auto;width:auto;max-width:340px;height:auto;padding:0;border:none;outline:none;}.post-summary-text{cursor:pointer;background-color:rgba(44,77,163,0.8);color:#fff;font:108% &#39;Open Sans Condensed&#39;,sans-serif;overflow:hidden;padding:45px 10px 0;left:0;position:absolute;text-align:center;text-shadow:1px 1px 0 rgba(0,0,0,0.1);top:0;opacity:0;height:100%;transition:all 300ms ease-out 0s;}.post-summary-text:hover{opacity:1;z-index:10;}a.comment-bubble{color:#fff;text-decoration:none;font:104% &#39;Pacifico&#39;,cursive;width:100%;text-align:center;position:absolute;top:160px;left:0;text-shadow:1px 2px 1px #333;z-index:11;}a.comment-bubble:before{content:&quot;Comments: &quot;}.post-header,.post-footer{display:none}</style></b:if></b:if><link href='https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300' rel='stylesheet' type='text/css'/><link href='https://fonts.googleapis.com/css?family=Pacifico' rel='stylesheet' type='text/css'/>


Please Note that the masonry layout might not work if you have a customized template, also older posts will appear vertically instead of left to right. 

Now at the end of this process please click on save your template button and That;s All Set