"Tạo ảnh chạy xoay tròn trên blog bằng Javascript"

(Traidatmui.com) – Lướt web mình thấy ở trang nsvina.com có một cách trình diễn ảnh cũng khá là đẹp mắt nên mình xin chia sẻ cùng các bạn thủ thuật này. Với thủ thuật này thì hình ảnh sẽ chạy dạng xoay tròn, nó trông đẹp hơn thủ thuật trước mình giới thiệu đến các bạn. Các bước để thực hiện thủ thuật này cũng không quá phức tạp, mình sẽ hướng dẫn bạn chi tiết hơn bên dưới.

1. Đầu tiên bạn đăng nhập vào tài khoản blogger
2. Vào phần thiết kế (Design) chọn chỉnh sửa HTML
3. Thêm code bên dưới vào trước thẻ </head>
<script src='http://data-traidatmui.appspot.com/scripts/circle_img.js' type='text/javascript'/>

4. Save template lại và trở về phần tử trang và thêm 1 HTML/Javascript
5. Thêm code bên dưới vào phần tử vừa thêm ở trên
<script type='text/javascript'>
carousel({id:'',
border:'',
size_mode:'image',
width:200, //độ rộng của ảnh trình diễn
height:163, //chiều cao của ảnh trình diễn
sides:12,
steps:23,
speed:3, //tốc độ trình diễn
direction:'left', //hướng chạy của ảnh bạn có thể đổi thành RIGHT

images:[
'http://4.bp.blogspot.com/_BTztXRwC9ik/THvCQszMpWI/AAAAAAAADGw/uUbKpD_a_ec/s400/5.jpg',
'http://1.bp.blogspot.com/_BTztXRwC9ik/THvCPXDGxGI/AAAAAAAADGg/PP4bU07hP9Q/s400/3.jpg',
'http://2.bp.blogspot.com/_BTztXRwC9ik/S678oe6sZeI/AAAAAAAABgI/eVavVzpYUP8/s400/5.jpg',
'http://2.bp.blogspot.com/_BTztXRwC9ik/S678oCIZN3I/AAAAAAAABgA/Yn5aah3ouRY/s400/4.jpg',
'http://3.bp.blogspot.com/_BTztXRwC9ik/S678nhqE1MI/AAAAAAAABfw/ljXml7d86II/s400/2.jpg',
'http://1.bp.blogspot.com/_BTztXRwC9ik/S68Fh4jINeI/AAAAAAAABlI/BN-uzLxtOFo/s400/3.jpg',
'http://1.bp.blogspot.com/_BTztXRwC9ik/S68FhP2n_hI/AAAAAAAABk4/oCkDIeHbQBU/s400/5.jpg',
'http://1.bp.blogspot.com/_BTztXRwC9ik/S68FoihVRQI/AAAAAAAABlY/bFjQpvLuqFQ/s400/2.jpg'
],

links: [
'http://www.traidatmui.com',
'http://www.traidatmui.com',
'http://www.traidatmui.com',
'http://www.traidatmui.com',
'http://www.traidatmui.com',
'http://www.traidatmui.comL',
'http://www.traidatmui.com',
'http://www.traidatmui.com'
],

titles:[
'traidatmui.com',
'traidatmui.com',
'traidatmui.com',
'traidatmui.com',
'traidatmui.com',
'traidatmui.com',
'traidatmui.com',
'traidatmui.com'
],
image_border_width:1,
image_border_color:'transparent'
});
</script>

Chỉnh code:
- Dòng màu cam chính là link của các hình ảnh trình diễn trong tiện ích này, bạn thay thành những địa chỉ hình ảnh của bạn.
- Thay http://www.traidatmui.com màu xanh đậm trong code thành đường dẫn của ảnh tương ứng.
- Cuối cùng là phần Title là tiêu đề mô tả cho ảnh (dòng màu đỏ), phần này sẽ hiển thị khi bạn rê chuột vào ảnh, bạn hãy thay đổi tương ứng với ảnh của bạn.

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

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

Xem khác cùng chủ đề

5 nhận xét | Viết lời bình

10/12/2010 11:49:00 SA Trả lời

bạn ơi sao toi không làm đươc hình xoay nhu ban làm vậy. bạn text lại đi và hướng dẫn kỷ hơn

Admin
10/13/2010 05:26:00 SA Trả lời

Vâng cảm ơn bạn đã thông báo lỗi. Traidatmui đã test và đã khắc phục lỗi của thủ thuật này, bây giờ thủ thuật đẫ hoạt động tốt rồi bạn ah :D.

Thân!

10/14/2010 08:07:00 CH Trả lời

cái này khi chèn vào slidebar xong tại sao nó lại lòi ra một khoảng trống phía dưới vậy Dinh,không dung với chiều cao của slidebar mà mình đã set

Admin
10/14/2010 09:51:00 CH Trả lời

AnhVan set chiều cao là bao nhiêu? TDM đã test thử chiều cao nhỏ mà vẫn không thấy vấn đề mà AV nói. Nếu có vấn đề thì AV nói rỏ hơn để TDM khắc phục nha. Cảm ơn!

Thân!

10/15/2010 12:51:00 SA Trả lời

Cuối cùng mới biết nó bị xung đột với một số đoạn javascript mà mình đã chèn trước đó,tháo cái cũ ra chèn nó vào ngon lành.Thủ thuật test xong thấy hoàn chỉnh.Thanks

Bạn nhập từ: cungly Bạn nhập từ: lleu Bạn nhập từ: kkrong Bạn nhập từ: cuoilon Bạn nhập từ: roile Bạn nhập từ: hehehe Bạn nhập từ: byebye Bạn nhập từ: idontknow Bạn nhập từ: votay more »

Giải pháp bán hàng online Số 1 Việt Nam
Lên đầu trang Xuống cuối trang