Add Masanry, Grid Layouts To Blogger Post With CSS and Javascript

How to create Masonry, Grid Style Post in Blogger
Step 1: Log into your Blogger Dashboard and click on the blog where you want to apply the gird style.
Step 2: Go to "Template" located on the left side of the screen and press the "Edit HTML" button;
Step 3: Clisk anywhere in side the code area and press the CTRL+F Keys to open the search box, then type the following tag ""
Step 4: Now copy the script below and paste it just before the "" tag:

<script type="text/javascript">
posts_no_thumb_sum = 100;
posts_thumb_sum = 100;
</script>

<script type="text/javascript">
//<![CDATA[
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, pURL, pTITLE){
var div = document.getElementById(pID);
var imgtag = "";
var img = div.getElementsByTagName("img");
var summ = posts_no_thumb_sum;
if(img.length>=1) {
imgtag = '<span class="posts-thumb" style="float:left; margin-right: 10px;"><a href="'+ pURL +'"><img src="'+img[0].src+'" /></a></span>';
summ = posts_thumb_sum;
}

else {
imgtag = '<span class="posts-thumb" style="float:left; margin-right: 10px;"><a href="'+ pURL +'" title="'+ pTITLE+'"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghFd5R4aSo18SSUW_CT8z0LjgTkqpZJ0iHyYqjgQ3w9NqE_ePcbyp5D9mOD1DLRLx6YYJ0WRzYm1-5OpBxsTo6nCDPosCVLW07L9afJlkOm4oNyUozOHsuTjLvTOzzh4l9ENiy_5WUEHiA/s1600/sorry-image-not-available.png" style="margin-top: -30px;" /></a></span>';
summ = posts_thumb_sum;
}

var summary = imgtag + '<a href="'+ pURL +'"><div class="post-summary-text">
' + removeHtmlTag(div.innerHTML,summ) + '</div>
</a>';
div.innerHTML = summary;
}
//]]>
</script>

Step 5: Find the following code snrippet using CTRL+F "<data:post .body="">"
Step 6: after pressing the "Enter" key on your keyboard, you may find three occurrences of the aboce code replace only the secod and the third one with this code below.

<b:if cond="data:blog.pageType != &quot;static_page&quot;">
<b:if cond="data:blog.pageType != &quot;item&quot;">
</b:if></b:if></data:post>
<div expr:id="&quot;summary&quot; + data:post.id">
<data:post .body="">
</data:post></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" href="https://www.blogger.com/null">
<data:post .numcomments="">
</data:post></a>
</b:if>


<b:if cond="data:blog.pageType == &quot;item&quot;">
<data:post .body="">
</data:post></b:if>
<b:if cond="data:blog.pageType == &quot;static_page&quot;">
<data:post .body="">
</data:post></b:if>