![[BSW-02] BSW Facebook Parody V20 - The Best Facebook Template for Blogspot](http://2.bp.blogspot.com/-JDF8SBW7TVo/XQZsuZe8sSI/AAAAAAAAOys/8V-Qocq7csg7QqWOrwzMxoo6EzNZnPvtQCK4BGAYYCw/s1600/logo.jpg){kind=logo}
Thủ thuật hiện chi tiết đường link khi hover bằng CSS cho Blogspot
tháng 7 07, 2018 #CSS #Thủ Thuật Blogspot
Cách thực hiện
Thêm toàn bộ CSS bên dưới vào Template là xong!.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)
}
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 liên kết dưới đây hoặc bất cứ liên kết nào trong phần bài viết này.
Cách thực hiện
Thêm toàn bộ CSS bên dưới vào Template là xong!.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)
}