Tạo “Read More” Với Hình Ảnh Thumbnails Không Sử Dụng JavaScript

(Boxgiaitri.net) -Đố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, gon 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.

Thủ thuật mới này được Amanda Fazani viết cách đây mấy hôm và mình sẽ đăng lại cho các bạn được rõ với chỉ 3 bước có bản sau.
Bước 1: Sao lưu template của blog
Đâ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 Design>Edit HTML, tại đây bạn bấm 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 ngoài trang chủ
Đâ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 Design>Edit HTML, tại đây bấm vào ô 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 Save lại. 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 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 Save lại để tận hưởng thành quả đạt được.
Lưu ý, 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é.

Blogger Buster

Tạo “Read More” Với Hình Ảnh Thumbnails Không Sử Dụng JavaScript 2012-04-30T16:06:00+07:00 Rating: 4.5 Diposkan Oleh: Unknown