Hiển thị đường Link khi Hover vào đường dẫn trong bài viết cho Blogspot

Share

Tweet

Google+

Email

Bài viết này mình sẽ chia sẻ cho mọi người một thủ thuật nhỏ. Đó là khi người dùng rê chuột vào 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 cụ thể lên. 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ể xem demo và hướng dẫn dưới đây của mình. Bạn biết CSS thì bạn có thể tùy biến theo cách của bạn để phù hợp hơn.

Kiểu thứ nhất

Hover view demo

Để 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ã dưới đây lên trên thẻ ]]></b:skin> là xong

.post-body a::before {
 content: attr(href);
 float: none;
 clear: both;
 font-size: 18px;
 font-family: "Roboto", sans-serif;
 font-weight: bold;
 text-transform: none;
 padding: 10px 5px;
 border-top:2px dashed #55579e;
 background: #fff;
 color: #55579e;
 border-radius: 0;
 position: fixed;
 opacity: 0;
 left: 0;
 bottom: 0;
 visibility: hidden;
 transform: scaleY(0);
 text-overflow: ellipsis;
 overflow: hidden;
 white-space: nowrap;
 text-align: center;
 width: 100%;
 transition: .3s ease-in-out;
 z-index: 9999;
 margin: 0 auto;
}
.post-body a:hover::before {
 opacity: 1;
 visibility: visible;
 transform: scaleY(1)
}

Kiểu thứ hai

Hover view demo

Cũng như ở trên bạn chỉ cần chèn đoạn mã dưới đây lên trên thẻ ]]></b:skin> là xong

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

Lời kết

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úc bạn thành công!

ĐIỀU KHOẢN SỬ DỤNG

1. Blog chúng tôi hoạt động hoàn toàn tự nguyện nhằm mang đến cho các bạn sự trải nghiệm tốt nhất.
2. Các tập tin được cung cấp link tải miễn phí.
3. Mọi người có thể chia link tải từ Blog chúng tôi qua các trang hoặc diễn đàn khác mà không phải xin phép tác giả hoặc ghi nguồn.
4. Chúng tôi không chịu trách nhiệm với lỗi phát sinh trong quá trình sử dụng tập tin.
5. Nếu các bạn gặp khăn có thể liên hệ trực tiếp với chúng tôi.

Bài đăng mới hơn Bài đăng cũ hơn