Để làm được vậy chúng ta quan tâm tới đoạn mã của kiểu hiển thị thứ 4. Hãy chắc chắn trên blog của bạn đã có widget PopularPosts này, đánh dấu vào lựa chọn kèm theo hình ảnh thu nhỏ và trích đoạn. Kiểu thống kê thì tùy bạn chọn 1 trong 3 kiểu: 7 ngày qua, 30 ngày qua hay mọi lúc. Lưu thiết lập và chọn tải template về máy để tiến hành chỉnh sửa (bạn có thể chỉnh trực tiếp trên Blogger nhưng sẽ dễ dàng hơn nếu dùng một trình text editor chuyên nghiệp, ngoài ra thì việc chỉnh trên Blogger sẽ gây lỗi font với blog Tiếng Việt).
Mở template và tìm với từ khóa PopularPosts1. Trong đoạn mã của widget này có 4 đoạn mà Blogger đã chú thích: , , , . Trong khuôn khổ thủ thuật của bài đăng này chúng ta quan tâm đến đoạn thứ 4, đó là nơi chứa mã của kiểu hiển thị tiêu đề bài đăng kèm đoạn trích dẫn và hình ảnh. Dưới đây là đoạn mã chúng ta cần quan tâm:
Chú thích:
data:post.thumbnail: Địa chỉ của ảnh thứ nhất trong bài đăng được Blogger resize (thay s72-c vào đường dẫn).
data:thumbnailSize: Kích thước ảnh mà Blogger resize, là ảnh hình vuông nên bao gồm luôn cả chiều cao và chiều rộng.
data:post.href: Địa chỉ của bài đăng.
data:post.title: Tiêu đề của bài đăng.
data:post.snippet: Đoạn trích dẫn của bài đăng.
Hoạt động của đoạn mã này:
Đầu tiên sẽ xem xem có địa chỉ ảnh cho bài đăng phổ biến này hay không qua lệnh diều kiện
Bây giờ chúng ta sẽ sửa lại đoạn mã này theo hướng hiển thị tiêu đề bài đăng với title là đoạn trích dẫn và hình ảnh với kích thước tùy chọn, loại bỏ đi liên kết tới địa chỉ của bài đăng khi click vào ảnh, thêm thuộc tính alt là tiêu đề bài đăng cho ảnh này. Một vấn đề nữa là khi dùng trình duyệt từ IE7 trở về trước thì tiêu đề bài đăng bị thụt xuống một đoạn so với ảnh.
Để hiển thị tốt trên phiên bản trình duyệt này chúng ta đưa hình ảnh và tiêu đề bài đăng vào cùng 1 thẻ div. Đoạn mã trên được viết lại như sau:
Lưu lại và tải template lên Blogger.
Không có nhận xét nào:
Đăng nhận xét