Hiện địa chỉ liên kết khi rê chuột vào link bằng CSS

Như hầu hết mọi người cũng biết, hiện tại thì thẻ đối với những link mà chúng ta sử dụng cho website thường thì trông khá là vô vị. Hầu hết thì chỉ có màu sắc khác với màu chữ bình thường, và nhiều lắm khi rê chuột vào chúng đổi màu. Cũng mới gần đây đảo lục lọi lại mấy bài viết cũ trên blog thì mình biết được bắt gặp một thứ khá hay ho từ CSS3 đó là thuộc tính content.

Thuộc tính này có thể giúp cho bạn thay đổi hoặc thêm vào nội dung cho một thuộc tính bất kì tại phần thẻ HTML, ví dụ như bài viết "Thay đổi avatar mặc định của phần nhận xét Blogger", mình sử dụng CSS3 như một thẻ điều kiện thay thé đi hình ảnh avatar mặc định của khu vực nhận xét. Bạn nào có quan tâm về css thì mình sẽ có bài viết hướng dẫn sau.


Từ 2 điều này mình nảy ra ý tưởng làm một thứ gì đó cho bớt nhàm chán và có phần khá hữu dụng cho nhưng link mà chúng ta chèn vào bài viết. Đó chính là khi người dùng rê chuột vài link mà chúng ta chèn vào bài viết thí nó sẽ hiển thị địa chỉ liên kết đó đi đâu. Mặc dù hầu hết mọi trình duyệt cũng sẵn đã hiện địa chỉ tại một góc nhỏ của nó, nhưng việc thêm vào như thế này sẽ làm cho người dùng dễ dàng nhìn thấy hơn và có phần đẹp hơn nữa.

Bạn có thể trỏ chuột vào link ở trên để xem demo, link hơi dài nên tương đối xấu nên bạn có thể rê chuột vào thử demo khác ở đây kslzone.

Hiện địa chỉ liên kết khi rê chuột vào link
Để thêm hiệu ứng nhỏ này vào Blogger / Blogspot thì khá đơn giản bạn chỉ cần chèn đoạn mã này lên trên thẻ ]]></b:skin> là xong

.post-body a { position:relative; }
.post-body a::before {
content:attr(href);
font-size:11px;
line-height:11px;
font-family:Arial,sans-serif;
text-transform:none;
padding:8px 12px;
top:-34px;
right:0px;
transition:.3s ease-out;
background:#222;
color:#fff;
border-radius:5px;
position:absolute;
opacity:0;
visibility:hidden;
}
.post-body a::after {
content:" ";
width:0;
height:0;
right:10px;
top:-7px;
transition:.3s ease-out;
border-color:#222 transparent transparent;
border-style:solid;
border-width:6px 6px 0;
position:absolute;
opacity:0;
visibility:hidden;
}
.post-body a:hover::before, .post-body a:hover::after {
opacity:1.5;
visibility:visible;
}

Bạn nào biết css thì có thể tự chỉnh lại cho đẹp hơn nhé tại mình thấy nó vẫn chưa được đẹp lắm ^^. Sau khi hoàn tất thì lưu lại. Nếu bạn nào có ý kiến hay hơn về giao diện hãy đóng góp với mình hoặc nếu bất chợt mình có ý tưởng mình sẽ cập nhật đoạn mã này cho nó đẹp hơn. Chú bạn thành công!