Add Masonry, Grid Layouts To Blogger Posts Amongst Css Together With Javascript

How a website's content is displayed tin spell the deviation betwixt beingness pop together with obscure. Anything that looks chaotic or hardly readable is never going to last anyone's favorite. This is why content must last displayed inwards an organized, slowly to follow together with straightforward manner. Nothing plant improve than a structured grid, inwards this case.

Posts listed inwards grid view render an first-class viewing sense for both the blogger or website possessor together with the visitors. This is specially truthful if the grid comes amongst images that would play amongst a person's visual inclination. What is neat nearly grids is the seamless together with shine layout, complemented amongst a structured yet unproblematic architecture. This makes it easier to navigate through a weblog archive or production page. The vogue besides enables a website possessor to introduce posts inwards a to a greater extent than artistic together with informative manner, without delving into the details. Suffice to tell that a grid stance demands inventiveness to last effortlessly mixed amongst functionality.

How views tin last switched depends on a position out of changes inwards a blog's codes. Some are fairly slowly to implement, piece others tin last a piddling complex. Not to worry, equally at that spot are guides that volition last provided. Grid styles besides come upward inwards huge varieties, amongst each i designed to cater to a specific audience. Now, are you lot railroad train to become on the grid?

Features

What features tin you lot await from a grid vogue post service inwards Blogger?

• All the posts volition follow the grid vogue when switching to grid view.
• While the codes are beingness customized, the posts are left untouched. Their length, however, could last changed accordingly.
• Auto Read More volition last applied on all posts.
• Thumbnails are automatically added based on the firstly moving painting establish inwards each post.
• Code is secure together with is used across the board. In fact, 99% of bloggers are using a like code to enable grid vogue posts inwards blogger.

What are the benefits of grid style?

• Quick loading fourth dimension of posts. Since exclusively the snippets are loaded inwards sure as shooting pages, or a thumbnail together with a caption, pulling upward a weblog archive would last quicker. When loading fourth dimension is decreased, user sense is greatly enhanced.
• Professional-looking blog. Without the chaos together with concerns on readability, a website tin facial expression actually build clean together with professional. Combined amongst the correct colors together with images, it tin besides locomote out a visual impact.
• Improved website ranking. Because visitors accept to click inwards fellowship to stance the residuum of the post, page views of a site volition significantly increase. This makes for a improve SEO strategy.

Although changes to the CSS codes accept to last made to implement the grid vogue stance together with arrive compatible amongst a blog's template, all the piece of employment volition last worth it i time it is upward together with running.

Important:
Before anything brand sure as shooting that you lot backup your Blogger template! If accept encounter whatever problems amongst your edits, you lot tin revert the template dorsum to its previous status yesteryear restoring it from your backup. For this, become to 'Template' inwards the left card > click on the 'Backup/Restore' push inwards the upper correct corner together with press the 'Download Full Template' push - direct where you lot desire to salve the file on your estimator together with click the 'Save' button.

Now nosotros tin safely locomote along amongst editing our Blogger template. If you lot encounter problems, merely revert dorsum to your saved template.

How to Create Masonry, Grid Style Posts inwards Blogger

Step 1. Log into your Blogger dashboard together with click on the weblog where you lot desire to apply the grid style.

Step 2. Go to "Template" located on the left side of the hide together with press the "Edit HTML" button.

Step 3. Click anywhere within the code expanse together with press the CTRL+F keys to opened upward the search box, together with then type the next tag within the box (hit Enter to notice it):

</head>

Step 4. Now re-create the script below together with glue it merely earlier the </head> tag:

<script type='text/javascript'>
posts_no_thumb_sum = 100;
posts_thumb_sum = 100;
</script>
<script type='text/javascript'>
//<![CDATA[
component subdivision 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="Add Masonry, Grid Layouts to Blogger Posts amongst CSS together with Javascript"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiX8yCpAlaiG5p0-kEHG-sIq-zdEpeNi4STmXwHr8UYB47M2LAML7ccPvSv7cyIdrrbS8P5ZNetP92j9IEOymRmQbgck4TaFpp_UJOiVdt0gEPX8tLl_o2buIux09I7DzHKMfd2IIJ6IK8l/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 5. Find the next code snippet using CTRL+F or Command + F:

