How to Create Masonry, Grid Style Posts in Blogger
Step 1. Log into your
Blogger dashboard and click on the blog where you want to apply the grid style.
Step 2. Go to "Template" located on the left side of the screen and press the "Edit HTML" button.
Step 3. Click anywhere inside the code area and press the CTRL+F keys to open the search box, then type the following tag inside the box (hit Enter to find it):
</head>
Step 4. Now copy the script below and paste 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(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/AVvXsEih3kI3D-qQtGF96mK6eFpeeIioRy3AgN_dnUfu2Pv2qE63CiiVnMi7ECAewiHEkJ2yr2kpMkBu-VMSKKapVqk3K0HeGXxoSSDyN6x9c6vvQ5B1f59SJpgliR3n7hd6WelrgrV3zZQHrBQ-/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 snippet using CTRL+F or Command + F:
<data:post.body/>
Step 6. 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 below:
<b:if cond='data:blog.pageType != "static_page"'>
<b:if cond='data:blog.pageType != "item"'>
<div expr:id='"summary" + data:post.id'>
<data:post.body/>
</div>
<script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>","<data:post.url/>");</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 == "item"'>
<data:post.body/>
</b:if>
<b:if cond='data:blog.pageType == "static_page"'>
<data:post.body/>
</b:if>
Step 7. Now copy the below code provided and paste it just above the
</head> tag:
<b:if cond='data:blog.pageType != "static_page"'>
<b:if cond='data:blog.pageType!= "item"'>
<style>
#blog-pager {
clear: both;
position: absolute;
bottom: 0px;
left: 0px;
}
.blog-feeds {
display: none;
}
.post {
height: auto;
width: 100%;
padding: 0px !important;
margin: 0px 0px 30px;
display: inline-block;
text-decoration: none;
}
h3.post-title a{
font-size: 95%;
font-family: 'Open Sans Condensed', sans-serif;
text-transform: uppercase;
padding: 0px;
color: #fff;
text-shadow: 3px 2px 2px #222;
font-weight: bold;
}
h3.post-title, .comments h4 {
margin: 0px !important;
text-align: center;
padding: 10px 0px;
position: absolute;
top: 10px;
width: 100%;
z-index: 200;
}
.post-header {
display: none;
}
.date-header {
visibility: hidden;
height: 0px !important;
width: 0px !important;
padding: 0px !important;
margin: 0px !important;
}
.posts-thumb {
width: 100%;
height: auto;
overflow: hidden;
clear: both;
}
.post-body {
overflow: hidden;
position:relative;
}
.post-body a {
text-decoration: none;
}
.post-body img {
display: block;
width: auto;
height: auto;
max-width: 100%;
max-height: none;
min-width: 100%;
min-height: auto;
margin: 0px;
padding: 0;
border: none;
outline: none;
position: relative;
}
.post-summary-text {
cursor: pointer;
background-color: rgba(44, 77, 163, 0.8);
color:#fff;
font-size:120%!important;
font-family: 'Open Sans Condensed', sans-serif;
clear:both;
overflow:hidden;
padding:25% 10% 0%;
left: 0;
position: absolute;
text-align: center;
vertical-align: bottom;
text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.1);
top: 0;
transform: scale(1);
opacity: 0;
z-index: 10;
height: 100%;
transition: all 300ms ease-out 0s;
}
.post-summary-text:hover {
opacity: 1;
}
.post-footer {
display: none;
}
a.comment-bubble {
color: #fff;
text-decoration: none;
font-size: 120%;
right: 5px;
z-index: 222;
position: absolute;
top: 5px;
text-shadow: 1px 2px 1px #333;
font-family: 'Open Sans Condensed', sans-serif;
}
a.comment-bubble:before {
content: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjY5WyO84-MJYaLqfn4pFJUYYMy7KpvVewW9EXhufDWNoxlS284dobMm_iIAxj1WWt0Uo6kMiV7Mee593BgxjAhgvk3PEg_l-aSCdji_j9sk_0qycn8EZWq8kCOgLkrp30gTP1h06yFRFY6/s1600/heart-active.png);
}
.main-inner .column-center-inner {
-moz-column-count: 3;
-moz-column-gap: 1px;
-webkit-column-count: 3;
-webkit-column-gap: 1px;
column-count: 3;
column-gap: 1px;
width: 100%;
padding: 0px !important;
}
</style></b:if></b:if>
<link href='http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300' 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 (from top to bottom) instead of left to right.
Step 8. Click "Preview" and if everything looks fine, press the "Save Template" button.
Now you are done. If you are facing any problem then you can simply ask your problem in comments.