Hiển thị các bài post trên blog ở dạng grid (dạng ô vuông)

Một số bạn muốn tạo một trang blog của mình với nội dung là một trang Gallery chia sẻ ảnh, các bài post đa phần là hình ảnh và một vài dòng trích dẫn vậy nên việc để blog ở dạng danh sách bài đăng là không cần thiết, trong trường hợp này blog dạng grid thumbnail sẽ đẹp và bắt mắt hơn. Sau đây mình xin chia sẻ với các bạn cách đưa blog từ dạng list mạc định sang dạng grid 

Vào Template > Edit HTML, bấm Ctrl+F để tìm thẻ </head>

Copy Paste đoạn code sau phía trước thẻ </head>

<script src="http://code.jquery.com/jquery-1.9.1.js"></script>  
  <script src="http://code.jquery.com/jquery-migrate-1.1.0.js"></script>  
  <b:if cond='data:blog.pageType == &quot;index&quot;'>  
  <script type='text/javascript'>//<![CDATA[  
  $(document).ready(function() {  
    var width = 200;  
    var height = 170;  
    var placeholder = 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0kAZrWtZyGL0iNNrz74W2y7WY5ZwQ4_8MrCiTKYfFFsmET0ZhwGAfEswsNs_KkFMKYGsq1iyKJn0GfU52h78f_bzdLjhnqVn7MdKukC3IX6AzNZzJBExENCSo4uFHQaUu2V_wIHaFQyQ/s1600/no-thumb.png';  
    var margins = "0px 0px 10px 10px";  
    var fitThumb = 1;  
    var titleTopPadding = 5;  
    var titleBottomPadding = 8;  
    var titleLeftRightPadding = 5;  
    var titlePadding = titleTopPadding + 'px ' + titleLeftRightPadding + 'px ' + titleBottomPadding + 'px ' + titleLeftRightPadding + 'px';  
    $('.post-body').each(function(n, wrapper) {  
      var wrapper = $(wrapper);  
      var image = $(wrapper).find('img').first();  
      var link = wrapper.parent().find('h3 a');  
      var linkURL = link.attr('href');  
      var linkTitle = link.text();  
      $(link).remove();  
      wrapper.empty();  
      if (image.attr('src')) {  
        var thumbHeight = image.attr('height');  
        var thumbWidth = image.attr('width');  
        var thumbParent = $(image).parent();  
        wrapper.append(thumbParent);  
        if (fitThumb) {  
          image.attr({  
            src: image.attr('src').replace(/s\B\d{3,4}/, 's' + width + '-c')  
            });  
          image.attr('width', width).attr('height', height);  
        } else {  
          image.attr({  
            src: image.attr('src').replace(/s\B\d{3,4}/, 's' + width)  
            });  
          image.attr('width', width);  
          var changeHeight = (thumbHeight / thumbWidth * width).toFixed(0);  
          image.attr('height', changeHeight);  
        }  
      } else {  
        var image = $('<img>').attr('src', placeholder).attr('height', height).attr('width', width);  
        var thumbParent = $('<a>').append(image).appendTo(wrapper);  
      }  
      thumbParent.attr('href', linkURL).css('clear', 'none').css('margin-left', '0').css('margin-right', '0').addClass('postThumbnail');  
      var thumbTitle = $('<div>').prepend(linkTitle).css('padding', titlePadding).css('opacity', '0.9').css('filter', 'alpha(opacity=0.9)').css('width', width).appendTo(thumbParent);  
      var ptitleHeight = thumbTitle.height();  
      var summary = parseInt(ptitleHeight) + parseInt(titleTopPadding) + parseInt(titleBottomPadding);  
      thumbTitle.css('margin-top', '-' + summary + 'px');  
      wrapper.css('float', 'left').css('height', height).css('width', width).css('margin', margins).css('overflow', 'hidden');  
    });  
    $('#blog-pager').css('clear', 'both');  
  });  
  function hideLightbox() {  
    var images = document.getElementsByTagName('img');  
    for (var i = 0; i < images.length;++i) {  
      images[i].onmouseover = function() {  
        var html = this.parentNode.innerHTML;  
        this.parentNode.innerHTML = html;  
        this.onmouseover = null;  
      };  
    }  
  }  
  if (window.addEventListener) {  
    window.addEventListener('load', hideLightbox, undefined);  
  } else {  
    window.attachEvent('onload', hideLightbox);  
  }  
  //]]>  
  </script>  
  <style>  
  .post {  
    border-bottom: 0 dotted #E6E6E6;  
    margin-bottom: 0;  
    padding-bottom: 0;  
  }  
  h2,.post-footer {  
    display: none;  
  }  
  a.postThumbnail div {  
    text-decoration: none;  
    color: #fff;  
    font-size: 12px;  
    font-weight: bold;  
    text-transform: capitalize;  
    background: rgb(125,126,125);  
   /* Old browsers */  
    background: -moz-linear-gradient(top, rgba(125,126,125,1) 0%, rgba(14,14,14,1) 100%);  
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(125,126,125,1)), color-stop(100%,rgba(14,14,14,1)));  
   /* Chrome,Safari4+ */  
    background: -webkit-linear-gradient(top, rgba(125,126,125,1) 0%,rgba(14,14,14,1) 100%);  
    background: -o-linear-gradient(top, rgba(125,126,125,1) 0%,rgba(14,14,14,1) 100%);  
    background: -ms-linear-gradient(top, rgba(125,126,125,1) 0%,rgba(14,14,14,1) 100%);  
    background: linear-gradient(to bottom, rgba(125,126,125,1) 0%,rgba(14,14,14,1) 100%);  
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=&#39;  
    #7d7e7d&#39;, endColorstr=&#39;#0e0e0e&#39;,GradientType=0 );  
  }  
  a.postThumbnail:hover div {  
    display: block;  
  }  
  .post-body img {  
    background-color: transparent;  
    border: 1px solid transparent;  
    padding: 0px;  
    -webkit-border-radius: 12px;  
    -moz-border-radius: 12px;  
    border-radius: 12px;  
    opacity: 1;  
    transition: opacity .25s ease-in-out;  
    -moz-transition: opacity .25s ease-in-out;  
    -webkit-transition: opacity .25s ease-in-out;  
  }  
  .post-body img:hover {  
    -ms-filter: &quot;  
    progid: DXImageTransform.Microsoft.Alpha(Opacity=70)&quot;  
    ;  
  filter: alpha(opacity=70);  
    -moz-opacity: 0.7;  
    -khtml-opacity: 0.7;  
    opacity: 0.7;  
  }  
  </style>  
  </b:if>

Ghi chú 3 thuộc tính:

var width = 200;  
var height = 170;  
var placeholder = 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0kAZrWtZyGL0iNNrz74W2y7WY5ZwQ4_8MrCiTKYfFFsmET0ZhwGAfEswsNs_KkFMKYGsq1iyKJn0GfU52h78f_bzdLjhnqVn7MdKukC3IX6AzNZzJBExENCSo4uFHQaUu2V_wIHaFQyQ/s1600/no-thumb.png';

Thay đổi giá trị 200 và 170 để thay đổi kích thước thumbnail và đường link tới file ảnh không tìm thấy.
Ví du ảnh không tìm thấy:

Cuối cùng Save lại là tận hưởng, chúc các bạn thành công !