Showing posts with label javascript. Show all posts
Showing posts with label javascript. Show all posts
We already posted a few tutorials on how to add related posts widget with thumbnails in Blogger with summaries or only titles, which can be compiled into a single All-In-One Widget with powerful options. This new customizable related posts widget for Blogger integrates all the features we've seen before and more, such as thumbnails (square or round), post dates, excerpts, display only titles / thumbnails.

Now let's see what this related posts blogger widget has to offer.

related posts widget, blogger widget

Related Posts Widget Features:

  • 9 attractive styles to match your needs
  • Show Title, excerpt & thumbnails
  • Display simple related posts with titles / summaries / post date
  • Choose whether to display the post thumbnails or not
  • Ability to control the thumbnail image size
  • Option to choose square or round thumbnails
  • Show post text excerpts
  • Control the length of the post excerpt / title
  • Determine the number of related posts to display

Requirements:

  1. The related posts widget recognizes post thumbnails uploaded through Blogger itself (or Picasa Web Albums), other images from Photobucket, Flickr, or other non-Blogger hosts will not be supported.
  2. This widget is compatible with the standard desktop Blogger templates except Dynamic Views, which does not accept customization.
  3. The script does not work on private blogs, so your blog / site must be open to the public in order to show.

Adding Customizable Related Posts Widget in Blogger

Log into your Blogger dashboard, go to 'Template' and open template editor by clicking the 'Edit HTML' button below 'Live On Blog' preview.

Next, we're going to use the template search feature, be sure to follow these directions exactly:

1. Place your cursor on the template code.
2. Click once.
3. Press CTRL and F at the same time (PC) or Command and F (Mac).

The search box will open in the upper right corner of the template editor.


Type </head> in the search box, then press ENTER. This will take you to the </head> tag in your template and highlight it in yellow.

