Hướng dẫn tạo style cho bài viết đầu tiên

Thảo luận trong 'Tip - tất tầng tật về Windows' bắt đầu bởi HitechNEws, 13/2/18 lúc 12:36.

  1. HitechNEws

    HitechNEws Administrator

    Tạo style cho bài viết đầu tiên là phương pháp thiết kế bố cục cho bài viết đầu tiên có style khác với những bài viết còn lại giúp làm nổi bật tạo điểm nhấn giúp Blog có thiết kế chuyên nghiệp

    Các bạn chơi Blog lâu năm chắc chẳng lạ gì với dạng cấu trúc này nhưng với những bạn mới làm quen với Blog có thể chưa tìm hiểu. Tạo style cho bài viết đầu tiên tức là thiết kế lại css cho bài viết đầu tiên tạo điểm nhấn khác biệt với những bài viết cũ hơn. Các bạn có thể xem hình demo dưới đây để thấy rõ hơn
    [​IMG]

    Người thiết kế rất ít khi đưa dạng này vào cấu trúc template nhưng bạn có thể tự thiết kế lại cho Blog của mình. Trong bài này mình sẽ giúp bạn bạn hiểu phương pháp làm còn cách tạo style như thế nào thì bạn tự tìm hiểu và thiết kế cho phù hợp với Blog của mình.

    Chúng ta cần 2 điều kiện quan trọng thứ nhất sử dụng HTML gọi dữ liệu của bài viết đầu tiên và thứ hai tạo style cho bài viết. Về gọi dữ liệu HTML do cấu trúc của mỗi template không giống nhau cho nên rất khó xác định là đặt trong mục nào nhưng bắt buộc đoạn HTML gọi dữ liệu phải đặt trong đoạn ... có mẫu sau:


    // Đoạn HTML gọi dữ liệu ảnh, meta, tóm tắt


    Mình lấy ví dụ đoạn HTML gọi dữ liệu bài viết cho các trang index có dạng sau:


    ...
    // Gọi dữ liệu ảnh đầu tiên của bài viết
    ...
    // Tiêu đề bài viết
    ...
    // Gọi dữ liệu thời gian đăng bài, tác giả, label...
    ...
    // Tóm tắt bài viết


    Bây giờ bạn sẽ thêm đoạn HTML gọi dữ liệu bài viết đầu tiên vào như sau:



    ...

    ...

    ...

    ...


    ...

    ...

    ...

    ...



    Mẹo: Trong bạn có thể thêm điều kiện bài viết sẽ xuất hiện hoặc không xuất hiện ở những trang nào như ví dụ bạn muốn chỉ xuất hiện ở trang label thì thêm điều kiện như sau:



    Hoặc bạn không muốn xuất hiện ở trang chủ



    Mình lấy đoạn HTML tham khảo cho bài viết đầu tiên








    [​IMG]

















    ...

    ...

    ...

    ...



    Khi gọi được dữ liệu cho bài viết đầu tiên tiếp theo bạn cần tạo style cho bài viết này bằng cách viết css cho các class ảnh, tiêu đề, meta, tóm tắt cụ thể như ví dụ ở trên viết css cho các class: .post-first-thumb, .post-article-content, post-first-title h2, .post-first-meta .label, .post-first-meta .timeago và .post-first-snippet.
    Phần khó nhất đặt đoạn HTML gọi dữ liệu bài viết đầu tiên bạn hãy làm thật cẩn thận tốt nhất nên sao lưu theme trước khi thực hiện. Nếu bạn không làm được mà cần giúp đỡ thì để lại nhận xét bên dưới mình sẽ giúp.
     

Chia sẻ trang này