Hiệu ứng nở hoa cho hình ảnh
Trước tiên bạn thử rê chuột vào hình ảnh bên dưới xem coi nó như thế nào?
Bạn có thích hiệu ứng này không?
Vâng, nếu bạn thích thì hãy làm theo các bước sau đây:
- Đặt đoạn code sau đây vào trước thẻ ]]></b:skin>
.gobump img{
border: 1px solid #ccc;
float: left;
margin: 15px;
-webkit-transition: margin 0.5s ease-out;
-moz-transition: margin 0.5s ease-out;
-o-transition: margin 0.5s ease-out;
border-radius: 5px 5px 5px 5px;
}
.gobump img:hover {
margin-top: 2px;
Xong rồi bạn lưu template lại.
Bây giờ mỗi khi bạn post ảnh, ảnh sẽ có dạng như thế này:
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3DmUXKL8nTrb7T5dvrTs6KakAVtyb130CAemXwnY1XbtEPEjWlEKSYnsRSx-SFDNm3hY5bA3KiGLXYlJiB8Ls1j0aULjZWL4HEI5zp6R54mV4AQ6ZQrDEShgfQIKEoBvJ79x5QDUsouuh/s1600/gobump.jpg" imageanchor="1" style="clear:left; float:left;margin-right:1em; margin-bottom:1em"><img border="0" height="167" width="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3DmUXKL8nTrb7T5dvrTs6KakAVtyb130CAemXwnY1XbtEPEjWlEKSYnsRSx-SFDNm3hY5bA3KiGLXYlJiB8Ls1j0aULjZWL4HEI5zp6R54mV4AQ6ZQrDEShgfQIKEoBvJ79x5QDUsouuh/s200/gobump.jpg" /></a></div>
Bạn chỉ cần thêm vào như sau:
<div class="separator" style="clear: both; text-align: center;">
<a class="gobump" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3DmUXKL8nTrb7T5dvrTs6KakAVtyb130CAemXwnY1XbtEPEjWlEKSYnsRSx-SFDNm3hY5bA3KiGLXYlJiB8Ls1j0aULjZWL4HEI5zp6R54mV4AQ6ZQrDEShgfQIKEoBvJ79x5QDUsouuh/s1600/gobump.jpg" imageanchor="1" style="clear:left; float:left;margin-right:1em; margin-bottom:1em"><img border="0" height="167" width="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3DmUXKL8nTrb7T5dvrTs6KakAVtyb130CAemXwnY1XbtEPEjWlEKSYnsRSx-SFDNm3hY5bA3KiGLXYlJiB8Ls1j0aULjZWL4HEI5zp6R54mV4AQ6ZQrDEShgfQIKEoBvJ79x5QDUsouuh/s200/gobump.jpg" /></a></div>
Chúc các bạn thành công!
@Quan Pham Đang nghiên cứu coi làm cái menu kiểu nào cho nó đẹp, tạm thời để xài đỡ :)
@May Thy Hôm trước mình có báo, có lẽ do sót :)
test