(Traidatmui.com) – Bài viết hôm nay mình xin chia sẻ cùng các bạn code để có thể giúp các bạn tạo một số hiệu ứng cho hình ảnh trên blog rất dễ dàng. Ở đây chúng ta sử dụng JQuery để tạo một số hiệu ứng như shuffle, fade, zoom, turndown... Mỗi hiệu ứng thì có cách trình diễn khác nhau và nét đặc biệt riêng, bạn có thể ứng dụng các hiệu ứng này để đặt quảng cáo hay trình diễn ảnh trên blog của mình.» Bắt đầu thủ thuật
1. Đăng nhập vào tài khoản Blogger
2. Vào phần thiết kế (Design)
3. Chọn chỉnh sửa HTML (Edit HTML)
4. Chèn code bên dưới vào sau thẻ <head>
<script type="text/javascript" src="http://data-traidatmui.appspot.com/scripts/jquery.min.v1.4.1.js"></script>
<script type="text/javascript" src="http://data-traidatmui.appspot.com/scripts/jquery.cycle.all.min.2.73.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.imgslide').cycle({
fx: 'shuffle', //tên hiệu ứng
pause: 1,
});});
</script>
<script type="text/javascript" src="http://data-traidatmui.appspot.com/scripts/jquery.cycle.all.min.2.73.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.imgslide').cycle({
fx: 'shuffle', //tên hiệu ứng
pause: 1,
});});
</script>
Ở trên là chúng ta sử dụng hiệu ứng shuffle cho ảnh, ngoài hiệu ứng trên bạn cũng có thể sử dụng một số hiệu ứng khác bằng cách thay shuffle ở trong code thành một số hiệu ứng như: zoom, fade, turnDown, turnUp, turnLeft, turnRight, curtainX, scrollRight, blindX, blindY, blindZ, cover, curtainX, curtainY, fadeZoom, growX, growY, scrollUp, scrollDown, scrollLeft, scrollRight, scrollHorz, scrollVert, slideX, slideY, toss, uncover, wipe. Bạn có thể thay thế lần lượt để xem hiệu ứng của nó và chọn hiệu ứng ưng ý.
5. Save template lại
Bây giờ để gắn hiệu ứng này vào ảnh thì bạn hãy đặt ảnh vào trong thẻ DIV như bên dưới.
<div class="imgslide">
<a href="http://www.traidatmui.com/"><img src="https://lh5.googleusercontent.com/_9-sNIAfGhKg/Tc9_rXdIT0I/AAAAAAAAATk/XRL4gOL2_CM/back.png" width="586" height="162" alt="" /></a>
<a href="http://www.traidatmui.com"><img src="https://lh3.googleusercontent.com/_9-sNIAfGhKg/Tc9_oM3jxCI/AAAAAAAAATg/w02aBBZbjRI/sli.png" width="586" height="162" alt="" /></a>
</div>
<a href="http://www.traidatmui.com/"><img src="https://lh5.googleusercontent.com/_9-sNIAfGhKg/Tc9_rXdIT0I/AAAAAAAAATk/XRL4gOL2_CM/back.png" width="586" height="162" alt="" /></a>
<a href="http://www.traidatmui.com"><img src="https://lh3.googleusercontent.com/_9-sNIAfGhKg/Tc9_oM3jxCI/AAAAAAAAATg/w02aBBZbjRI/sli.png" width="586" height="162" alt="" /></a>
</div>
Như vậy là bạn đã có một số hiệu ứng khá đẹp mắt cho hình ảnh trên blog
0 nhận xét :
Đăng nhận xét