Hiển thị title cho bài đăng phổ biến blogspot

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

PopularPosts là 1 widget có sẵn được Blogger đưa vào dùng thử nghiệm gần đây và được nhiều người đón nhận, đây là widget cho biết những bài đăng phổ biến được nhiều người đọc.
Ngoài 3 dạng thống kê: 7 ngày qua, 30 ngày qua và mọi lúc nó có 4 kiểu hiển thị là: chỉ mình tiêu đề bài đăng, tiêu đề bài đăng và đoạn trích dẫn, tiêu đề bài đăng và hình ảnh, tiêu đề bài đăng kèm đoạn trích dẫn và hình ảnh.
Thủ thuật sau đây sẽ hiển thị PopularPosts với tiêu đề bài đăng và hình ảnh, còn đoạn trích dẫn sẽ hiển thị khi đưa chuột vào tiêu đề.

Để 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 xem trên blog của bạn đã có widget PopularPosts này chưa?
đá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


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 -->.

Ở đâ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 chú ý:

<!-- (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 (thays72-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ẻ imgchứ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.

Nhưng Để 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.

Bạn Có thể thêm thuộc tính float:right cho class item-thumbnail để ảnh hiển thị bên phải.Trong 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.