Liên kết dịch chuyển layer với CSS3
Bước thực hiện như sau:
CSS
- Bạn đăng nhập vào Blogspot
- Chọn đến Mẫu -> Chỉnh sửa HTML -> Tìm đến đoạn mã ]]></b:skin> ( Dùng tổ hợp phím Ctrl + F tìm cho nhanh)
- Sau đó bạn dán toàn bộ Code phía dưới vào ngay trên thẻ ]]></b:skin>. Lưu lại
ul.nudging {
margin:10px 10px;
padding:0px 0px;
font:normal 14px Comic Sans;
}
ul.nudging li {
list-style:none;
margin:0px 0px;
padding:0px 0px;
}
ul.nudging li a {
text-decoration:none;
display:block;
overflow:hidden;
padding:5px 10px;
color:black;
background-image:-webkit-linear-gradient(left,transparent,transparent 30%,rgba(179,189,245,0.4));
background-image:-moz-linear-gradient(left,transparent,transparent 30%,rgba(179,189,245,0.4));
background-image:-ms-linear-gradient(left,transparent,transparent 30%,rgba(179,189,245,0.4));
background-image:-o-linear-gradient(left,transparent,transparent 30%,rgba(179,189,245,0.4));
background-image:linear-gradient(left,transparent,transparent 30%,rgba(179,189,245,0.4));
-webkit-background-size:200% 100%;
-moz-background-size:200% 100%;
background-size:200% 100%;
-webkit-transition:all 0.29s ease-out;
-moz-transition:all 0.29s ease-out;
-ms-transition:all 0.29s ease-out;
-o-transition:all 0.29s ease-out;
transition:all 0.29s ease-out;
}
.nudging li a:hover {
background-position:100% 100%;
padding-left:15px;
}
HTML
Bạn muốn hiển thị Liên kết ở bất kỳ vị trí nào của Blog thì bạn vào phần Bố Cục -> Thêm một tiện ích HTML và dán code như sau:<ul class="nudging">Demo
<li><a href="#">Nhạc Trẻ</a></li>
<li><a href="#">Nhạc Vàng</a></li>
<li><a href="#">Hip Hop</a></li>
<li><a href="#">Dance</a></li>
<li><a href="#">House</a></li>
</ul>
