Trước giờ chắc cũng có khá nhiều blogger hướng dẫn về cách tùy biến nút readmore này nhưng thủ thuật khá dài dòng phức tạp, và thường sử dụng các hiệu ứng phụ. Thông thường nếu 1 blog có nhiều hiệu ứng quá thì tốc độ load của trang web sẽ giảm đi là điều hiển nhiên.
Hôm nay mình sẽ hướng dẫn các bạn một cách khác tùy biến nút readmore này mà không sử dụng thêm 1 hiệu ứng phụ nào cả. Nhưng vẫn đạt được hiệu quả thẩm mỹ khá cao.
Đầu tiên bạn vào Thiết kế --- chỉnh sửa HTML --- mở rộng tiện ích mẫu.
Chèn đoạn code này vào trước thẻ ]]></b:skin>
.jumplink{font-size: 13px;text-shadow:1px 1px 1px #000;display:block;background:#fff;float:right;width:100px;height:30px;margin:0 40px 0 0;border-radius:10px;
box-shadow: 2px 2px 2px #666;
-moz-box-shadow: 2px 2px 2px #666;
-webkit-box-shadow: 2px 2px 2px #666}
.jumplink:hover{margin:0 42px 0 0;background:#bcd;color:#7d48d8;
box-shadow: 5px 5px 5px #666;
-moz-box-shadow: 5px 5px 5px #666;
-webkit-box-shadow: 5px 5px 5px #666}
Tiếp tục tìm đến đoạn code này và xóa nó đi.box-shadow: 2px 2px 2px #666;
-moz-box-shadow: 2px 2px 2px #666;
-webkit-box-shadow: 2px 2px 2px #666}
.jumplink:hover{margin:0 42px 0 0;background:#bcd;color:#7d48d8;
box-shadow: 5px 5px 5px #666;
-moz-box-shadow: 5px 5px 5px #666;
-webkit-box-shadow: 5px 5px 5px #666}
<b:if cond='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>
Chú ý phía trên đoạn code bạn vừa xóa có dòng <data:post.body/><div class='jump-link'>
<a expr:href='data:post.url + "#more"' expr:title='data:post.title'><data:post.jumpText/></a>
</div>
</b:if>
Bạn chèn vào bên dưới nó đoạn code sau:
<b:if cond='data:post.hasJumpLink'>
<div class='jump-link'>
<a expr:href='data:post.url + "#more"' expr:title='data:post.title'><div class='jumplink'>
<div style='margin:4px 10px 5px 20px'>
<data:post.jumpText/></div></div></a>
</div>
</b:if>
Cuối cùng save template lại và tận hưởng kết quả nào.<div class='jump-link'>
<a expr:href='data:post.url + "#more"' expr:title='data:post.title'><div class='jumplink'>
<div style='margin:4px 10px 5px 20px'>
<data:post.jumpText/></div></div></a>
</div>
</b:if>
Chú ý 2 dòng màu đỏ là màu nền của nút readmore trước và sau khi rê chuột vào. Dòng màu cam là màu chữ khi rê chuột vào. Bạn có thể thay đổi mã màu khác cho phù hợp với blog của bạn.
Nếu có vấn đề gì bạn để lại comment mình sẽ trả lời trong thời gian sớm nhất.
Chúc bạn thành công!
Nguồn: http://www.voquocan.com
