How to add masonry Gride post view in bloggspot blog

Embellished blog improves user experience and makes them stick around you blog, coming back the next time, due to how blog posts are arranged an beautified. The masonry widget blog post view adds more life to a blog home page with it is numerous advantages, it helps web page load quick than before, because only pics with little writing are displayed, it also helps in SEO ranking.
This time I will show you in step by step tutorial on how to setup Masonry Gride post view in your blog, the value is worth the effort used to set it up.

Features of grid style post in blogspot blog; what to expect...
1. Posts will change to grid style when switching  to grid mode or view.
2. Automatic read more will be applied on all post.

3. The first picture in the blog post will be used as Thumbnail.
4. Customization of codes leaves the post untampered, only the length can be changed accordingly.
5. Codes are improve to risk(secure) and is used across the board, about 99% of bloggers are using similar code to apply grid post view in blogspot blog.

Advantages of Gride post view in blogger...
1.Increase the load time of your blog home page, because only the post snippet are loaded in certain pages, or caption and thumbnail, might get quicker when pulling up archive, user experience is raised when loading time decreases.
2. Make blog look professional, without the chaos and concern on reading ability. It can leave a visual impact due to the colour and pictures(images)

3. Elevated or increased website ranking, because blog readers have to click in order to view the rest of the post. Page views of site will increase making a better SEO ranking.
4. Irrespective of the change in CSS code to apply the Grid style view and make it rhyme with a blog template, all the effort will give a good result once it is up and running.

Advice...
Make sure you back up your blog template! If any problem arises with your edit, you can then revert or restore the template back to it previous status by restoring the template.
How to back up a blog template.
Click on "Backup/Restore " button
Select the folder where you want to save the template in you computer hard disk, click on "save".
Now you can start editing your blog template,  click on the "Backup/Restore" button to revert the template.
Complete guide line to creating Masonry, Grid Style Posts in Blogger.
1. Login in to your blog and select the blog account you want to make these changes, for   a multiple account user.
2. Look at the left side of you blog dashboard to locate and click on template.
3. Select the Edit HTML button,  to start editing.
4. Move you mouse to the code body and single click, press CTRL+F to open a search bar.
5. Input this code </head> into the search bar. Click the enter button on your keyboard to locate the word match in the HTML code.
Now copy the below code and paste it 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/AVvXsEitrOUVsEBbgEXcScgOsGbbqGnbW5t-swFJDkFKJCdl_sGm8WHswXv8HzzQS-YntD3kDfsECj89VPAIZAfIB5OQF4v7VUkCTqUHONSPlSGOF2n2E-76IYx8BIAjlambbE2KhUr31_s4WGLt/s1600/sorry-image-not-available.png" style="margin-top: -30px;" /></a></span>';summ = posts_thumb_sum;}var summary = imgtag + '<a href="'+ pURL +'">' + removeHtmlTag(div.innerHTML,summ) + '</a>';div.innerHTML = summary;}//]]></script>

6. Now using the CTRL+F key command inputs this word&nbsp; <data:post.body/> in to the search box to locate word match.
The code might appear in 3 place, replace the second and last code, using the code below.

<b:if cond='data:blog.pageType !=&quot;static_page&quot;'><b:if cond='data:blog.pageType!= &quot;item&quot;'><data:post.body/><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>
7. Using the CTRL+F command input this code </head> into the search box and hit the "ENTER" key in your keyboard.

Different styles of masonry grid posts view. Read more below.

Style 1
Simple Grid view.


Copy the below code and paste it above the </head> tag
<b:if cond='data:blog.pageType !=&quot;static_page&quot;'><b:if cond='data:blog.pageType!=&quot;item&quot;'><style>#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: 0px !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%!important;height:190px!important;overflow:hidden;clear:both;}.post-body img {display:block;width:100%!important;height:auto!important;max-width:800px!important;max-height:400px!important;min-width:190px!important;min-height:190px!important;border:none;outline:none;position:relative;margin: 0px;padding:0;}.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: bold;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'/>

Style 2
Grid Layout with Post Summary and Thumbnail


Copy the below code and paste it above the </head> tag

