Minh Vũ's Blog

Just another WordPress.com weblog

Làm cho nút “Read More…” (Đọc thêm) trông pro hơn

Posted by xpss on 27/01/2010

– 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.
– 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 ]]>:

  .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ú ý:
– Đọ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 :

 

Read More…

7. Thay dòng code màu đỏ bằng dòng code bên dưới:

8. Và nó sẽ trông giống như thế này:

 

9. Save template lại. Như vậy đã xong.

Chúc các bạn thành công.

Advertisements

Trả lời

Mời bạn điền thông tin vào ô dưới đây hoặc kích vào một biểu tượng để đăng nhập:

WordPress.com Logo

Bạn đang bình luận bằng tài khoản WordPress.com Log Out / Thay đổi )

Twitter picture

Bạn đang bình luận bằng tài khoản Twitter Log Out / Thay đổi )

Facebook photo

Bạn đang bình luận bằng tài khoản Facebook Log Out / Thay đổi )

Google+ photo

Bạn đang bình luận bằng tài khoản Google+ Log Out / Thay đổi )

Connecting to %s

 
%d bloggers like this: