-->

Cấu hình CSS cho bài viết đầu tiên của blogspot

Đa số các trang web hoặc blog khi chúng ta truy cập vô thì thường thấy nó có một bài viết đầu tiên có bố cục nổi bật hơn, khác lạ hơn so mới các bài viết còn lại.

Cấu hình CSS cho bài viết đầu tiên của blogspot


Sau đây mình hướng dẫn các bạn làm nổi bật bài viết đầu tiên của blogspot bằng CSS. Nếu Blog ở phiên bản cũ chúng ta có thể dùng thẻ điều kiện cho bài viết đầu tiên như sau:

<b:if cond='data:post.isFirstPost'>

</b:if>

Như với Blog phiên bản mới thì họ đã bỏ thẻ điều kiện trên, như vậy thì chúng ta có thể sử dụng CSS cho bài POST đầu tiên như sau:

Cách 1: Dùng CSS first-child

Trước tiên các bạn xác định cấu trúc HTML các bài đăng của Blog, đưa chột vô bài đăng đầu tiên rồi nhấn chuột phải kiểm tra phần tử (F12)

Cấu hình CSS cho bài viết đầu tiên của blogspot

Như hình trên thì mình sẽ có cấu trúc của CSS như sau:

<style>
    .index-post-wrap article:first-child{}
</style>

Các bạn xem hình dưới



index-post-wrap là class bao quanh article, tùy theo từng blog có thể thẻ article div

Để viết css các phần tử bên trong article thì viết CSS như sau

<style>

    .index-post-wrap article:first-child .entry-title{}

    .index-post-wrap article:first-child .entry-title a{}

    .index-post-wrap article:first-child .index-post .entry-excerpt{}

    .index-post-wrap article:first-child ......{}

</style>

Như vậy các bạn muốn sửa phần nào thì cứ gọi đường dẫn CSS vô phía sau của .index-post-wrap article:first-child

Theo cấu trúc CSS trên thì các bạn có thể chỉnh sửa màu chữ, màu nền, kích thước ảnh, mô tả... cho phù hơp với từng blog.

Cách 2: Dùng CSS nth-child(1) hoặc nth-of-type(1) cho kết quả đều giống nhau, cũng tùy trường hợp để áp dụng.

Tương tự như trên thay first-child thành nth-child(1)

<style>

    .index-post-wrap article:nth-child(1) .entry-title{}

    .index-post-wrap article:nth-child(1) .entry-title a{}

    .index-post-wrap article:nth-child(1) .index-post .entry-excerpt{}

    .index-post-wrap article:nth-child(1) ......{}

</style>

Xem thêm CSS even - odd: Cũng tương tự như trên chúng ta áp dụng CSS cho chẵn - lẻ cho bài viết như sau

<style>

    .index-post-wrap article:nth-child(even) .entry-title{} // Áp dụng cho bài chẵn 2 - 4 - 6 - 8 ...

    .index-post-wrap article:nth-child(odd) .entry-title{} // Áp dụng cho bài lẻ 1 - 3 - 5 - 7 ...

</style>

Lưu ý: Các đường dẫn CSS bên trên sẽ khác với đường dẫn CSS blog của các bạn, các bạn phải thay lại đường dẫn CSS cho đúng nó mới hoạt động nhé. 

Kết luận: Trên đây là bài viết hướng dẫn thay đổi CSS cho bài viết đầu tiên của blogspot, kết hợp thêm CSS chẵn lẻ.

8 Nhận xét

  1. Đã thử nhưng ko đc, chắc sai chỗ nào đó

    Trả lờiXóa
    Trả lời
    1. Đường dẫn CSS phải chuẩn mới được

      Xóa
    2. Của mình là .aPost grid-item article:first-child đúng ko nhỉ?

      Xóa
    3. chỗ grid-item phải có dấu chấm vì nó là class .aPost .grid-item article:first-child

      Xóa
    4. Cái style này thêm vào trong widget hay vào đâu thớt?

      Xóa
  2. Thớt dựa vào đâu mà thêm cái -wrap vào nhỉ :D

    Trả lờiXóa
    Trả lời
    1. Miễn nó là class bao quanh, hoặc viết .blog-posts article:first-child {}

      Xóa
  3. cái .index-post-wrap là tự thêm trong quá trình thiết kế chứ blog nó không sinh ta cái class đó

    Trả lờiXóa

Đăng nhận xét

Mới hơn Cũ hơn