Thêm link "Xem thêm" cho bài viết ở trang chủ

Chào các bạn mình lướt qua một số web của bạn bè mình thì thấy một số template có nhiều kiểu bố trí rất hay và điều mình chú ý chính là hiệu ứng nút readmore trên blog của họ. Với blogger thì nút này không mấy ai để ý tuy nhiên nó rất quan trọng. Nó một lần nữa kích thích người đọc nhấn vào xem tiếp nội dung mà họ đang tò mò muốn đọc nhưng chưa đủ kích thích thì nút xem thêm này đã đến lúc phát huy tác dụng đó.

Thêm link "Xem thêm" cho bài viết ở trang chủ 1
Tùy chỉnh nút xem thêm  cho blog
Vậy để chỉnh nút xem thêm này bạn cần làm gì và chỉnh như thế nào? Có hai cách hiển thị nút xem thêm này
1./ Chèn bằng code có sẵn của blogspot
Blogger khi bạn dùng giao diện mặc định sẽ thấy được toàn bộ các mã cơ bản khi cấu hình blog bạn sẽ có đoạn mã quy định đoạn mô tả ngắn (snippet). Đoạn mã có cú pháp như dưới đây:
     <div itemprop='reviewBody'><data:post.snippet/></div>
Cùng với việc sử dụng thẻ này kết hợp với tùy chỉnh bên trong trang quản trị bạn có thể chọn hiển thị Nút xem thêm bằng các đoạn text khác nhau như: "Xem thêm", "Đọc thêm", "Xem tiếp" "Xem tiếp nội dung" ..... Các thông tin này bạn có thể tùy chỉnh được từ các mã này nó sẽ sinh ra các đoạn code hiển thị link để đọc tiếp nội dung
Thêm link "Xem thêm" cho bài viết ở trang chủ
Thêm link "Xem thêm" cho bài viết ở trang chủ
2./ Sử dụng code tùy chỉnh kết hợp mã JavaScript
<b:if cond='data:post.hasJumpLink'>
     <a class='read_more' expr:href='data:post.url + &quot;#more&quot;' expr:title='data:post.title'>Xem thêm nội dung</a>
<b:else/>

Trong đó: 
  • data:post.url : Link của bài viết
  • data:post.title : Tiêu đề bài viết
Khi đó bạn cũng có thể tùy chỉnh CSS cho nút xem thêm dựa vào class có tên "read_more" để nó hấp dẫn hơn nhé.
Blog mình đang sử dụng cách thứ hai này  tiện chỉnh sửa.

Bài viết liên quan

loading...