Hiển thị bài viết trên trang chủ dưới dạng lưới (Grid) cho Blogger

Như đã nói trong bài trước, bài viết này mình sẽ hướng dẫn các bạn cách hiển thị bài viết dưới dạng lưới cho Blogger. Đây là một cách khá hay, hữu ích để các bạn tăng tính thẩm mĩ và độ chuyên nghiệp cho giao diện của blogger.

Trước khi, bắt đầu vào thủ thuật này, các bạn hãy đọc bài viết hướng dẫn tạo auto readmore cho blogger trên blog của mình vì mình sẽ áp dụng nó để thu gọn bài viết trên trang chủ. 

Xem thêm : Hướng dẫn tạo Auto Readmore cho Blogger

Kết quả cuối cùng các bạn xem tại đây

Hiển thị bài viết trên trang chủ dưới dạng lưới (Grid) cho Blogger

Bước 1 : Thu gọn bài viết hiển thị trên trang chủ. Mình sẽ lựa chọn auto readmore có sử dụng javascript và chỉnh phần trích dẫn 180 kí tự

Bước 2 : Để hiển thị dưới dạng lưới, chúng ta sẽ chỉnh chiều rộng ( width ) của bài viết và sử dụng float để tự động chèn vào vị trí trống. Cụ thể, các bạn chèn đoạn code này phía dưới thẻ </head>

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<style type='text/css'>
* {-moz-box-sizing: border-box;-webkit-box-sizing: border-box;box-sizing: border-box;}
.post {width:33.3333%;float:left;padding:10px;}
.post img {display:block;width:100%;}
.post-footer {display: none;}
.post {margin-bottom: 10px; border-bottom: 1px dotted #E6E6E6; padding-bottom: 20px;}
 .readmore a {text-decoration: none; }
</style>
</b:if>
</b:if>

Ở đây, vì mình muốn hiển thị grid 3 cột nên sẽ để width là 33.3333%, còn nếu các bạn muốn hiển thị 2 cột thì để 50%, hoặc 4 cột......

Như vậy là xong, nếu như các muốn thêm hiệu ứng khi hover như trong demo thì làm tiếp bước 3.

Bước 3 : 

Đầu tiên, các bạn phải sử dụng mẫu auto readmore như mình đã giới thiệu thì mới thấy được hiệu ứng

Thêm đoạn code dưới đây vào vị trí như trong hình ( phía sau +post_thumb_height+'px" /> )

<div class="overlay"></div>

Bước 4 :

Thay thế đoạn code

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<style type='text/css'>
* {-moz-box-sizing: border-box;-webkit-box-sizing: border-box;box-sizing: border-box;}
.post {width:33.3333%;float:left;padding:10px;}
.post img {display:block;width:100%;}
.post-footer {display: none;}
.post {margin-bottom: 10px; border-bottom: 1px dotted #E6E6E6; padding-bottom: 20px;}
 .readmore a {text-decoration: none; }
</style>
</b:if>
</b:if>

ở phía trên bằng đoạn code dưới đây

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<style type='text/css'>
* {-moz-box-sizing: border-box;-webkit-box-sizing: border-box;box-sizing: border-box;}
.post {width:33.3333%;float:left;padding:10px;}
.post img {display:block;width:100%;}
.post-footer {display: none;}
.post {margin-bottom: 10px; border-bottom: 1px dotted #E6E6E6; padding-bottom: 20px;}
 .readmore a {text-decoration: none; }
.posts-thumb {position:relative}
.overlay {
background-color: #000;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0px;
    -webkit-transition: opacity 0.5s;
    transition: opacity 0.5s;
    opacity: 0;
}
.post:hover .overlay {
opacity:0.3
}
.posts-thumb {-webkit-transition: all 0.5s;
    transition: all 0.5s;overflow:hidden;margin-bottom:15px;}
.post-title {margin-bottom:15px;}
.post:hover .posts-thumb img {transform: scale(1.1) rotate(2deg);transition:0.5s}
</style>
</b:if>
</b:if>

Lời kết : Đây là thủ thuật rất đơn giản nên bài viết xin tạm dừng tại đây. Chúc các bạn thành công