<data:post.body/>

Step 6. After pressing the "Enter" primal on your keyboard, you lot may notice 3 occurrences of the higher upward code, supervene upon exclusively the minute together with the tertiary i amongst 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>

Step 7. Now direct i of the styles below, re-create the code provided together with glue it merely higher upward the </head> tag:

Simple Grid Design

<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'/>

Grid Layout amongst Post Summary together with Thumbnail

Demo

<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 enterprise #00C8BD;border-top:3px enterprise #558ABB}.posts-thumb:hover{border-top:3px enterprise #FF664E;border-bottom:3px enterprise #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/AVvXsEjLjnWJwzTMcsMVhC_AKLDB_TPAKAtCmGuQ3_gjQ660Jargz-FGLh6TkNaoX71z1Sm9_2WezU3oWyzVfi0tWQBuT-NQ-co8rdHCcbf23NOuOoRUe7tLZxbmQxb8o9N0r26CasLAIBLLKtCJ/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/AVvXsEg2MqzCj-C2zllLKkoDrpTJCCyRWyxj-TnZppohWahFyh2uQwphCC7I7SZHdAkCcOyZFKL64jf4g2U5CuD3PaDClEboF5P3ApDg8xwsdigrOAWFTrGph6LQBnmRM8o03Ua3Ly6c-5cSuxoZ/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'/>

Grid Layout amongst Text Snippet on Hover

Demo

<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'/>

Masonry Layout (Pinterest Like Grid)

DEMO

<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;position:absolute;bottom:0;left:0}.blog-feeds{display:none}.post{height:auto;width:100%;padding:0!important;margin:0 0 30px;display:inline-block;text-decoration:none}h3.post-title a{font:bold 95% &#39;Open Sans Condensed&#39;,sans-serif;text-transform:uppercase;padding:0;color:#fff;text-shadow:3px 2px 2px #222;}h3.post-title,.comments h4{margin:0!important;text-align:center;padding:10px 0;position:absolute;top:10px;width:100%;z-index:200}.post-header{display:none}.date-header{visibility:hidden;height:0!important;width:0!important;padding:0!important;margin:0!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:0;padding:0;border:none;outline:none;position:relative}.post-summary-text{cursor:pointer;background-color:rgba(44,77,163,0.8);color:#fff;font:120% &#39;Open Sans Condensed&#39;,sans-serif;padding:84px 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;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:120% &#39;Open Sans Condensed&#39;,sans-serif;right:5px;z-index:222;position:absolute;top:5px;text-shadow:1px 2px 1px #333;}a.comment-bubble:before{content:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2MqzCj-C2zllLKkoDrpTJCCyRWyxj-TnZppohWahFyh2uQwphCC7I7SZHdAkCcOyZFKL64jf4g2U5CuD3PaDClEboF5P3ApDg8xwsdigrOAWFTrGph6LQBnmRM8o03Ua3Ly6c-5cSuxoZ/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:0!important}
</style></b:if></b:if>
<link href='https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300' rel='stylesheet' type='text/css'/>

Please authorities annotation that the masonry layout mightiness non piece of employment if you lot accept a customized template, besides older posts volition appear vertically (from plough over to bottom) instead of left to right.

Step 8. Click "Preview" together with if everything looks fine, press the "Save Template" button.

That's it!

Implementing a grid vogue stance has its pros together with cons, but the benefits clearly outweigh the disadvantages. The fact that a website volition facial expression visually appealing together with professional person when laid inwards grid style, is already plenty to boost its online reputation. An increment inwards page views is merely the beginning. With the correct images together with content, a weblog volition besides accept improve SEO. Most importantly, implementing the changes is non equally complex equally merely about mightiness think. With a step-by-step guide available, adding a dynamic stance switcher would last completed inwards no time.

Share this post