Thủ thuật hiện chi tiết đường link khi hover bằng CSS cho Blogspot

Quản trị viên tháng 7 07, 2018 #CSS #Thủ Thuật Blogspot

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.

Hover Me

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)
}

Hover Me

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)
}

Chia sẻ

Bài Liên Quan Tác Giả

Huỳnh Phụng Blogger

Tôi thích viết Blog để chia sẻ trãi nghiệm của chính mình. Tôi làm việc về Digital Marketing (SEO, Google Adwords, Facebook) và hy vọng sẽ có cơ hội hợp tác với bạn trong tương lai. Cùng chia sẻ kinh nghiệm mình có được