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

Nguyễn Đình Diện       Blogger , Blogspot , Thủ thuật Blogger , Thủ thuật Blogspot    Comment   

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!