Turn Blogspot Posts To Responsive Grid Style Layout - WordPress Style

The greatest blogging experience comes in when we start twerking out default Blogspot template and making it look amazingly awesome. Today, I will be showing you how to turn your BlogSpot posts the homepage and archive page into responsive grid style layout with pure CSS and Javascript.

I first showed you how to turn the long posts showed in the homepage into short posts by either manually using the default jump break provided by blogger or making the whole process automatic by adding the Automatic read more (OgbongeBlog style).

View Demo Here

Features and Advantages of Responsive Grid Style Layout

The following are the major advantages combined with the features of this responsive layout which we will add using just CSS and Javascript.

Increase Blog Loading Speed

Add this script to your blog, increases the speed of your blog by simply shortening the post showed on homepages and archive pages.

Beautify Template 

Most bloggers go for WordPress because of its great look and design but by adding this script, you can also make your Blogspot blog look exactly like WordPress blogs in terms of appearance.

Show Thumbnail And Post Snippet

This easy to add grid style layout, allows you to show a responsive thumbnail image which will be responsive on all devices and also a posts snippet that will be an introduction to the main post or full post.

Comment Count

Increase the number of useful comments by showing the number of comments on each post on your blog on the homepage and archive.

Let's Get Started!!

How To Add Grid Style Layout To Blogger Blog

Since you have decided to make your blog look awesome and more professional by adding the grid style layout script, now you just have to follow the below steps and procedures one after the other so as to get the job done very easy.

Step 1 - Back Up Your Template

You would not want your template to get messed up in case you make any mistakes. So I will advise you to first backup your blogger template by simply following the below procedures.

Visit blogger.com >> Template >> Back up >> Download

That is all,by doing that, you have just saved a copy of your template. (Please write down the saved template name).

Step 2 - Add CSS

Follow the below procedures to add the CSS to your blog template.

Visit blogger.com >> Template >> Edit HTML

Now you should be seeing a box of codes. If you have followed most of my tutorials like how to design ogbongeblog blogger template, then this should be familiar.

Click anywhere in the HTML code box and search for '</head>' once found, paste the below code just above it.

<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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0lMrfBejkGa71mQabg91vvxcaKrX2La-jyZ-i78bIKQB8A0xNGwnxzhSE31nlKPu4DsGuMtN-bxOlrnudNWCoAxN44DIK82kxphe08p7Mk17GVdgj8-LUnnVQiUk-LdkU1hlnzOmAGEGp/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>
<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:75% &#39;Open Sans Condensed&#39;,sans-serif;text-transform:uppercase;color:#111;padding:0}h3.post-title{text-align:center;height:22px;position:absolute;bottom:23%;width:100%;z-index:101;overflow:hidden;margin:0!important;padding:10px 0 13px}.date-header{visibility:hidden;height:0!important;width:0!important;margin:0!important;padding:0!important}.posts-thumb{width:100%;height:190px;position:relative;overflow:hidden;clear:both;border-bottom:3px solid #00C8BD;border-top:3px solid #558ABB}.posts-thumb:hover{border-top:3px solid #FF664E;border-bottom:3px solid #FEBE36}.post-body{position:relative;height:auto}.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{color:#555;background:#f5f5f5 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHAX2NsXhgrhWjqcGlvT7LOQqJcOQBQ9_muKqqDEa5j8u7ddHJFqq1Tbind7tnmEDn6TR_M91Goc_OxolxcLoc7XYuf55_CICJgYjVOByKzSgNklTfFRLVc0dXTGd-eVMv3o-7pe6fSgUZ/s1600/blueprint.png);font:100% &#39;Open Sans Condensed&#39;,sans-serif;text-align:center;clear:both;overflow:hidden;margin:5px 0 0;padding:17% 10% 6%}a.comment-bubble{color:#fff;text-decoration:none;right:10px;position:absolute;top:165px;text-shadow:1px 2px 1px #333;font:110% &#39;Pacifico&#39;,cursive;}a.comment-bubble:before{content:&quot;Comments: &quot; url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUcsMFzQmxlj81_RpifwcDfH1hT1OKeJhAQtk9DyEd3gyN6jRCdlVw07Dy-46c41vsLl65rHUce9MeHY8hbURll70_jXnGX8HJ4S8i9Bc3YHkvXvlTOhyphenhyphen1VF5BZbKZdE9AvgJVt8tDG3SQ/s1600/heart-active.png);}.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'/>

Step 3 - Add JavaScript

Find the below snippet using CTRL+F or Command + F

<data:post.body/>

After pressing the "Enter" key on your keyboard, you may find two occurrences of the above code, replace only the second 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;'>
        <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>

Final Words

This code was built to make your blog look awesome and if you are looking for an already built grid style layout template, you can visit here or simply contact me. This code works well and do leave a comment below if it worked for you and also if you have any complain.

Happy Blogging 👍

Tweet