Hiển thị đoạn trích dẫn dạng title cho bài đăng phổ biến

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-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:if cond='data:post.thumbnail'>. Nếu đúng, một thẻ div với thành phần bên trong là thẻ img chứa địa chỉ ảnh có liên kết tới địa chỉ của bài đăng được xuất hiện, bài đăng nào không có ảnh thì bỏ qua. Tiếp theo sau đó là 2 thẻ div lần lượt chứa tiêu đề bài đăng có liên kết tới địa chỉ của bài đăng <a expr:href='data:post.href'><data:post.title/></a> và đoạn trích dẫn <data:post.snippet/>.

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.

Thanks:  Duy Phạm (blog.duypham.info)