Hỗ trợ trực tuyến

Tạo hiệu ứng hover phần post cho blogspot

Chào các bạn hôm nay mình sẽ hướng dẫn các bạn tạo hiệu ứng cho phần post của blogspot nhé.
Demo: Các bạn có thể xem tại blog của mình

HƯỚNG DẪN CÁCH LÀM:

Bước 1: Thêm toàn bộ code bên dưới vào phần post (thường là <article class='...'>)
<b:if cond='data:blog.pageType == "index"'>
<span class='natata'></span>
<span class='netete'></span>
<span class='nototo'></span>
<span class='nututu'></span>
</b:if>
Bước 2: Thêm đoạn đoạn css bên dưới lên thẻ ]]></b:skin>
.post .natata{-moz-transition:all 1s ease;-webkit-transition:all 1s ease;background:#2e2e2e;border-radius:2px;content:"";height:3px;left:0;position:absolute;top:0;width:0;z-index:9999}
.post:hover .natata{background:#00a2ff;width:100%}
.post .netete{-moz-transition:all 1s ease;-webkit-transition:all 1s ease;background:#2e2e2e;border-radius:2px;bottom:0;content:"";height:3px;position:absolute;right:0;width:0;z-index:9999}
.post:hover .netete{background:#00a2ff;width:100%}
.post .nototo{-moz-transition:all 1s ease;-webkit-transition:all 1s ease;background:#2e2e2e;border-radius:2px;bottom:0;content:"";height:0;left:0;position:absolute;width:3px;z-index:9999}
.post:hover .nototo{background:#00a2ff;height:100%}
.post .nututu{-moz-transition:all 1s ease;-webkit-transition:all 1s ease;background:#2e2e2e;border-radius:2px;content:"";height:0;position:absolute;right:0;top:0;width:3px;z-index:9999}
.post:hover .nututu{background:#00a2ff;height:100%}
Chúc bạn thành công!

Trần Thanh Bình

Muốn giỏi phải học, muốn học thì phải hỏi. Chính vì thế, hãy cùng tham gia thảo luận với nhau để tìm ra câu trả lời nếu có thắc mắc nhé!. Xem thêm về tôi


Cùng tham gia bình luận bài viết này nhé!

» Hãy là con người văn minh từ những câu nói

Loading...