Thủ thuật sử dụng CSS hiển thị link tuyệt đẹp khi hover

#Thủ Thuật #Windows #Blogger #Facebook

Thủ thuật sử dụng CSS hiển thị link tuyệt đẹp khi hover

Share:
Thủ thuật này mình cũng không biết phải miêu tả như thế nào. Đơn giản là hiển thị link khi bạn rê chuột vào một liên kết trong blog, để hiểu rõ hơn thì xem demo ngay tại đây. Rê chuột vào 3 liên kết dưới đây hoặc bất cứ liên kết nào trong blog mình tại bài viết này.
Để thực hiện, các bạn làm như sau.
Bước 1: Đăng nhập Blogger Mẫu Chỉnh sửa HTML.
Bước 2: Dán đoạn CSS dưới vào sau thẻ <body> trong template.
.post-body a::before{
content: attr(href);
float: none;
clear: both;
font-size: 22px;
font-family: "Roboto",sans-serif;
font-weight: 300;
text-transform: none;
padding: 15px 0;
background: #fff;
color: #55579e;
border-radius: 0;
position: fixed;
opacity: 0;
left: 0;
top: 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: 999;
margin: 0 auto;
}
.post-body a:hover::before{
opacity:1;
visibility:visible;
transform:scaleY(1)
}
Bước 3: Lưu template.
CHUYÊN MỤC

Bài Viết Liên Quan

Bình Luận Gần Đây

Một số lưu ý khi bình luận
● Mọi bình luận sai nội quy sẽ bị xóa mà không cần báo trước.
● Tích vào ô Thông báo cho tôi (Notify me) để nhận thông báo phản hồi của Admin.
● Không chửi tục, nói bậy, quảng cáo thông qua khung Comment.
● Để bình luận một đoạn code, hãy mã hóa code trước nhé.