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.

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

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!

2 bình luận

  1. avatar says

    18:17 Ngày 17 tháng 09 năm 2014

    mình kết họp giữa 2 bài viết hiện link và phóng to ảnh khi rê chuột vào thì xảy ra lỗi liên kết hiện lên nằm phía dưới ảnh khi phóng to. Sửa lại như thế nào để cho link hiên lên trên
    LINK

  2. avatar says

    19:46 Ngày 17 tháng 09 năm 2014

    Cái này mình chịu thôi, xóa link của ảnh đi là chắc ăn nhất, tại phần css trên mình làm chung cho thẻ a rồi, nếu làm riêng phải tự thêm thuộc tính vào từng thẻ a thì mệt lắm.

Mọi nhận xét trên blog KslZone.NET sẽ được kiểm duyệt trước khi được xuất bản trên blog. Lưu ý: Nếu bạn để lại backlink về website của bạn, miễn là kèm theo nhận xét hợp lý thì nhận xét đó vẫn sẽ được chấp nhận. Nếu bạn muốn hiện mã HTML thì bạn cần chuyển đổi trước bằng công cụ phía dưới.