Tạo “Read More” với hình ảnh Thumbnails không sử dụng JavaScript

Đối với Blogger thì có rất nhiều thủ thuật giúp bạn rút ngắn bài viết chỉ cho hiển thị phần tóm tắt nội dung ở trang chủ nhắm giúp blog của bạn trông chuyên nghiệp hơn, gọn gàng hơn. Hôm nay mình sẽ giới thiệu đến bạn một thủ thuật nữa để tạo “Read More” tự động lấy ảnh Thumbnails và đặc biệt hơn thủ thuật này không sử dụng JavaScript để giảm thiểu thời gian tải trang của bạn.

Bước 1:

Đây là bước rất quan trọng, nó sẽ giúp blog của bạn trở lại giao diện ban đầu nếu trong quá trình thực hiện thủ thuật gặp phải trục trặc. Bạn chỉ cần vào Thiết kế --> Chỉnh sửa HTML (Design-->Edit HTML), tại đây bạn bấm vào Tải về mẫu đầy đủ (Download Full Template) để lưu file XML về ổ cứng.

Bước 2: Thêm code để hiển thị phần rút gọn bài viết

Đây là công đoạn quan trọng nhất của thủ thuật, bạn chỉ cần truy cập vào Thiết kế --> Chỉnh sửa HTML (Design-->Edit HTML), tại đây bấm vào ô Mở rộng mẫu tiện ích (Expand widget templates).

Tiếp theo bạn tìm đến dòng

<data:post.body/>

Thay thế dòng code trên bằng dòng code này:

<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:post.snippet'>
<b:if cond='data:post.thumbnailUrl'>
<div class='Image thumb'>
<img expr:src='data:post.thumbnailUrl'/>
</div></b:if>
<data:post.snippet/>
<b:if cond='data:post.jumpLink != data:post.hasJumpLink'>
<div class='jump-link'>
<a expr:href='data:post.url + "#more"' expr:title='
data:post.title'>
<data:post.jumpText/>
</a></div></b:if><b:else/>
<data:post.body/>
</b:if><b:else/>
<data:post.body/>
</b:if>

Tiếp theo bạn hãy Lưu mẫu. Kết quả sẽ giống như hình dưới đây.

Bước 3: Bố trí lại hình ảnh Thumbnails

Như hình trên ta sẽ thấy hình thu nhỏ sẽ hiển thị phía trên của phần chữ, công việc tiếp theo của ta là thêm đoạn mã CSS để canh cho hình và chữ nằm ngang nhau và nhìn sẽ đẹp hơn rất nhiều. Để làm được điều đó bạn chỉ cần vào Thiết kế --> Chỉnh sửa HTML (Design-->Edit HTML), tìm đến dòng:

]]></b:skin>

Và chèn đoạn mã sau vào ngay trước đoạn mã trên.

.thumb img {float: left; margin: 0 10px 10px 0;}

Bạn có thể thay left thành right để hiển thị ảnh thumbnails từ bên trái sang bên phải.

Cuối cùng bạn hãy Lưu mẫu để tận hưởng thành quả đạt được.

Phần phụ:

Thủ thuật này dựa trên thủ thuật chính thức từ Blogger nên bạn hoàn toàn chủ động được độ dài của đoạn tóm tắt, và bạn nhớ rằng khi nào muốn hiển thị “Read More” thì hãy chèn đoạn mã sau vào bài viết nhé.

<!-- more -->

Chúc bạn thành công!

Theo toiyeugoogle.net