Làm cho nút "Read More..." (Đọc thêm) trông pro hơn
Modify "Read More" Buttom
[FD's BlOg] - Hôm nay mới ngồi chỉnh sửa giao diện, và có 1 chút kinh nghiệm mới chia sẻ 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 hơn, bắt mắt hơn.- Tiện ích "Read More..." là một trong những thủ thuật cơ bản đầu tiên của 1 blogger, nó không những tạo nên bố cục gọn gàng, mà còn giảm thiểu dữ liệu load trên trang chính.
- Như các bạn đã biết, 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.
Xem demo:
- Trước khi thực hiện việc này, bạn cần tạo 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.
Và một gợi ý nho nhỏ, ta 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.
Lưu ý : 2 ảnh phải có đồ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. (Phần này thiêng về thiết kế đồ họa). Và nếu ảnh để background thì phải cho trùng với background của bài viết. Tốt nhất không nên dùng background cho ảnh.
Và sau đây là cách thực hiện:
1. Đăng nhập blog.
2. Vào bố cục (Layout).
3. Vào chỉnh sửa Code HTML (Edit code HTML)
4. Nhấp chọn mở rộng tiện ích.
5. Chèn đọan code CSS 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;
background-image:url(link ảnh 1);
}
.readmore-fd:hover {
background-image:url(link ảnh 2);
}
Chú ý:width: 101px;
height: 24px;
display: block;
font-size: 10px;
text-decoration: none;
background-repeat:no-repeat;
background-image:url(link ảnh 1);
}
.readmore-fd:hover {
background-image:url(link ảnh 2);
}
- Đọan code màu đỏ chính là kích thước của ảnh.
- Thay code màu xanh bằng link hình của bạn.
6. Tìm đến đọan code sau :
<div class='post-body entry-content'>
<data:post.body/>
<span class='rmlink'><a expr:href='data:post.url'>Read More...</a></span>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>
7. Thay dòng code màu đỏ bằng dòng code bên dưới:
<a class='readmore-fd' expr:href='data:post.url'/>
8. Và nó sẽ trông giống như thế này:
<div class='post-body entry-content'>
<data:post.body/>
<span class='rmlink'><a class='readmore-fd' expr:href='data:post.url'/></span>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>
9. Save template lại. Như vậy đã xong.
Chúc các bạn thành công.
- Menu ngang co kèm hình ảnh bên cạnh rất đẹp
- Hiệu ứng Like page Facebook (FB), G+, twitter động cực đẹp cho Web, blogspot
- CSS3 với hiệu ứng hình ảnh động cực đẹp cho Web, blogspot
- Bài viết liên quan cho blogspot - Hiệu ứng ảnh thu nhỏ
- Thủ thuật thêm thống kê Blog 3 trong 1 cho blogspot
- Tạo thumbnail cho ảnh với CSS
- Kỹ thuật tạo bóng đổ cho ảnh hoặc cho các khối nội dung
- Kỹ thuật load ảnh trước bằng CSS
- CSS menu liDock - Một dạng menu Dock
- 4+ Hiệu ứng TEXT đơn giản từ CSS
- Menu dọc sổ ngang - Chỉ sử dụng CSS
- Bo 2 cạnh bên với CSS dùng hình ảnh
Comments[ 0 ]
Đăng nhận xét