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

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.

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

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

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.