Yeah!Long Nhật
Thứ Ba, 21 tháng 2, 2017

Tạo nút readmore cho blogspot mới nhất

Tạo nút readmore cho blogspot mới nhất. Nút Read more (Đọc thêm hay đọc tiếp) một nút khá hữu ích trong blogger blogspot. Làm thế nào để tạo thêm một nút read more (đọc thêm) cho blogspot của bạn?

Hôm nay mình xin chia sẻ chút kinh nghiệm cho anh em. Bài viết này mình sẽ hướng dẫn cách làm cho liên kết (nút) "Read More..." trông đẹp và chuyên nghiệp hơn.

Read More là một trong những tiện ích cơ bản đầu tiên của blogger, nó không những tạo nên bố cục gọn gàng, chuyên nghiệp mà còn giảm thiểu dữ liệu load trên trang chính.

Thông thường sử dụng tiện ích "Read more..." khi cài vào mặc định nó là một link liên kết bằng chữ bình thường. Hôm nay mình sẽ hướng dẫn các bạn thay đổi nó thành một liên kết hình ảnh và kèm theo hiệu ứng

Các bạn có thể xem thử nhé: Xem Demo

Để làm được việc này, bạn cần tạo cho mình 2 ảnh dạng nút nhấn (kiểu buttom):
Ảnh 1 : Là ảnh sẽ hiển thị khi ta chưa rê chuột vào.
Ảnh 2 : Là ảnh sẽ hiển thị khi ta rê chuột vào.

Note: Bạn nên tạo 2 ảnh có cùng 1 màu, và ảnh 1 có màu sậm hơn, ảnh 2 có màu nhạt hơn, khi đó ta rê chuột vào sẽ có cảm giác ảnh bị mờ đi, trông cũng khá đẹp. 2 ảnh phải đồng nhất về kích thước cũng như đồng nhất về khung ảnh, tức là các điểm ảnh tương tự nhau phải nằm ở những vị trí tương tự nhau. Khi đó ta rê chuột vào sẽ không tạo ra cảm giác ảnh bị dịch chuyển.

Các bước thực hiện như sau:
1. Đăng nhập blog.
2. Vào Mẫu
3. Vào chỉnh sửa Code HTML
4. Nhấn Ctrl F Chèn đọan code bên dưới lên ngay trên dòng ]]></b:skin>:

.readmore-fd {
width: 101px;
height: 24px;

display: block;
font-size: 10px;
text-decoration: none;
background-repeat:no-repeat;

box-shadow:0px 5px 3px -1px rgba(50, 50, 50, 0.53);
background-image:url(link ảnh 1);
}
.readmore-fd:hover {
background-image:url(link ảnh 2);
}

Trong đó:
Đọan code màu đỏ là kích thước của ảnh.
Thay code màu xanh bằng link hình của bạn.

Tiếp theo Ấn Ctrl + F tìm tới <data:post.body/> chèn đoạn code ngay phía sau nó:

<b:if cond='data:blog.pageType != &quot;static_page&quot;'> 
<b:if cond='data:blog.pageType != &quot;item&quot;'> 
<div class='readmore'>
<a class='readmore-fd' expr:href='data:post.url'/> 
</div> 
</b:if> 
</b:if>

Cuối cùng nhấn Save để lưu lại và tận hưởng thành quả nhé.
Chúc bạn thành công!