Hiển thị đường dẫn liên kết cực đẹp khi rê chuột bằng CSS cho Blogspot

hien thi duong dan lien ket cuc dep khi re chuot bang css cho blogspot

Đây là một thủ thuật khá là thú vị giúp người đọc khi rê chuột vào một liên kết nào đó thì sẽ tự động hiện lên nội dung đường dẫn của liên kết đó. Điều này sẽ giúp cho người đọc biết là đường dẫn đó có nội dung như thế nào và có an toàn hay không.

Kiểu hiển thị này thì trên các trình duyệt cũng đã có sẵn rồi nhưng vì nó khá là nhỏ nên ít có bạn nào để ý tới. Do đó, với thủ thuật này bạn sẽ làm nổi bật đường dẫn hơn cái cách các trình duyệt đang làm mà chỉ bằng CSS thôi.

Để dễ hiểu hơn, bạn hãy di chuột vào liên kết bên dưới để xem thủ thuật này hoạt động như thế nào.

DEMO: Hiển thị đường dẫn liên kết cực đẹp khi rê chuột bằng CSS cho Blogspot

Bây giờ, chúng ta cùng bắt đầu thực hiện nhé!

Hiển thị đường dẫn liên kết cực đẹp bằng CSS

Bước 1. Đăng nhập tài khoản Blogger > Chủ đề > Chỉnh sửa HTML.

Bước 2. Thêm đoạn mã CSS dưới đây vào trước thẻ đóng ]]></b:skin>.

.post-body a::before {content:attr(href); float:none; clear:both; text-transform:none; padding:12px 5%; background:#069; color:#fff; font-family:monospace; font-size:14px; position:fixed; opacity:0; left:0; top:0; visibility:hidden; transform:scaleY(0); text-overflow:ellipsis; overflow:hidden; text-align:center; width:100%; transition:.2s ease-in-out; z-index:99999; margin: 0 auto}
.post-body a:hover::before {opacity:1; visibility:visible; transform:scaleY(1)}

Bước 3. Nhấn vào nút Lưu chủ đề để hoàn tất.

Chúc bạn thành công!