Để 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: <!-- (1) No snippet/thumbnail -->, <!-- (2) Show only snippets -->, <!-- (3) Show only thumbnails -->, <!-- (4) Show snippets and thumbnails -->. 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:
<!-- (4) Show snippets and thumbnails --> <div class='item-content'> <b:if cond='data:post.thumbnail'> <div class='item-thumbnail'> <a expr:href='data:post.href' target='_blank'><img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/></a> </div> </b:if> <div class='item-title'> <a expr:href='data:post.href'><data:post.title/></a> </div> <div class='item-snippet'> <data:post.snippet/> </div> </div>Chú thích:
- data:post.thumbnail: Địa chỉ của ảnh thứ nhất trong bài đăng được Blogger resize (thay
s72-cvà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:if cond='data:post.thumbnail'>
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:
<!-- (4) Show snippets and thumbnails --> <div class='item-content'> <div class='item-title'> <b:if cond='data:post.thumbnail'> <img class='item-thumbnail' expr:alt='data:post.title' expr:src='data:post.thumbnail' border='0' width='38px' height='38px'/> </b:if> <a expr:href='data:post.href' expr:title='data:post.snippet'><data:post.title/></a> </div> </div>Lưu lại và tải template lên Blogger.
Ảnh do Blogger resize có kích thước là 72x72 pixels sẽ mất cân đối khi hiển thị chỉ cùng với tiêu đề bài đăng. Đoạn mã trên đặt lại là 38x38 pixels, bạn tùy chỉnh cho phù hợp với blog của mình. Một điều mình mới phát hiện và bổ xung thêm vào đây là ảnh của bài đăng phải được upload thông qua công cụ Chèn hình ảnh của Blogger, hoặc lấy địa chỉ ảnh từ Picasa và địa chỉ ảnh phải cós1600,s800... thì công cụ resize của Blogger mới hoạt động, khi đó ảnh mới xuất hiện trên widget PopularPosts.
Có thể thêm thuộc tính float:right cho class item-thumbnail để ảnh hiển thị bên phải.
Với 3 kiểu hiển thị còn lại có ít thuộc tính hơn, tùy theo ý thích mà bạn chỉnh sửa cho phù hợp nếu muốn.
Một điều lạ là ở đoạn trích dẫn Blogger chỉ quan tâm xem bao nhiêu ký tự rồi ngắt (khoảng 140 ký tự) mà không chú ý đã gặp ký tự trống hay chưa, dẫn đến có câu bị mất vài từ trở nên rất vô nghĩa.
Sao thấy toàn đi copy về post lại không vậy :-ss
ReplyDeleteVì mình đâu có cao siêu gì mà đi viết được thủ thuật đâu bạn!!:).
DeleteChỉ copy những cái hay và đều ghi nguồn nhá!:-s:-s
tks
ReplyDelete