Tùy chỉnh "Read more" link trong blogspot

Monday, September 14, 2009
Trong bài viết trước mình đã nói về việc Blogspot thêm tính năng tạo "Read more" link và cách sử dụng. Bài viết dưới đây sẽ tiếp tục giới thiệu với các bạn cách tùy chỉnh "Read more" link cho phù hợp hơn với template và sở thích của các bạn. Nào hãy bắt tay thực hiện nhé.

Trước hết các bạn cần biết được đoạn code đã được tự động thêm vào (đối với Classic template các bạn xem hướng dẫn ở bài trước) để tạo "Read more" link. Vào phần chỉnh sửa HTML và tìm đến đoạn text <data:post.body/>. Ngay sau nó bạn sẽ thấy đoạn code được thêm vào:
<b:if cond='data:post.hasJumpLink'>
      <div class='jump-link'>
  <a expr:href='data:post.url + &quot;#more&quot;'><data:post.jumpText/></a>  </div>
    </b:if>
Bây giờ chúng ta sẽ tùy chỉnh bằng cách bổ sung một số thành phần vào đoạn code trên.
  • Đưa "Read more" link sang lề phải:
<b:if cond='data:post.hasJumpLink'>
      <div class='jump-link'>
<div style='text-align:right;padding:0px 20px 0px 0px'>
   <a expr:href='data:post.url + &quot;#more&quot;'><data:post.jumpText/></a></div>
</div>
    </b:if>
Tùy vào template mà bạn chỉnh padding cho phù hợp.

Read more
  • Thêm tiêu đề bài viết đằng sau "Read more" link :
<b:if cond='data:post.hasJumpLink'>
      <div class='jump-link'>
 <a expr:href='data:post.url + &quot;#more&quot;'><data:post.jumpText/>&#160;<data:post.title/></a>
      </div>
    </b:if>
Read more
  • Thay chữ "Read more" bằng một hình ảnh:
<b:if cond='data:post.hasJumpLink'>
      <div class='jump-link'> 
      <a expr:href='data:post.url + &quot;#more&quot;'> <img src='image URL' alt='read more'/></a>
</div>
    </b:if> 
Read more

Có nhiều cách khác nhau để tùy chỉnh "Read more" link nhưng mình nghĩ trên đây là những cách dễ thực hiện nhất.

Chúc các bạn thành công.
Bạn có thể cập nhật bài viết mới từ Blogger+ một cách nhanh nhất bằng cách:

Đăng ký nhận tin RSS;

Đăng ký nhận bài viết mới qua Email.


Copyright 2008 - 2018 - BloggerPlus.net. All rights reserved.
Ghi rõ nguồn khi phát hành lại thông tin từ trang này.
Designed by Pavel. Powered by Blogger
Based on CSS by Ourblogtemplates