Thiết kế style cho bài đăng trang index

Thông thường với auto read more no js, bài đăng hiện ở trang chủ như nào thì hiện ở các trang index cũng tương tự như vậy, điều này có vẻ hơi đại trà và lâu lâu có thể tạo cảm giác chán nản. Vậy tại sao ta không tùy biến thêm để chúng hiển thị tốt hơn nhưng vẫn giữ được các nội dung cần thiết. Hãy cùng tìm hiểu cách làm qua bài viết này

Ví dụ hiển thị trên trang search label

Hiển thị trên trang tìm kiếm từ khóa search query

Làm được điều này không khó, quan trọng ở đây là bạn phải thuần thục thẻ điều kiện blogger và có kiến thức về css. Và bài viết này cũng chỉ mang tính chất chỉ dẫn chứ không có một code cố định nào vì mỗi template có thiết kế không giống nhau

Với auto read more no js, bài đăng được hiển thị với cấu trúc giống nhau nhờ thẻ lặp b:loop, chúng có id và class tương tự nhau, vì vậy chúng ta sẽ cần dùng đến các selector dạng :nth-of-child hoặc :nth-of-type

* Làm nổi bật bài viết đầu

Trước tiên ta cần F12 để tìm thẻ lớn nhất chứa nội dung từng bài đăng nằm trong class blog-posts

Trong ví dụ này class sẽ là .post-outer. Ví dụ làm nổi bật 3 bài đầu tiên, ta sẽ dùng :nth-of-type để viết css riêng cho chúng như

.index .post-outer{}
.index .post-outer:nth-of-type(1){}
.index .post-outer:nth-of-type(1) .block-image{}
.index .post-outer:nth-of-type(1) #meta-post,.index .post-outer:nth-of-type(1) .resumo{}
.index .post-outer:nth-of-type(2) .post-title a,.index .post-outer:nth-of-type(3) .post-title a{}
.index .post-outer:nth-of-type(2),.index .post-outer:nth-of-type(3){}
.index .post-outer:nth-of-type(2) .block-image,.index .post-outer:nth-of-type(3) .block-image{}
#blog-pager{clear:both}
@media screen and (max-width:xxx px){
   .index .post-outer{}
   .index .post-outer:nth-of-type(1){}
   .index .post-outer:nth-of-type(1) .block-image{}
   .index .post-outer:nth-of-type(1) #meta-post,.index .post-outer:nth-of-type(1) .resumo{}
   .index .post-outer:nth-of-type(2) .post-title a,.index .post-outer:nth-of-type(3) .post-title a{}
   .index .post-outer:nth-of-type(2),.index .post-outer:nth-of-type(3){}
   .index .post-outer:nth-of-type(2) .block-image,.index .post-outer:nth-of-type(3) .block-image{}
}

* Style khác nhau cho các trang khác nhau

Kết hợp với class .post-outer cùng :nth-of-type ở trên .Ta sẽ dùng hệ thống thẻ b:if để viết các style khác nhau cho các trang khác nhau như sau

<b:if cond='!data:view.isSingleItem'>
    <b:if cond='data:view.isHomepage'>
        <style type='text/css'>
            /*<![CDATA[*/
               // style cho bài viết ở trang chủ 
              /*]]>*/
        </style>
        <b:else/>
        <b:if cond='data:view.isLabelSearch'>
            <style type='text/css'>
                /*<![CDATA[*/
                   // style cho bài viết ở trang search label 
                  /*]]>*/
            </style>
            <b:else/>
            <b:if cond='data:blog.searchQuery != ""'>
                <style type='text/css'>
                    /*<![CDATA[*/
                       // style cho bài viết ở trang search query 
                      /*]]>*/
                </style>
                <b:else/>
                <b:if cond='data:view.isArchive'>
                    <style type='text/css'>
                        /*<![CDATA[*/
                           // style cho bài viết ở trang lưu trữ
                          /*]]>*/
                    </style>
                    <b:else/>
                    <style type='text/css'>
                        /*<![CDATA[*/
                           // style cho bài viết ở các trang còn lại
                          /*]]>*/
                    </style>
                </b:if>
            </b:if>
        </b:if>
    </b:if>
</b:if>

Có thể thấy việc phân nhánh nhỏ các thành phần của trang index ta có thể tạo ra rất nhiều style khác nhau để hiển thị bài đăng theo ý muốn, cái khó ở đây là responsive + thẩm mỹ, cái cần ở đây là thời gian + kiến thức css + sự kiên trì của bạn

Chúc bạn thành công !