{Ji Nguyễn} Bài viết hôm nay mình chia sẻ cho các bạn thủ thuật để tạo hiệu ứng khá đẹp mắt cho hình ảnh trên Blog của bạn. Ưu điểm của thủ thuật này là chúng ta chỉ sử dụng CSS3 và HTML nên sẽ không làm ảnh hưởng đến tốc độ của blog nhiều. Tác dụng của thủ thuật này là khi bạn thiết lập 2 ảnh và rê chuột vào ảnh thì 1 ảnh sẽ được cuộn đi tạo một hiệu ứng rất đẹp chi hình ảnh.

Demo: 

Bắt đầu thủ thuật

1. Đăng nhập vào tài khoản Blogger
2. Vào phần Mẫu (Template)
3. Chọn chỉnh sửa HTML (Edit HTML)
4. Chèn tiếp code CSS bên dưới vào trước thẻ ]]></b:skin>

a.nowandthen{
position:relative;
display: block;
overflow:hidden;
cursor: pointer;
width: 650px;
height: 434px;
}
a.nowandthen img{
position:absolute;
left:0;
top:0;
width: 100%;
height: 100%;
-moz-transition: all 0.4s ease;
-webkit-transition: all 0.4s ease;
-o-transition: all 0.4s ease;
-ms-transition: all 0.4s ease;
transition: all 0.4s ease;
z-index: 2;
clip: rect(0,650px,434px,0);
}
a.nowandthen img:nth-of-type(2){
z-index: 1;
}
a.nowandthen:hover img:nth-of-type(1){
clip: rect(0,0,434px,0);
opacity: 0;
}

5. Save template lại và trở về phần bố cục (Layout)
6. Thêm 1 widget HTML/Javascript và thêm vào code bên dưới

<a class="nowandthen" href="Địa chỉ blog của bạn">
<img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiH72vZt7hD1h8hrvg2oiQbfbRU4wVN9OzQ5QBe6K-6szFh3viKzQeoqCA4iBOGHyF70CypIbQDQTwqgPliaBYQlbLqPu1e5xbgH-aYYDilbzHWBhAjksFBs8E0aVM8452q3bonPKpKD94/s1600/sunset-sunrise-btrix+(1).jpg" />
<img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzyXIHy9WB9EEuXf7rOEkjVva81N9afsrs6VFU9R9_C-tM4bMFu38bjRjo1M8pXloufwWn8V5bKk3I0Ee49nHTC1ccUBWSha6x13AXmWQgjlWXhu5M6YkCTIsbRZ2Vt5eDCMtaYEK55z8/s1600/sunset-sunrise-btrix+(2).jpg" />
</a>

7. Cuối cùng save tiện ích lại

Chúc bạn thành công!