Kiến Thức Blogspot

Bạn muốn tạo sự khác biệt ở một bức ảnh nào đó mà không biết làm sao cho ấn tượng thì thủ thuật đơn giản sau sẽ giúp bạn giải quyết vấn đề đó.
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/AVvXsEgZqgB9Dg3vVx7pm0wUXURpwwtafZe2KkyjdF_VvWZxlNS1r3u_1nNEOfnjqigOmvBPVSOGblCXQeB_zPtMP5uBvJd5Mx5dShZii8sw54N38TEGe_rv-5MrvGVLIO9dWCjWnA23QkzA3XME/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/AVvXsEgZqgB9Dg3vVx7pm0wUXURpwwtafZe2KkyjdF_VvWZxlNS1r3u_1nNEOfnjqigOmvBPVSOGblCXQeB_zPtMP5uBvJd5Mx5dShZii8sw54N38TEGe_rv-5MrvGVLIO9dWCjWnA23QkzA3XME/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/AVvXsEgZqgB9Dg3vVx7pm0wUXURpwwtafZe2KkyjdF_VvWZxlNS1r3u_1nNEOfnjqigOmvBPVSOGblCXQeB_zPtMP5uBvJd5Mx5dShZii8sw54N38TEGe_rv-5MrvGVLIO9dWCjWnA23QkzA3XME/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/AVvXsEgZqgB9Dg3vVx7pm0wUXURpwwtafZe2KkyjdF_VvWZxlNS1r3u_1nNEOfnjqigOmvBPVSOGblCXQeB_zPtMP5uBvJd5Mx5dShZii8sw54N38TEGe_rv-5MrvGVLIO9dWCjWnA23QkzA3XME/s200/gobump.jpg" /></a></div>

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