<b:if cond='data:blog.pageType !=&quot;static_page&quot;'><b:if cond='data:blog.pageType!=&quot;item&quot;'><style>#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-size:75%;font-family: &#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;}.date-header {visibility:hidden;height:0!important;width:0!important;margin:0!important;padding:0!important;}.posts-thumb {width:100%!important;height:190px!important;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 {border-radius:2px;box-shadow:0 0 6px 1px rgba(0,0,0,0.1);position:relative;height:auto;}.post-body a {text-decoration: none;}.post-body img {display:block;width:100%!important;height:auto!important;max-width:800px!important;max-height:400px!important;min-width:190px!important;min-height:190px!important;border:none;outline:none;position:relative;margin: 0px;padding:0;}.post-summary-text {color:#555;background:#f5f5f5 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJXmyerX1hcwUQMX63Dft2lM3ror9VNWnlZaiMzLKl54cNA0lJptckgY1qTjfr3_zS1zOBr85eTUDsTPsl4lC0ZYksm83nBU1EUwyVmBm6jLJ48Z0q1-thc7R3xQiqY_bHrUYZi9PVr2GW/s1600/blueprint.png);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:17% 10% 6%;}a.comment-bubble {color:#fff;text-decoration:none;font-size:110%;right:10px;position:absolute;top:165px;text-shadow:1px 2px 1px #333;font-family: &#39;Pacifico&#39;, cursive;}a.comment-bubble:before {content: &quot;Comments: &quot; url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiaTtpviuUPLoIhAyBRA8d_X98LYRGGgibXN5ayHG4tpM9d7-Q7nXyFZZZ9Q9V0_xh3mWKQuTwBCCo_h40TkHgJzvldyeHreiKgKCJYsa96hd1LM1cd5mxO_eScDDs8X8rC_-XV0_4oNtaq/s1600/heart-active.png);}.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'/><link href='http://fonts.googleapis.com/css?family=Pacifico' rel='stylesheet' type='text/css'/>

Style 3
Grid Layout with Text Snippet on Hover



Copy the below code and paste it above the </head> tag
<b:if cond='data:blog.pageType !=&quot;static_page&quot;'><b:if cond='data:blog.pageType!=&quot;item&quot;'><style>#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-size:95%;font-family: &#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%!important;height:190px!important;overflow:hidden;clear:both;}.post-body {border-radius:2px;box-shadow:0 5px 4px 1px rgba(0,0,0,0.1);position:relative;overflow: hidden;}.post-body a {text-decoration: none;}.post-body img {display:block;width:100%!important;height:auto!important;max-width:800px!important;max-height:400px!important;min-width:190px!important;min-height:190px!important;border:none;outline:none;position:relative;margin: 0px;padding:0;}.post-summary-text {cursor: pointer;background-color: rgba(44, 77, 163,0.8);color:#fff;font-size:120%!important;font-family: &#39;Open Sans Condensed&#39;, 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;}a.comment-bubble {color:#fff;text-decoration:none;font-size:100%;width: 100%;text-align: center;position:absolute;top:165px;left: 0px;text-shadow:1px 2px 1px #333;font-family: &#39;Pacifico&#39;, cursive;z-index: 122;}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'/><link href='http://fonts.googleapis.com/css?family=Pacifico' rel='stylesheet' type='text/css'/>


Style 4
Masonry Layout (Pinterest Like Grid)



Copy the below code and paste it above the </head> tag

<b:if cond='data:blog.pageType !=&quot;static_page&quot;'><b:if cond='data:blog.pageType!=&quot;item&quot;'><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: &#39;Open Sans Condensed&#39;, 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;&nbsp;&nbsp;&nbsp;&nbsp; }.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: &#39;Open Sans Condensed&#39;, 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: &#39;Open Sans Condensed&#39;, sans-serif;}a.comment-bubble:before {content: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiaTtpviuUPLoIhAyBRA8d_X98LYRGGgibXN5ayHG4tpM9d7-Q7nXyFZZZ9Q9V0_xh3mWKQuTwBCCo_h40TkHgJzvldyeHreiKgKCJYsa96hd1LM1cd5mxO_eScDDs8X8rC_-XV0_4oNtaq/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'/>
Now click the "preview" button above to view your edit, if it looks fine, click "save".
Note; the masonry grid style might not work if you have a customized template, old posts will appear in full vertically(top to bottom) instead of left to right. My advice is "start with the simple template"

Use the comment box below to tell me where you are having trouble and I will help you

posted from Bloggeroid