Select and copy the entire CSS style below and paste it directly ABOVE the </head> tag:
<style type='text/css'>
.related-posts-container{margin:55px 0px;}.related-posts-container h4{font:20px &#39;Open Sans&#39;, sans-serif;margin-bottom:20px;}.related-posts-container ul,.related-posts-container ul li{list-style: none;margin: 0;padding: 0;}.related-posts-container ul li a{text-transform:capitalize !important;font:bold 13px &#39;Open Sans&#39;, sans-serif;outline: 0;}.related-snippets{margin-top:5px;font:italic 12px &#39;Open Sans&#39;, sans-serif;}.related-posts-1 li{list-style:inside none disc !important;}.related-posts-1 li,.related-posts-2 li{border-top:1px solid rgba(0,0,0,0.04);padding:0.8em 0 !important;}.related-posts-1 li:first-child,.related-posts-2 li:first-child{border-top:medium none;}li.related-post-item{margin:0 3% 3% 0 !important;width:22.7%;float:left;list-style:none;position:relative;}li.related-post-item:last-child{margin:0 0 2% !important;}.related-thumb-large{width:100%;height:auto;border:none;margin:0px auto 10px;padding:0 !important;}.related-posts-8 li .related-title,.related-posts-9 li .related-title,.related-posts-9 li .related-snippets{padding-left:74px;}.related-posts-8 li:nth-child(even),.related-posts-9 li:nth-child(even){margin:0 0 4% !important;}.related-posts-8 li,.related-posts-9 li{background-color:#ffffff;box-shadow:0 0 4px rgba(180, 180, 180, 0.55);width:42% !important;float:left;margin:0 4% 4% 0 !important;padding:3% !important;}.related-thumb{float:left;height:64px;margin-right:10px;object-fit:cover;width:64px;}.related-posts-6 li,.related-posts-6 a{line-height:0 !important;}.related-posts-6 .related-thumb-large{margin-bottom:0;}.related-posts-7 li.related-post-item{margin:0 !important;width:25% !important;}.related-wrapper{position:absolute;left:0px;right:0;top:0px;bottom:0;margin:0 auto;z-index:4;background:rgba(77,77,77,0.2);}.related-wrapper-inner{position:relative;height:100%;z-index:99;width:100%;display:table;vertical-align:middle;text-align:center;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;}.related-wrapper .related-title{vertical-align:middle;display:table-cell;color:#ffffff;font:bold 16px &#39;Open Sans&#39;, sans-serif;padding:0 20px;}.related-date{margin-top:5px;font:italic 11px &#39;Open Sans&#39;, sans-serif;color:#999999;}
</style>

Next, we need to add the script  - search for the following line:
<b:includable id='postQuickEdit' var='post'>

Once you found it, click the small arrow not beside it but with one level above to expand code and scroll down until you see </b:includable> - right below this tag, you should see the line including the "postQuickEdit" id.

See the screenshot for more help:


Just ABOVE the </b:includable> tag, add the following script:
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='related-posts-container' id='related-posts-widget'/>
<div style='clear: both;'/>
<script type='text/javascript'>
var labelArray = [<b:if cond='data:post.labels'><b:loop values='data:post.labels' var='label'>&quot;<data:label.name/>&quot;<b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if></b:loop></b:if>];
var relatedSettings = {
blogURL:&quot;<data:blog.homepageUrl/>&quot;,
relatedHeading:&quot;&lt;h4&gt;&lt;span&gt;Related Posts&lt;/span&gt;&lt;/h4&gt;&quot;,
relatedPosts:4,
relatedStyle:4,
thumbnailSize:&quot;w300-h200-p-nu&quot;,
defaultThumb:&quot;https://4.bp.blogspot.com/-BLiit18tHXA/V9gCeNNCXzI/AAAAAAAALt8/SF8SUhGI1m8QuoHklq24MKiIEwKHIqwBACLcB/w300-h200-c/no-thumb.png&quot;,
roundThumbs:false,
titleLength:&quot;auto&quot;,
snippetLength:45,
centerText:false,
openNewTab:false
};</script>
<script type='text/javascript'>
//<![CDATA[
var randomRelatedIndex,startRelated;!function(a,b,c){var d={callBack:function(){}};for(var e in relatedSettings)d[e]="undefined"==relatedSettings[e]?d[e]:relatedSettings[e];var f=function(a){var d=b.createElement("script");d.type="text/javascript",d.src=a,c.appendChild(d)},g=function(a,b){return Math.floor(Math.random()*(b-a+1))+a},h=function(a){var c,d,b=a.length;if(0===b)return!1;for(;--b;)c=Math.floor(Math.random()*(b+1)),d=a[b],a[b]=a[c],a[c]=d;return a},i="object"==typeof labelArray&&labelArray.length>0?"/-/"+h(labelArray)[0]:"",j=function(a){var b=a.feed.openSearch$totalResults.$t-d.relatedPosts,c=g(1,b>0?b:1);f(d.blogURL.replace(/\/$/,"")+"/feeds/posts/summary"+i+"?alt=json-in-script&orderby=updated&start-index="+c+"&max-results="+d.relatedPosts+"&callback=startRelated")},k=function(a){var l,m,n,o,p,q,b=document.getElementById("related-posts-widget"),c=h(a.feed.entry),e=d.relatedStyle,f=d.relatedHeading+'<ul class="related-posts-'+e+'">',g=d.openNewTab?' target="_blank"':"",i=d.centerText?"text-align:center;":"",j=d.roundThumbs?"-webkit-border-radius:50%;-moz-border-radius:50%;border-radius:50%;":"",k='<span style="display:block;clear:both;"></span>';if(b){for(var r=0;r<d.relatedPosts&&r!=c.length;r++){n=c[r].title.$t,o="auto"!==d.titleLength&&d.titleLength<n.length?n.substring(0,d.titleLength)+"&hellip;":n,p="media$thumbnail"in c[r]&&d.thumbnailSize!==!1?c[r].media$thumbnail.url.replace(/\/s[0-9]+(\-c)?/,"/"+d.thumbnailSize):d.defaultThumb,l=h(c[r].published.$t);for(var s=[1,2,3,4,5,6,7,8,9,10,11,12],t=["January","February","March","April","May","June","July","August","September","October","November","December"],u=l.split("-")[2].substring(0,2),v=l.split("-")[1],w=l.split("-")[0],x=0;x<s.length;x++)if(parseInt(v)==s[x]){v=t[x];break}postdate=v+" "+u+" "+w,q="summary"in c[r]&&d.snippetLength>0?c[r].summary.$t.replace(/<br ?\/?>/g," ").replace(/<.*?>/g,"").replace(/[<>]/g,"").substring(0,d.snippetLength)+"&hellip;":"";for(var y=0,z=c[r].link.length;y<z;y++)m="alternate"==c[r].link[y].rel?c[r].link[y].href:"#";1==e?f+='<li><a href="'+m+'" '+g+">"+o+"</a></li>":2==e?f+='<li><a href="'+m+'" '+g+'><div class="related-title">'+o+'</div></a><div class="related-snippets">'+q+"</div></li>":3==e?f+='<li class="related-post-item" style="'+i+'"><a href="'+m+'" '+g+'><img alt="" class="related-thumb-large" src="'+p+'" style="'+j+'"><div class="related-title">'+o+'</div></a><div class="related-snippets">'+q+"</div></li>":4==e?f+='<li class="related-post-item" style="'+i+'"><a href="'+m+'" '+g+'><img alt="" class="related-thumb-large" src="'+p+'" style="'+j+'"><div class="related-title">'+o+'</div></a><div class="related-date">'+postdate+"</div></li>":5==e?f+='<li class="related-post-item" style="'+i+'"><a href="'+m+'" '+g+'><img alt="" class="related-thumb-large" src="'+p+'" style="'+j+'"><div class="related-title">'+o+"</div></a></li>":6==e?f+='<li class="related-post-item"><a href="'+m+'" '+g+'><img alt="" class="related-thumb-large" src="'+p+'" style="'+j+'"><div class="related-wrapper" style="'+j+'"><div class="related-wrapper-inner"><div class="related-title">'+o+"</div></div></div></a></li>":7==e?f+='<li class="related-post-item"><a href="'+m+'" '+g+'><img alt="" class="related-thumb-large" src="'+p+'" style="'+j+'"></a></li>':8==e?f+='<li class="related-post-item"><a class="related-post-item-wrapper" href="'+m+'" '+g+'><img alt="" class="related-thumb" src="'+p+'" style="'+j+'"><div class="related-title">'+o+'</div></a><div class="related-date">'+postdate+"</div></li>":9==e&&(f+='<li><a href="'+m+'" '+g+'><img alt="" class="related-thumb" src="'+p+'" style="'+j+'"><div class="related-title">'+o+'</div></a><div class="related-snippets">'+q+"</div></li>")}b.innerHTML=f+="</ul>"+k,d.callBack()}};randomRelatedIndex=j,startRelated=k,f(d.blogURL.replace(/\/$/,"")+"/feeds/posts/summary"+i+"?alt=json-in-script&orderby=updated&max-results=0&callback=randomRelatedIndex")}(window,document,document.getElementsByTagName("head")[0]);
//]]>
</script>
</b:if>

How to Customize the Related Posts Widget for Blogger?

To change the 'Related Posts' text that appears above the widget, modify the text in red:
relatedHeading: &quot;&lt;h4&gt;&lt;span&gt;Related Posts&lt;/span&gt;&lt;/h4&gt;&quot;,

To change the number of posts to display, change the '4' value from this line:
relatedPosts: 4,

Note: you may need to change the percentages in the CSS styles above in order to make posts fit the related container. Just follow the values in red and play with them until you get the best results.

To change the style of the related posts widget, modify the '4' value from:
relatedStyle: 4,

Available Related Posts Styles

  1. simple related posts widget that will show post titles only
  2. display post titles and snippets
  3. display post thumbnails, titles and snippets
  4. display related posts thumbnails, titles and post date (shows by default)
  5. display related posts thumbnails and titles
  6. post titles in front of thumbnails, instead of having them below the thumbnail
  7. display thumbnails only
  8. small thumbnail with titles on the right and date below
  9. small thumbnails with post titles and excerpts on the right

Customizing the Related Post Thumbnail Size & Style

By default, thumbnails are resized and cropped automatically to be 300px wide by 200px tall. If you want to change the width and height of the thumbnails, modify the '300' and '200' values from:
thumbnailSize: &quot;w300-h200-p-nu&quot;,
defaultThumb: &quot;https://4.bp.blogspot.com/-BLiit18tHXA/V9gCeNNCXzI/AAAAAAAALt8/SF8SUhGI1m8QuoHklq24MKiIEwKHIqwBACLcB/w300-h200-c/no-thumb.png&quot;,
Note: 'w' comes from width, 'h' comes from height. To make the thumbnails square, change the 'h' (height) value and make it equal with 'w' (width) value. A higher value will result in more high-res images.

If you want thumbnails have rounded corners, change 'false' with 'true':
roundThumbs:false,

Customizing Related Titles & Excerpts

To shorten the post title, change auto with the number of characters to show:
titleLength: &quot;auto&quot;,

To reduce or add more characters to the snippets, change the "45" value:
snippetLength: 45,

If you want to center text (title and summary), change 'false' to 'true':
centerText:false,

To open links in a new tab when visitors click on a related post, change "false" to "true":
openNewTab: false

Once you're done with the settings, click the 'Save Template' button and now you can see the related posts widget live on your Blogger blog.

Final words

That's it! With the new customizable Related Posts widget for Blogger you will be able to add unique features to the related content section of your blog. However, all of these styles look and work slightly different, so take your time, and pick your favorite.

Customizable Related Posts Widget for Blogger

We already posted a few tutorials on how to add related posts widget with thumbnails in Blogger with summaries or only titles, which can be compiled into a single All-In-One Widget with powerful options. This new customizable related posts widget for Blogger integrates all the features we've seen before and more, such as thumbnails (square or round), post dates, excerpts, display only titles / thumbnails.

Now let's see what this related posts blogger widget has to offer.

related posts widget, blogger widget

Related Posts Widget Features:

  • 9 attractive styles to match your needs
  • Show Title, excerpt & thumbnails
  • Display simple related posts with titles / summaries / post date
  • Choose whether to display the post thumbnails or not
  • Ability to control the thumbnail image size
  • Option to choose square or round thumbnails
  • Show post text excerpts
  • Control the length of the post excerpt / title
  • Determine the number of related posts to display

Requirements:

  1. The related posts widget recognizes post thumbnails uploaded through Blogger itself (or Picasa Web Albums), other images from Photobucket, Flickr, or other non-Blogger hosts will not be supported.
  2. This widget is compatible with the standard desktop Blogger templates except Dynamic Views, which does not accept customization.
  3. The script does not work on private blogs, so your blog / site must be open to the public in order to show.

Adding Customizable Related Posts Widget in Blogger

Log into your Blogger dashboard, go to 'Template' and open template editor by clicking the 'Edit HTML' button below 'Live On Blog' preview.

Next, we're going to use the template search feature, be sure to follow these directions exactly:

1. Place your cursor on the template code.
2. Click once.
3. Press CTRL and F at the same time (PC) or Command and F (Mac).

The search box will open in the upper right corner of the template editor.


Type </head> in the search box, then press ENTER. This will take you to the </head> tag in your template and highlight it in yellow.

Select and copy the entire CSS style below and paste it directly ABOVE the </head> tag:
<style type='text/css'>
.related-posts-container{margin:55px 0px;}.related-posts-container h4{font:20px &#39;Open Sans&#39;, sans-serif;margin-bottom:20px;}.related-posts-container ul,.related-posts-container ul li{list-style: none;margin: 0;padding: 0;}.related-posts-container ul li a{text-transform:capitalize !important;font:bold 13px &#39;Open Sans&#39;, sans-serif;outline: 0;}.related-snippets{margin-top:5px;font:italic 12px &#39;Open Sans&#39;, sans-serif;}.related-posts-1 li{list-style:inside none disc !important;}.related-posts-1 li,.related-posts-2 li{border-top:1px solid rgba(0,0,0,0.04);padding:0.8em 0 !important;}.related-posts-1 li:first-child,.related-posts-2 li:first-child{border-top:medium none;}li.related-post-item{margin:0 3% 3% 0 !important;width:22.7%;float:left;list-style:none;position:relative;}li.related-post-item:last-child{margin:0 0 2% !important;}.related-thumb-large{width:100%;height:auto;border:none;margin:0px auto 10px;padding:0 !important;}.related-posts-8 li .related-title,.related-posts-9 li .related-title,.related-posts-9 li .related-snippets{padding-left:74px;}.related-posts-8 li:nth-child(even),.related-posts-9 li:nth-child(even){margin:0 0 4% !important;}.related-posts-8 li,.related-posts-9 li{background-color:#ffffff;box-shadow:0 0 4px rgba(180, 180, 180, 0.55);width:42% !important;float:left;margin:0 4% 4% 0 !important;padding:3% !important;}.related-thumb{float:left;height:64px;margin-right:10px;object-fit:cover;width:64px;}.related-posts-6 li,.related-posts-6 a{line-height:0 !important;}.related-posts-6 .related-thumb-large{margin-bottom:0;}.related-posts-7 li.related-post-item{margin:0 !important;width:25% !important;}.related-wrapper{position:absolute;left:0px;right:0;top:0px;bottom:0;margin:0 auto;z-index:4;background:rgba(77,77,77,0.2);}.related-wrapper-inner{position:relative;height:100%;z-index:99;width:100%;display:table;vertical-align:middle;text-align:center;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;}.related-wrapper .related-title{vertical-align:middle;display:table-cell;color:#ffffff;font:bold 16px &#39;Open Sans&#39;, sans-serif;padding:0 20px;}.related-date{margin-top:5px;font:italic 11px &#39;Open Sans&#39;, sans-serif;color:#999999;}
</style>

Next, we need to add the script  - search for the following line:
<b:includable id='postQuickEdit' var='post'>

Once you found it, click the small arrow not beside it but with one level above to expand code and scroll down until you see </b:includable> - right below this tag, you should see the line including the "postQuickEdit" id.

See the screenshot for more help:


Just ABOVE the </b:includable> tag, add the following script:
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='related-posts-container' id='related-posts-widget'/>
<div style='clear: both;'/>
<script type='text/javascript'>
var labelArray = [<b:if cond='data:post.labels'><b:loop values='data:post.labels' var='label'>&quot;<data:label.name/>&quot;<b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if></b:loop></b:if>];
var relatedSettings = {
blogURL:&quot;<data:blog.homepageUrl/>&quot;,
relatedHeading:&quot;&lt;h4&gt;&lt;span&gt;Related Posts&lt;/span&gt;&lt;/h4&gt;&quot;,
relatedPosts:4,
relatedStyle:4,
thumbnailSize:&quot;w300-h200-p-nu&quot;,
defaultThumb:&quot;https://4.bp.blogspot.com/-BLiit18tHXA/V9gCeNNCXzI/AAAAAAAALt8/SF8SUhGI1m8QuoHklq24MKiIEwKHIqwBACLcB/w300-h200-c/no-thumb.png&quot;,
roundThumbs:false,
titleLength:&quot;auto&quot;,
snippetLength:45,
centerText:false,
openNewTab:false
};</script>
<script type='text/javascript'>
//<![CDATA[
var randomRelatedIndex,startRelated;!function(a,b,c){var d={callBack:function(){}};for(var e in relatedSettings)d[e]="undefined"==relatedSettings[e]?d[e]:relatedSettings[e];var f=function(a){var d=b.createElement("script");d.type="text/javascript",d.src=a,c.appendChild(d)},g=function(a,b){return Math.floor(Math.random()*(b-a+1))+a},h=function(a){var c,d,b=a.length;if(0===b)return!1;for(;--b;)c=Math.floor(Math.random()*(b+1)),d=a[b],a[b]=a[c],a[c]=d;return a},i="object"==typeof labelArray&&labelArray.length>0?"/-/"+h(labelArray)[0]:"",j=function(a){var b=a.feed.openSearch$totalResults.$t-d.relatedPosts,c=g(1,b>0?b:1);f(d.blogURL.replace(/\/$/,"")+"/feeds/posts/summary"+i+"?alt=json-in-script&orderby=updated&start-index="+c+"&max-results="+d.relatedPosts+"&callback=startRelated")},k=function(a){var l,m,n,o,p,q,b=document.getElementById("related-posts-widget"),c=h(a.feed.entry),e=d.relatedStyle,f=d.relatedHeading+'<ul class="related-posts-'+e+'">',g=d.openNewTab?' target="_blank"':"",i=d.centerText?"text-align:center;":"",j=d.roundThumbs?"-webkit-border-radius:50%;-moz-border-radius:50%;border-radius:50%;":"",k='<span style="display:block;clear:both;"></span>';if(b){for(var r=0;r<d.relatedPosts&&r!=c.length;r++){n=c[r].title.$t,o="auto"!==d.titleLength&&d.titleLength<n.length?n.substring(0,d.titleLength)+"&hellip;":n,p="media$thumbnail"in c[r]&&d.thumbnailSize!==!1?c[r].media$thumbnail.url.replace(/\/s[0-9]+(\-c)?/,"/"+d.thumbnailSize):d.defaultThumb,l=h(c[r].published.$t);for(var s=[1,2,3,4,5,6,7,8,9,10,11,12],t=["January","February","March","April","May","June","July","August","September","October","November","December"],u=l.split("-")[2].substring(0,2),v=l.split("-")[1],w=l.split("-")[0],x=0;x<s.length;x++)if(parseInt(v)==s[x]){v=t[x];break}postdate=v+" "+u+" "+w,q="summary"in c[r]&&d.snippetLength>0?c[r].summary.$t.replace(/<br ?\/?>/g," ").replace(/<.*?>/g,"").replace(/[<>]/g,"").substring(0,d.snippetLength)+"&hellip;":"";for(var y=0,z=c[r].link.length;y<z;y++)m="alternate"==c[r].link[y].rel?c[r].link[y].href:"#";1==e?f+='<li><a href="'+m+'" '+g+">"+o+"</a></li>":2==e?f+='<li><a href="'+m+'" '+g+'><div class="related-title">'+o+'</div></a><div class="related-snippets">'+q+"</div></li>":3==e?f+='<li class="related-post-item" style="'+i+'"><a href="'+m+'" '+g+'><img alt="" class="related-thumb-large" src="'+p+'" style="'+j+'"><div class="related-title">'+o+'</div></a><div class="related-snippets">'+q+"</div></li>":4==e?f+='<li class="related-post-item" style="'+i+'"><a href="'+m+'" '+g+'><img alt="" class="related-thumb-large" src="'+p+'" style="'+j+'"><div class="related-title">'+o+'</div></a><div class="related-date">'+postdate+"</div></li>":5==e?f+='<li class="related-post-item" style="'+i+'"><a href="'+m+'" '+g+'><img alt="" class="related-thumb-large" src="'+p+'" style="'+j+'"><div class="related-title">'+o+"</div></a></li>":6==e?f+='<li class="related-post-item"><a href="'+m+'" '+g+'><img alt="" class="related-thumb-large" src="'+p+'" style="'+j+'"><div class="related-wrapper" style="'+j+'"><div class="related-wrapper-inner"><div class="related-title">'+o+"</div></div></div></a></li>":7==e?f+='<li class="related-post-item"><a href="'+m+'" '+g+'><img alt="" class="related-thumb-large" src="'+p+'" style="'+j+'"></a></li>':8==e?f+='<li class="related-post-item"><a class="related-post-item-wrapper" href="'+m+'" '+g+'><img alt="" class="related-thumb" src="'+p+'" style="'+j+'"><div class="related-title">'+o+'</div></a><div class="related-date">'+postdate+"</div></li>":9==e&&(f+='<li><a href="'+m+'" '+g+'><img alt="" class="related-thumb" src="'+p+'" style="'+j+'"><div class="related-title">'+o+'</div></a><div class="related-snippets">'+q+"</div></li>")}b.innerHTML=f+="</ul>"+k,d.callBack()}};randomRelatedIndex=j,startRelated=k,f(d.blogURL.replace(/\/$/,"")+"/feeds/posts/summary"+i+"?alt=json-in-script&orderby=updated&max-results=0&callback=randomRelatedIndex")}(window,document,document.getElementsByTagName("head")[0]);
//]]>
</script>
</b:if>

How to Customize the Related Posts Widget for Blogger?

To change the 'Related Posts' text that appears above the widget, modify the text in red:
relatedHeading: &quot;&lt;h4&gt;&lt;span&gt;Related Posts&lt;/span&gt;&lt;/h4&gt;&quot;,

To change the number of posts to display, change the '4' value from this line:
relatedPosts: 4,

Note: you may need to change the percentages in the CSS styles above in order to make posts fit the related container. Just follow the values in red and play with them until you get the best results.

To change the style of the related posts widget, modify the '4' value from:
relatedStyle: 4,

Available Related Posts Styles

  1. simple related posts widget that will show post titles only
  2. display post titles and snippets
  3. display post thumbnails, titles and snippets
  4. display related posts thumbnails, titles and post date (shows by default)
  5. display related posts thumbnails and titles
  6. post titles in front of thumbnails, instead of having them below the thumbnail
  7. display thumbnails only
  8. small thumbnail with titles on the right and date below
  9. small thumbnails with post titles and excerpts on the right

Customizing the Related Post Thumbnail Size & Style

By default, thumbnails are resized and cropped automatically to be 300px wide by 200px tall. If you want to change the width and height of the thumbnails, modify the '300' and '200' values from:
thumbnailSize: &quot;w300-h200-p-nu&quot;,
defaultThumb: &quot;https://4.bp.blogspot.com/-BLiit18tHXA/V9gCeNNCXzI/AAAAAAAALt8/SF8SUhGI1m8QuoHklq24MKiIEwKHIqwBACLcB/w300-h200-c/no-thumb.png&quot;,
Note: 'w' comes from width, 'h' comes from height. To make the thumbnails square, change the 'h' (height) value and make it equal with 'w' (width) value. A higher value will result in more high-res images.

If you want thumbnails have rounded corners, change 'false' with 'true':
roundThumbs:false,

Customizing Related Titles & Excerpts

To shorten the post title, change auto with the number of characters to show:
titleLength: &quot;auto&quot;,

To reduce or add more characters to the snippets, change the "45" value:
snippetLength: 45,

If you want to center text (title and summary), change 'false' to 'true':
centerText:false,

To open links in a new tab when visitors click on a related post, change "false" to "true":
openNewTab: false

Once you're done with the settings, click the 'Save Template' button and now you can see the related posts widget live on your Blogger blog.

Final words

That's it! With the new customizable Related Posts widget for Blogger you will be able to add unique features to the related content section of your blog. However, all of these styles look and work slightly different, so take your time, and pick your favorite.
Let's say you're from France and have set up - just for examples sake - a blog called frenchlitgeek.blogspot.com where you share your thoughts and insights on French literature. Now, with Google's country specific redirection in Blogger, you might be redirected to frenchlitgeek.blogspot.fr when you try to access your site. The thing is, you perfectly liked the .com and didn't sign up for the .fr but you find yourself being directed there. Sure, your blog works and all but you also wonder why.
blogger country specific redirection

Why Did Google Do This?

Google has always supported the expression of views, and they stated as much on their official blog. In the post Free expression and controversial content on the web, which was published in 2007, it said "Our world would be a very boring place if we all agreed all the time. So, while people may strongly disagree with what someone says, or think that a particular newspaper is total nonsense, we recognize that each of us have the right to an opinion."

The post continued, "We also know that letting people express their views freely has real practical benefits. Allowing individuals to voice unpopular, inconvenient or controversial opinions is important. Not only might they be right (think Galileo) but debating difficult issues in the open often helps people come to better decisions".

blogspot country redirection

While the company is clearly on the side of people freely expressing their opinions, they also believe that a line has to be drawn somewhere. Then again, for a company providing services in over 100 countries around the world and each with their own national laws and cultural norms, it's surely difficult for a company like Google to decide where to draw boundaries.

However, there are cases like child pornography which is illegal in just about any country where decisions are clear cut.

For a company whose products are "specifically designed to help people create and communicate, to find and share information and opinions across the world", how does Google deal with this challenge?

One of the most challenging areas where Google deals with issues regarding free expression is in Blogger, their content generation platform. Since Google can't check what you've written before you publish, they rely on active vocal users who are diligent in alerting the proper if a post borders on offensive. Then again, that in itself is a tricky issue as well because what one person may view as offensive, another might not.

In other words, it's always a work in progress with Google.

Fast forward to January 9, 2012 when Google announced it was making changes to the Blogger platform with regards to censorship. That said change would make use of a country specific domain to the Blogger platform. Doing this would allow Google to censor and remove content specific to a certain country.

In their announcement, Google said: "Migrating to localized domains will allow us to continue promoting free expression and responsible publishing while providing greater flexibility in complying with valid removal requests pursuant to local law. By utilizing ccTLDs, content removals can be managed on a per country basis, which will limit their impact to the smallest number of readers."

The move by Google come after pressure from countries like India that are working on hunting down content on social media sites which are considered inappropriate. Also, the move followed closely on the heels of Twitter's new censorship policies.

Since Google aims to "help people create and communicate, to find and share information and opinions across the world", it would be strange to take down a post that was just banned in a certain area. In essence, with country specific redirection, a piece of content can still be accessible by the world save for the country where it was blocked.

How Would Country Specific Redirection Affect Your Site?

Of course, not all site owners greeted the country specific URL change with open arms. A few of the issues brought up in regard to the change include:

1. A reduction in social stats. These are your Facebook Likes, Google +1s and so on from your blog posts. They might be reduced because the URLs from one blog post will be different depending on where your readers are from.

2. A problem with external commenting platforms. If you use Disqus - for example - for your comments section, then you might run into trouble because blog URLs will be different even if essentially the page being accessed is just the same.

3. A slight problem with AdSense earnings. Some users have complained about seeing a dip in their earnings when their pages are served through country specific domains.

4. An issue with link juice. You want external sites to link to you and not your country specific URL. But the issue here is that you can't control how others link to your page. They might use the top level domain or they might use the country code top-level domain.

Stop Blogger from Redirecting to Country-Specific Domains

If country specific redirection affects important factors such as traffic and link juice, and you need those in order to rank well, what can you possibly do? Well, thankfully, Google has provided a way to get around this. All you have to do is add an ncr/ to the end of the URL - ncr here stands for No Country Redirect. So basically, it goes frenchlitgeek.blogspot.com/ncr/.

That solution is great but do you want your users to always have to do that every time they visit your blog? To eliminate that hassle, and for the good of your site statistics, a simple redirection script will do the trick. Here's how:

1. Log in to your Blogger account.

2. Click on Template → Edit HTML.

3. Find the <head> tag in the HTML editor by opening the search box using Ctrl + F.

blogger country redirection

4. Copy the redirection code seen below after the <head> tag.
<script type="text/javascript">
var blog = document.location.href.toLowerCase();
if (!blog.match(/\.blogspot\.com/)) {
blog = blog.replace(/\.blogspot\..*?\//, ".blogspot.com/ncr/");
window.location.replace(blog);
}
</script>

5. Click on "Save Template".

Credit: labnol.com

And that's it! Whenever someone accesses your Blogger, they'll be taken to the top level domain rather than the country specific one.

Stop Blogger from Redirecting Blogspot to Country Specific URLs

Let's say you're from France and have set up - just for examples sake - a blog called frenchlitgeek.blogspot.com where you share your thoughts and insights on French literature. Now, with Google's country specific redirection in Blogger, you might be redirected to frenchlitgeek.blogspot.fr when you try to access your site. The thing is, you perfectly liked the .com and didn't sign up for the .fr but you find yourself being directed there. Sure, your blog works and all but you also wonder why.
blogger country specific redirection

Why Did Google Do This?

Google has always supported the expression of views, and they stated as much on their official blog. In the post Free expression and controversial content on the web, which was published in 2007, it said "Our world would be a very boring place if we all agreed all the time. So, while people may strongly disagree with what someone says, or think that a particular newspaper is total nonsense, we recognize that each of us have the right to an opinion."

The post continued, "We also know that letting people express their views freely has real practical benefits. Allowing individuals to voice unpopular, inconvenient or controversial opinions is important. Not only might they be right (think Galileo) but debating difficult issues in the open often helps people come to better decisions".

blogspot country redirection

While the company is clearly on the side of people freely expressing their opinions, they also believe that a line has to be drawn somewhere. Then again, for a company providing services in over 100 countries around the world and each with their own national laws and cultural norms, it's surely difficult for a company like Google to decide where to draw boundaries.

However, there are cases like child pornography which is illegal in just about any country where decisions are clear cut.

For a company whose products are "specifically designed to help people create and communicate, to find and share information and opinions across the world", how does Google deal with this challenge?

One of the most challenging areas where Google deals with issues regarding free expression is in Blogger, their content generation platform. Since Google can't check what you've written before you publish, they rely on active vocal users who are diligent in alerting the proper if a post borders on offensive. Then again, that in itself is a tricky issue as well because what one person may view as offensive, another might not.

In other words, it's always a work in progress with Google.

Fast forward to January 9, 2012 when Google announced it was making changes to the Blogger platform with regards to censorship. That said change would make use of a country specific domain to the Blogger platform. Doing this would allow Google to censor and remove content specific to a certain country.

In their announcement, Google said: "Migrating to localized domains will allow us to continue promoting free expression and responsible publishing while providing greater flexibility in complying with valid removal requests pursuant to local law. By utilizing ccTLDs, content removals can be managed on a per country basis, which will limit their impact to the smallest number of readers."

The move by Google come after pressure from countries like India that are working on hunting down content on social media sites which are considered inappropriate. Also, the move followed closely on the heels of Twitter's new censorship policies.

Since Google aims to "help people create and communicate, to find and share information and opinions across the world", it would be strange to take down a post that was just banned in a certain area. In essence, with country specific redirection, a piece of content can still be accessible by the world save for the country where it was blocked.

How Would Country Specific Redirection Affect Your Site?

Of course, not all site owners greeted the country specific URL change with open arms. A few of the issues brought up in regard to the change include:

1. A reduction in social stats. These are your Facebook Likes, Google +1s and so on from your blog posts. They might be reduced because the URLs from one blog post will be different depending on where your readers are from.

2. A problem with external commenting platforms. If you use Disqus - for example - for your comments section, then you might run into trouble because blog URLs will be different even if essentially the page being accessed is just the same.

3. A slight problem with AdSense earnings. Some users have complained about seeing a dip in their earnings when their pages are served through country specific domains.

4. An issue with link juice. You want external sites to link to you and not your country specific URL. But the issue here is that you can't control how others link to your page. They might use the top level domain or they might use the country code top-level domain.

Stop Blogger from Redirecting to Country-Specific Domains

If country specific redirection affects important factors such as traffic and link juice, and you need those in order to rank well, what can you possibly do? Well, thankfully, Google has provided a way to get around this. All you have to do is add an ncr/ to the end of the URL - ncr here stands for No Country Redirect. So basically, it goes frenchlitgeek.blogspot.com/ncr/.

That solution is great but do you want your users to always have to do that every time they visit your blog? To eliminate that hassle, and for the good of your site statistics, a simple redirection script will do the trick. Here's how:

1. Log in to your Blogger account.

2. Click on Template → Edit HTML.

3. Find the <head> tag in the HTML editor by opening the search box using Ctrl + F.

blogger country redirection

4. Copy the redirection code seen below after the <head> tag.
<script type="text/javascript">
var blog = document.location.href.toLowerCase();
if (!blog.match(/\.blogspot\.com/)) {
blog = blog.replace(/\.blogspot\..*?\//, ".blogspot.com/ncr/");
window.location.replace(blog);
}
</script>

5. Click on "Save Template".

Credit: labnol.com

And that's it! Whenever someone accesses your Blogger, they'll be taken to the top level domain rather than the country specific one.
A list of posts in grid or list view provides a more defined canvas with which a blogger or website owner can use as a guide in creating content. This concept has extended to visitors, where they can have control on whether or not they wish to display posts in list or grid view. While custom modification codes are shared by some blogging sites, others are not. Some that are shared, however, can be complex even to bloggers themselves, such as JQuery.

The good news is there are lightweight codes available, including the Auto Read More in Blogger. Through it, a blogger can add two buttons that will enable visitors to switch between grid view and list view, depending on what they prefer. These buttons, however, are only visible on limited pages - homepage, label page and archive page. Nonetheless, it is better than not having this particular feature at all.

Unlike JQuery, the Auto Read More uses HTML, CSS and JavaScript. To view posts in a list view, two sets of CSS codes are added as one. Another set is added to view posts in grid view. Other combination of codes is used to enable easy switch between views, particularly at a click of a button.



How to Add a List/Grid View Switcher in Blogger

Step 1. Log into your Blogger dashboard and select your blog, then go to "Template" > press the "Edit HTML" button.

Step 2. Click anywhere inside the code area and press the CTRL + F keys to open the search box. Type this tag below inside the box and hit Enter to find it:
</head>
Step 3. Just above the </head> tag, copy and paste the following CSS style and scripts:
<script type='text/javascript'>
function list_view(){
if(document.getElementsByClassName(&quot;post&quot;)) {elementArray = document.getElementsByClassName(&quot;post&quot;); while (elementArray.length) {elementArray[0].className = &quot;post-grid-view&quot;;}}
if(document.getElementsByClassName(&quot;post-title&quot;)) {elementArray = document.getElementsByClassName(&quot;post-title&quot;); while (elementArray.length) {elementArray[0].className = &quot;post-title-grid&quot;;}}
}
function grid_view(){
if(document.getElementsByClassName(&quot;post-grid-view&quot;)) {elementArray = document.getElementsByClassName(&quot;post-grid-view&quot;); while (elementArray.length) {elementArray[0].className = &quot;post&quot;;}}
if(document.getElementsByClassName(&quot;post-title-grid&quot;)) {elementArray = document.getElementsByClassName(&quot;post-title-grid&quot;); while (elementArray.length) {elementArray[0].className = &quot;post-title&quot;;}}
}
</script>
 <script type='text/javascript'>
posts_no_thumb_sum = 100;
posts_thumb_sum = 350;
</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="http://2.bp.blogspot.com/-Gbn3dT1R9Yo/VPXSJ8lih_I/AAAAAAAALDQ/24wFWdfFvu4/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>

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:blog.pageType!= &quot;item&quot;'>
<style>
#list-view-button {font-family: Verdana; text-align:left;cursor:pointer;font-size: 14px;border-bottom: 5px solid #eaeaea;text-decoration: none;}
#list-view-button a{text-decoration: none; color: #666;}
.grid-view-button {background-color:#efefef;color:#666;padding:5px 10px;border-radius: 5px;font-size: 12px;}
.list-view-button {background-color:#efefef;color:#000;padding:5px 10px;border-radius: 5px;font-size: 12px;}
.post-grid-view {width:100%;height:250px;overflow: hidden;float:left;margin:0px 0px 20px !important;position:relative;display: block; -webkit-transition:all 0.5s ease 0s; -moz-transition:all 0.5s ease 0s; -o-transition:all 0.5s ease 0s; transition:all 0.5s ease 0s; }
.post-grid-view .posts-thumb {width:40% !important;height:250px !important;float:left;margin:0px;position:relative;border-top: 0px solid transparent !important;overflow: hidden;}
.post-grid-view .post-header {display: none;}
.post-grid-view .post-body img {min-width: 300px !important; min-height: 250px !important;display:block;width:100%!important;height:auto!important;max-width:800px!important;max-height:400px!important;border:none;outline:none;position:relative;margin: 0px;padding:0;}
.post-grid-view .post-summary-text {opacity: 1; background: none; width: 58%;font-size: 120% !important;clear: none !important; display: inline-block !important; padding: 80px 0px !important; color: #666 !important; text-shadow: none !important; float: right !important; text-align: left; position: relative !important; font-family: &#39;Open Sans Condensed&#39;, sans-serif;}
.post-grid-view .post-body {height: 250px;background:#f5f5f5; box-shadow: none !important;}
.post-title-grid a { font-size:170%;color: #777;font-family: &#39;Open Sans Condensed&#39;, sans-serif;}
.post-title-grid { position: absolute; left: 42%; top: 5%; z-index: 1;}
.post-grid-view .post-footer {left: 41%; display:block;position: absolute; bottom: 2%;font-size: 120%; background: transparent !important; border: 0px solid transparent !important;font-family: &#39;Open Sans Condensed&#39;, sans-serif;}
.post-grid-view .post-footer a{color: #128EC9;}
.post-grid-view a.comment-bubble {display: none;}
.main-inner .column-center-inner .section {margin: 0px !important;}
.post { -webkit-transition:all 0.5s ease 0s; -moz-transition:all 0.5s ease 0s; -o-transition:all 0.5s ease 0s; transition:all 0.5s ease 0s;}

#blog-pager {clear:both;}
.post {height:auto;width:32.2%;display:inline-block;text-decoration:none;float:left;margin:0 1% 1% 0%;overflow: hidden;padding:0!important;}
.date-header {display: none;}
h3.post-title a {font-size:90%;font-family: &#39;Open Sans Condensed&#39;, sans-serif;text-transform:uppercase;color:#fff;text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.1);font-weight: bold;}
h3.post-title {text-align: center; position:absolute;top:0;width:100%;overflow:hidden;margin:0px !important;padding-top: 30%; background-color: rgba(50, 126, 213, 0.8);transform: scale(1);opacity: 0;z-index: 10;height: 100%;transition: all 300ms ease-out 0s;}
h3.post-title:hover {opacity: 1;}
.posts-thumb {width:100%!important;height:200px!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:200px!important;min-height:200px!important;border:none;outline:none;position:relative;margin: 0px;padding:0;}
.post-summary-text {display: none;}
a.comment-bubble {color:#fff;text-decoration:none;font-size:100%;width: 100%;text-align: center;position:absolute;top:175px;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; url(http://4.bp.blogspot.com/-t1i_svebif4/VPMpZqPrKzI/AAAAAAAALAg/TRJ2Un238Gs/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'/>

Step 4. Next, search for the following line:
<b:section class='main' id='main' name='Main' showaddelement='no'>
...in case you can't find it, search for this one instead:
<b:section class='main' id='main' name='Main' showaddelement='yes'>
Step 5. Just above this line, add the following code:
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:blog.pageType!= &quot;item&quot;'>
<div id='list-view-button'><a class='grid-view-button' onclick='grid_view()'><img src='http://1.bp.blogspot.com/-vjVOXJyXcC4/VP9A7twG8mI/AAAAAAAALJ8/YW0yxhvxP7A/s1600/search-grid-icon.png' style='margin: -8px 1px -3px -6px;width: 16px;'/> Grid View</a> <a class='list-view-button' onclick='list_view()'><img src='http://4.bp.blogspot.com/-SrQiXEhgVmA/VP9BUnr3KkI/AAAAAAAALKE/EwVFym9YxoA/s1600/icon-list-view.png' style='margin: -8px 1px -3px -6px;width: 16px;'/> List View</a></div>
</b:if></b:if>
Step 6. Now, search the tag below:
<data:post.body/>
Step 7. You will find 3 occurrences of this code... replace only the second and third one with this one 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>

Important: if you already added the auto read more script, remove the previous one in order to make this work.

Step 8. Finally, click "Preview" to see if everything looks good and press the 'Save Template' button to save the changes...

That's it!

Adding a dynamic view switcher on a blog will make viewing content a lot easier for visitors. Whether using a list or grid view, a more compressed list of posts will eliminate the need to click on the next page, which could take time if loading takes a while to complete. For a blog archive, using the Auto Read More codes in Blogger will surely make everyone's viewing experience very convenient.

Considering the ease with which the codes can be customized, building a list/grid view switcher would be completed in no time. A real bonus is that Auto Read More works on all platforms, with cross-browser support as well.

Building a List/Grid View Switcher in Blogger with Auto Read More

A list of posts in grid or list view provides a more defined canvas with which a blogger or website owner can use as a guide in creating content. This concept has extended to visitors, where they can have control on whether or not they wish to display posts in list or grid view. While custom modification codes are shared by some blogging sites, others are not. Some that are shared, however, can be complex even to bloggers themselves, such as JQuery.

The good news is there are lightweight codes available, including the Auto Read More in Blogger. Through it, a blogger can add two buttons that will enable visitors to switch between grid view and list view, depending on what they prefer. These buttons, however, are only visible on limited pages - homepage, label page and archive page. Nonetheless, it is better than not having this particular feature at all.

Unlike JQuery, the Auto Read More uses HTML, CSS and JavaScript. To view posts in a list view, two sets of CSS codes are added as one. Another set is added to view posts in grid view. Other combination of codes is used to enable easy switch between views, particularly at a click of a button.



How to Add a List/Grid View Switcher in Blogger

Step 1. Log into your Blogger dashboard and select your blog, then go to "Template" > press the "Edit HTML" button.

Step 2. Click anywhere inside the code area and press the CTRL + F keys to open the search box. Type this tag below inside the box and hit Enter to find it:
</head>
Step 3. Just above the </head> tag, copy and paste the following CSS style and scripts:
<script type='text/javascript'>
function list_view(){
if(document.getElementsByClassName(&quot;post&quot;)) {elementArray = document.getElementsByClassName(&quot;post&quot;); while (elementArray.length) {elementArray[0].className = &quot;post-grid-view&quot;;}}
if(document.getElementsByClassName(&quot;post-title&quot;)) {elementArray = document.getElementsByClassName(&quot;post-title&quot;); while (elementArray.length) {elementArray[0].className = &quot;post-title-grid&quot;;}}
}
function grid_view(){
if(document.getElementsByClassName(&quot;post-grid-view&quot;)) {elementArray = document.getElementsByClassName(&quot;post-grid-view&quot;); while (elementArray.length) {elementArray[0].className = &quot;post&quot;;}}
if(document.getElementsByClassName(&quot;post-title-grid&quot;)) {elementArray = document.getElementsByClassName(&quot;post-title-grid&quot;); while (elementArray.length) {elementArray[0].className = &quot;post-title&quot;;}}
}
</script>
 <script type='text/javascript'>
posts_no_thumb_sum = 100;
posts_thumb_sum = 350;
</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="http://2.bp.blogspot.com/-Gbn3dT1R9Yo/VPXSJ8lih_I/AAAAAAAALDQ/24wFWdfFvu4/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>

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:blog.pageType!= &quot;item&quot;'>
<style>
#list-view-button {font-family: Verdana; text-align:left;cursor:pointer;font-size: 14px;border-bottom: 5px solid #eaeaea;text-decoration: none;}
#list-view-button a{text-decoration: none; color: #666;}
.grid-view-button {background-color:#efefef;color:#666;padding:5px 10px;border-radius: 5px;font-size: 12px;}
.list-view-button {background-color:#efefef;color:#000;padding:5px 10px;border-radius: 5px;font-size: 12px;}
.post-grid-view {width:100%;height:250px;overflow: hidden;float:left;margin:0px 0px 20px !important;position:relative;display: block; -webkit-transition:all 0.5s ease 0s; -moz-transition:all 0.5s ease 0s; -o-transition:all 0.5s ease 0s; transition:all 0.5s ease 0s; }
.post-grid-view .posts-thumb {width:40% !important;height:250px !important;float:left;margin:0px;position:relative;border-top: 0px solid transparent !important;overflow: hidden;}
.post-grid-view .post-header {display: none;}
.post-grid-view .post-body img {min-width: 300px !important; min-height: 250px !important;display:block;width:100%!important;height:auto!important;max-width:800px!important;max-height:400px!important;border:none;outline:none;position:relative;margin: 0px;padding:0;}
.post-grid-view .post-summary-text {opacity: 1; background: none; width: 58%;font-size: 120% !important;clear: none !important; display: inline-block !important; padding: 80px 0px !important; color: #666 !important; text-shadow: none !important; float: right !important; text-align: left; position: relative !important; font-family: &#39;Open Sans Condensed&#39;, sans-serif;}
.post-grid-view .post-body {height: 250px;background:#f5f5f5; box-shadow: none !important;}
.post-title-grid a { font-size:170%;color: #777;font-family: &#39;Open Sans Condensed&#39;, sans-serif;}
.post-title-grid { position: absolute; left: 42%; top: 5%; z-index: 1;}
.post-grid-view .post-footer {left: 41%; display:block;position: absolute; bottom: 2%;font-size: 120%; background: transparent !important; border: 0px solid transparent !important;font-family: &#39;Open Sans Condensed&#39;, sans-serif;}
.post-grid-view .post-footer a{color: #128EC9;}
.post-grid-view a.comment-bubble {display: none;}
.main-inner .column-center-inner .section {margin: 0px !important;}
.post { -webkit-transition:all 0.5s ease 0s; -moz-transition:all 0.5s ease 0s; -o-transition:all 0.5s ease 0s; transition:all 0.5s ease 0s;}

#blog-pager {clear:both;}
.post {height:auto;width:32.2%;display:inline-block;text-decoration:none;float:left;margin:0 1% 1% 0%;overflow: hidden;padding:0!important;}
.date-header {display: none;}
h3.post-title a {font-size:90%;font-family: &#39;Open Sans Condensed&#39;, sans-serif;text-transform:uppercase;color:#fff;text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.1);font-weight: bold;}
h3.post-title {text-align: center; position:absolute;top:0;width:100%;overflow:hidden;margin:0px !important;padding-top: 30%; background-color: rgba(50, 126, 213, 0.8);transform: scale(1);opacity: 0;z-index: 10;height: 100%;transition: all 300ms ease-out 0s;}
h3.post-title:hover {opacity: 1;}
.posts-thumb {width:100%!important;height:200px!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:200px!important;min-height:200px!important;border:none;outline:none;position:relative;margin: 0px;padding:0;}
.post-summary-text {display: none;}
a.comment-bubble {color:#fff;text-decoration:none;font-size:100%;width: 100%;text-align: center;position:absolute;top:175px;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; url(http://4.bp.blogspot.com/-t1i_svebif4/VPMpZqPrKzI/AAAAAAAALAg/TRJ2Un238Gs/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'/>

Step 4. Next, search for the following line:
<b:section class='main' id='main' name='Main' showaddelement='no'>
...in case you can't find it, search for this one instead:
<b:section class='main' id='main' name='Main' showaddelement='yes'>
Step 5. Just above this line, add the following code:
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:blog.pageType!= &quot;item&quot;'>
<div id='list-view-button'><a class='grid-view-button' onclick='grid_view()'><img src='http://1.bp.blogspot.com/-vjVOXJyXcC4/VP9A7twG8mI/AAAAAAAALJ8/YW0yxhvxP7A/s1600/search-grid-icon.png' style='margin: -8px 1px -3px -6px;width: 16px;'/> Grid View</a> <a class='list-view-button' onclick='list_view()'><img src='http://4.bp.blogspot.com/-SrQiXEhgVmA/VP9BUnr3KkI/AAAAAAAALKE/EwVFym9YxoA/s1600/icon-list-view.png' style='margin: -8px 1px -3px -6px;width: 16px;'/> List View</a></div>
</b:if></b:if>
Step 6. Now, search the tag below:
<data:post.body/>
Step 7. You will find 3 occurrences of this code... replace only the second and third one with this one 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>

Important: if you already added the auto read more script, remove the previous one in order to make this work.

Step 8. Finally, click "Preview" to see if everything looks good and press the 'Save Template' button to save the changes...

That's it!

Adding a dynamic view switcher on a blog will make viewing content a lot easier for visitors. Whether using a list or grid view, a more compressed list of posts will eliminate the need to click on the next page, which could take time if loading takes a while to complete. For a blog archive, using the Auto Read More codes in Blogger will surely make everyone's viewing experience very convenient.

Considering the ease with which the codes can be customized, building a list/grid view switcher would be completed in no time. A real bonus is that Auto Read More works on all platforms, with cross-browser support as well.
How a website's content is displayed can spell the difference between being popular and obscure. Anything that looks chaotic or hardly readable is never going to be anyone's favorite. This is why content must be displayed in an organized, easy to follow and straightforward manner. Nothing works better than a structured grid, in this case.

Posts listed in grid view provide an excellent viewing experience for both the blogger or website owner and the visitors. This is especially true if the grid comes with images that would play with a person's visual inclination. What is great about grids is the seamless and smooth layout, complemented with a structured yet simple architecture. This makes it easier to navigate through a blog archive or product page. The style also enables a website owner to present posts in a more artistic and informative manner, without delving into the details. Suffice to say that a grid view demands creativity to be effortlessly mixed with functionality.

How views can be switched depends on a number of changes in a blog's codes. Some are fairly easy to implement, while others can be a little complex. Not to worry, as there are guides that will be provided. Grid styles also come in huge varieties, with each one designed to cater to a specific audience. Now, are you ready to go on the grid?

Features

What features can you expect from a grid style post in Blogger?

  • All the posts will follow the grid style when switching to grid view.
  • While the codes are being customized, the posts are left untouched. Their length, however, could be changed accordingly.
  • Auto Read More will be applied on all posts.
  • Thumbnails are automatically added based on the first picture found in each post.
  • Code is secure and is used across the board. In fact, 99% of bloggers are using a similar code to enable grid style posts in blogger.

What are the benefits of grid style?

  • Quick loading time of posts. Since only the snippets are loaded in certain pages, or a thumbnail and a caption, pulling up a blog archive would be quicker. When loading time is decreased, user experience is greatly enhanced.
  • Professional-looking blog. Without the chaos and concerns on readability, a website can look really clean and professional. Combined with the right colors and images, it can also leave a visual impact.
  • Improved website ranking. Because visitors have to click in order to view the rest of the post, page views of a site will significantly increase. This makes for a better SEO strategy.
Although changes to the CSS codes have to be made to implement the grid style view and make it compatible with a blog's template, all the work will be worth it once it is up and running.

Important:
Before anything make sure that you backup your Blogger template! If have encounter any problems with your edits, you can revert the template back to its previous condition by restoring it from your backup. For this, go to 'Template' in the left menu > click on the 'Backup/Restore' button in the upper right corner and press the 'Download Full Template' button - choose where you want to save the file on your computer and click the 'Save' button.

Now we can safely proceed with editing our Blogger template. If you run into problems, just revert back to your saved template.

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(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://2.bp.blogspot.com/-Gbn3dT1R9Yo/VPXSJ8lih_I/AAAAAAAALDQ/24wFWdfFvu4/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 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 != &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 choose one of the styles below, copy the code provided and paste it just above 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 with Post Summary and Thumbnail

grid layout for blogger


<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://1.bp.blogspot.com/-rh-PYvqjzSs/VPTARkPOSVI/AAAAAAAALC4/GyFFEnl2TO8/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://4.bp.blogspot.com/-t1i_svebif4/VPMpZqPrKzI/AAAAAAAALAg/TRJ2Un238Gs/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 with Text Snippet on Hover

blogger posts


<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)

masonry layout for blogger


<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://4.bp.blogspot.com/-t1i_svebif4/VPMpZqPrKzI/AAAAAAAALAg/TRJ2Un238Gs/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 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.

That's it!
Implementing a grid style view has its pros and cons, but the benefits clearly outweigh the disadvantages. The fact that a website will look visually appealing and professional when set in grid style, is already enough to boost its online reputation. An increase in page views is just the beginning. With the right images and content, a blog will also have better SEO. Most importantly, implementing the changes is not as complex as some might think. With a step-by-step guide available, adding a dynamic view switcher would be completed in no time.

Add Masonry, Grid Layouts to Blogger Posts with CSS and Javascript

How a website's content is displayed can spell the difference between being popular and obscure. Anything that looks chaotic or hardly readable is never going to be anyone's favorite. This is why content must be displayed in an organized, easy to follow and straightforward manner. Nothing works better than a structured grid, in this case.

Posts listed in grid view provide an excellent viewing experience for both the blogger or website owner and the visitors. This is especially true if the grid comes with images that would play with a person's visual inclination. What is great about grids is the seamless and smooth layout, complemented with a structured yet simple architecture. This makes it easier to navigate through a blog archive or product page. The style also enables a website owner to present posts in a more artistic and informative manner, without delving into the details. Suffice to say that a grid view demands creativity to be effortlessly mixed with functionality.

How views can be switched depends on a number of changes in a blog's codes. Some are fairly easy to implement, while others can be a little complex. Not to worry, as there are guides that will be provided. Grid styles also come in huge varieties, with each one designed to cater to a specific audience. Now, are you ready to go on the grid?

Features

What features can you expect from a grid style post in Blogger?

  • All the posts will follow the grid style when switching to grid view.
  • While the codes are being customized, the posts are left untouched. Their length, however, could be changed accordingly.
  • Auto Read More will be applied on all posts.
  • Thumbnails are automatically added based on the first picture found in each post.
  • Code is secure and is used across the board. In fact, 99% of bloggers are using a similar code to enable grid style posts in blogger.

What are the benefits of grid style?

  • Quick loading time of posts. Since only the snippets are loaded in certain pages, or a thumbnail and a caption, pulling up a blog archive would be quicker. When loading time is decreased, user experience is greatly enhanced.
  • Professional-looking blog. Without the chaos and concerns on readability, a website can look really clean and professional. Combined with the right colors and images, it can also leave a visual impact.
  • Improved website ranking. Because visitors have to click in order to view the rest of the post, page views of a site will significantly increase. This makes for a better SEO strategy.
Although changes to the CSS codes have to be made to implement the grid style view and make it compatible with a blog's template, all the work will be worth it once it is up and running.

Important:
Before anything make sure that you backup your Blogger template! If have encounter any problems with your edits, you can revert the template back to its previous condition by restoring it from your backup. For this, go to 'Template' in the left menu > click on the 'Backup/Restore' button in the upper right corner and press the 'Download Full Template' button - choose where you want to save the file on your computer and click the 'Save' button.

Now we can safely proceed with editing our Blogger template. If you run into problems, just revert back to your saved template.

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(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://2.bp.blogspot.com/-Gbn3dT1R9Yo/VPXSJ8lih_I/AAAAAAAALDQ/24wFWdfFvu4/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 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 != &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 choose one of the styles below, copy the code provided and paste it just above 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 with Post Summary and Thumbnail

grid layout for blogger


<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://1.bp.blogspot.com/-rh-PYvqjzSs/VPTARkPOSVI/AAAAAAAALC4/GyFFEnl2TO8/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://4.bp.blogspot.com/-t1i_svebif4/VPMpZqPrKzI/AAAAAAAALAg/TRJ2Un238Gs/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 with Text Snippet on Hover

blogger posts


<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)

masonry layout for blogger


<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://4.bp.blogspot.com/-t1i_svebif4/VPMpZqPrKzI/AAAAAAAALAg/TRJ2Un238Gs/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 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.

That's it!
Implementing a grid style view has its pros and cons, but the benefits clearly outweigh the disadvantages. The fact that a website will look visually appealing and professional when set in grid style, is already enough to boost its online reputation. An increase in page views is just the beginning. With the right images and content, a blog will also have better SEO. Most importantly, implementing the changes is not as complex as some might think. With a step-by-step guide available, adding a dynamic view switcher would be completed in no time.