Chuyên mục

Blogger
  • Blogger Template 8
    • Seo Blogspot 29
      • Thiết kế Blogspot 24
        • Thủ thuật Blogspot 69
          • Tiện ích Blogspot 31
            Máy tính
            • Phần mềm 45
              • Sửa lỗi Windows 20
                • Thủ thuật Windows 78
                  • Cài đặt Windows 41

                    Cách tạo style cho các bài viết tại trang index

                    Bài này dành cho mấy anh hay nghịch vọc vạch 😛 có chút kinh nghiệm về css thiêt kế lại bố cục sắp xếp các bài viết tại trang chủ hay tại một trang bất kỳ thuộc nhóm trang index. Các bài viết có thể là một, hai hay ba bài viết đầu tiên có tác dụng làm nổi bật hoặc trang trí cho đẹp mắt. 😃

                    Hai dạng bài viết mẫu các bạn tham khảo mình viết css cho ba bài viết đầu tiên

                    + Dạng 1: https://www.nhipsong24h.net

                    Cách tạo style cho các bài viết tại trang index

                    + Dạng 2: https://ns24h.blogspot.com/search/label/magazine

                    Cách tạo style cho các bài viết tại trang index

                    Điểm mấu chốt có thể thiết kế được là đánh số thứ tự cho class, ví dụ với class .post

                    Copy
                    .post:nth-of-type(1)
                    .post:nth-of-type(2)
                    .post:nth-of-type(3)
                    ....

                    Bên cạnh đó các bạn có thể kết hợp với kích thước màn hình chẳng hạn với kích thước màn hình nhỏ nhất 800px mới tạo style

                    Copy
                    @media (min-width: 800px) {
                    #Đặt css trong đây
                    }

                    Một điều nữa bạn có thể sử dụng điều kiện cho một trang cụ thể chẳng hạn như trang Label

                    Copy
                    <b:if cond='data:view.isLabelSearch'>
                    <style>
                    @media (min-width: 800px) {
                    #Đặt css trong đây
                    }
                    </style>
                    </b:if>

                    Ví dụ về cách viết css cho trang Label đặt css trên </head>

                    Copy
                    <b:if cond='data:view.isLabelSearch'>
                    <style>
                    @media (min-width: 800px) {
                    .post:nth-of-type(1){width:60%;border-bottom:none}
                    .post:nth-of-type(1) .post-thumb{width:100%;height:260px;margin-right:0}
                    .post:nth-of-type(1) .post-meta,.post:nth-of-type(1) .post-snippet{display:block;float:left;clear: both;}
                    .post:nth-of-type(1) .post-meta{padding: 0 0 15px 0;}
                    .post:nth-of-type(1) .post-title h2{font-size:22px}
                    .post:nth-of-type(2),.post:nth-of-type(3){width:40%;padding:0 0 0 20px;border-bottom:none;margin:0}
                    .post:nth-of-type(2) .post-thumb,.post:nth-of-type(3) .post-thumb{width:100%;height:156px;margin-right:0}
                    .post:nth-of-type(2) .post-snippet,.post:nth-of-type(2) .post-meta,.post:nth-of-type(3) .post-snippet,.post:nth-of-type(3) .post-meta{display:none}
                    .post:nth-of-type(1) .post-title h2,.post:nth-of-type(2) .post-title h2,.post:nth-of-type(3) .post-title h2{padding:15px 0;float:left;display:block}
                    .post:nth-of-type(2) .post-title h2,.post:nth-of-type(3) .post-title h2{font-size:18px;line-height:1.4;display:block}
                    }
                    </style>
                    </b:if>

                    Vâng chỉ đơn giản vậy thôi các bạn có thể khám phá tiếp. Chấm hết bài!!!
                    Nội dung chính