Tạo ảnh chạy xoay tròn trên blog bằng Javascript |Blog Trần Phúc Minh

Trang chủ » Thủ thuật Blogger » Bạn đang xem:

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

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://tranphucminh.googlecode.com/files/xoaytronanh.js.txt' 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:1, //tốc độ trình diễn
direction:'left', //hướng chạy của ảnh bạn có thể đổi thành RIGHT

images:[
'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDNVVhjYlnamlXkUP-n0UTfEMubl3qPRJJLWdu0IQSwYxJ0YTQMJzGXxTEt7qVOj8bEk__r0GPH5HGvJaAKNUJ4eY6nYV93nHGC_gZJO-maZhFoY6xng9eln375NhxE2hXYfwzVkisixY/s1600/cooltext467203564.png',
'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhF8gkH7WBHP-L27QLL0Zpfbsgptsv2p0XF_PWzCI8AZuGQQpyDSK-4cj9hKuSvpbJlYLscZVaDAoAzqGG557BcLxWomg7NWwLdvJfv9kud1cHph1vRvONGgVEMFNZDlz5YtW80HvEfVZnl/s400/3.jpg',
'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxjLjw44IuUAdobDNTCWlrh8oAU6o707A0-ie0yzAkxUTMR_fstUdUSlJpMaopnPtp8o27J-242lCAq3HCMD6M4_DLfBvgW7cRnwPcq3A7ZZVCnogGS6xSWTTfG12dRocF-oAf4d2SS8Aw/s400/5.jpg',
'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj87oT1yWeEzCeaC-5OgRq6EE-p2ImYSBkAkdghSiwvmL9iD1ixtu9M9we309q5vqZ0zYir25CXd7NmaZhgkTGbP22ce8vXPX5KN5s-JwhUHhq0yA2bBBGBw9quBqz1JhfsnQFwnXW5zI8r/s400/4.jpg',
'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkLLUSX3PIqPU6OljVwzA3MHMCjGmKaQa1a_Nbnfy4oVOvct-Ot3xMU0rXNpX73oBKFHzgRiYwqsVKlc7E4Ua75f-j0huWEFw2fNXyDiVVApcFZg948NMMlJQn4ByCrMmz-K6Cn1mIyZfc/s400/2.jpg',
'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-xEIPK4H0OCqp-X8A1e0j4PLldOS6Q-qaqaWUi7ZQwBaczUeFSCrTM_DrkPTwGRi-auA1HUUttu5W0_CXD5HY2Z-qtu_a-QQSaHf-rK4QrbU_UeYW-gajNijfZF3ggSIL2XMqOaN4ksP1/s400/3.jpg',
'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcy4LJRh3opEkS_qNZ6UTItSBysknl3Ijm0kZqsQYVl_8nKKrZdgid7aZIW0BRiuY-GRYww117hYtRe5UMUNgFs4SwWZqKQQd9BsHwBCP3krV_cHioyHc5eGgEoiCABVkKONnoWu6kgLiu/s400/5.jpg',
'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhigBmow4E8SySncn7I8NYefeSwScndkI6L7EzeYTtLihyYCOZYPCAjJoVStCANgoWRpK9Knky4Z6jkoBSE2epQUSYluGsL65llBsXC_gP495e0eGXmdVo2QBkeJ0gAg0EoRxCnbnIYKs8N/s400/2.jpg'
],

links: [
'http://tranphucminh.blogspot.com/search/label/Nh%E1%BA%A1c',
'http://tranphucminh.blogspot.com/search/label/C%C3%B4ng%20ngh%E1%BB%87%20TT',
'http://tranphucminh.blogspot.com/search/label/Phim',
'http://tranphucminh.blogspot.com/search/label/Th%E1%BB%A7%20thu%E1%BA%ADt%20Blogger',
'http://tranphucminh.blogspot.com/search/label/V%C4%83n%20b%E1%BA%A3n%20PL%20n%C4%83m%202010',
'http://tranphucminh.blogspot.com/search/label/Cu%E1%BB%99c%20s%E1%BB%91ng',
'http://tranphucminh.blogspot.com/search/label/PTLB-TKCN-2010',
'http://tranphucminh.blogspot.com/search/label/T%C3%A0i%20li%E1%BB%87u',
],

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

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

Chúc bạn thành công. Nguồn: Traidatmui.com

Bài gốc:
http://tpm1512.blogspot.com/2010/11/tao-anh-chay-xoay-tron-tren-blog-bang.html

Từ khóa
Thủ thuật Blogger

Minh cám ơn bạn đã quan tâm và rất vui vì bài viết đã đem lại thông tin hữu ích cho bạn.

All comments [ 2 ]

Anonymous lúc 13:45 1 tháng 11, 2011

bạn nên có sản phẩm cho mọi người xem

Anonymous lúc 22:17 25 tháng 2, 2012

nếu bạn đã viết thủ thuật thỳ nên hướng dẫn cụ thể cho mọi người cùng làm .đơn giản là cụ thể hơn khi có DEMO ,
cảm ơn bạn
p/s :m cũng chỉ góp ý vậy .thnks

Blog Trần Phúc Minh