"Trình diễn ảnh dạng tự động lật trên Blogspot"

(Traidatmui.com) – Một cách trình diễn ảnh rất thú vị dạng lật trang, nó giống như chúng ta đang xem một cuốn Album hình ảnh. Ở đây các bức ảnh sẽ tự động lật và nó sẽ dừng khi bạn rê chuột vào ảnh. Cách này có thể giúp các blog chuyên về ảnh có thể trình diển ảnh trông bắt mắt hơn. Và dưới đây mình chia sẻ code cùng mọi người, nếu bạn không biết cách chèn code có thể xem chi tiết các bước ở dưới.

» 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">
var Book_Image_Width=300; //độ rộng của ảnh
var Book_Image_Height=400; //chiều cao của ảnh
var Book_Border=true;
var Book_Border_Color="#ccc"; //màu của border ảnh
var Book_Speed=15;
var Book_NextPage_Delay=1500;
var Book_Vertical_Turn=0;
Book_Image_Sources=new Array(

"https://lh4.googleusercontent.com/_BTztXRwC9ik/TTlhStYEDOI/AAAAAAAAGxA/6vIEcvUxGaA/s512/1.jpg","http://www.traidatmui.com/",
"https://lh3.googleusercontent.com/_BTztXRwC9ik/TTlhSyQiWGI/AAAAAAAAGxQ/GFsIxI8rGCk/s512/4.jpg","http://www.traidatmui.com/",
"https://lh5.googleusercontent.com/_BTztXRwC9ik/TTlhS13ANiI/AAAAAAAAGxI/YMt86nnWSGg/s512/3.jpg","http://www.traidatmui.com/",
"https://lh5.googleusercontent.com/_BTztXRwC9ik/TTlhTO9PDDI/AAAAAAAAGxY/llLnPaoCx6k/s512/5.jpg","http://www.traidatmui.com/",
"https://lh3.googleusercontent.com/_BTztXRwC9ik/TTlhTh8HOXI/AAAAAAAAGxg/7mM8aNSuGis/s512/6.jpg","http://www.traidatmui.com/"

);

</script>
<script src="http://data-traidatmui.appspot.com/scripts/bookimage.js" type="text/javascript"> </script>

Chỉnh code: Bạn thay các link ảnh màu đỏ và đường link dẫn tương ứng màu tím (bạn cũng có thể thay chúng thành dấu # nếu không muốn đặt liên kết cho ảnh). Lưu ý bạn có thể thêm nhiều ảnh hơn nhưng ảnh cuối cùng là không có dấu phẩy ( ,) theo sau.

5. Bạn tìm đến thẻ <body> và thay nó thành code bên dưới
<body onload='ImageBook()'>

6. Save template lại và trở về phần tử trang (Page Elements)
7. Thêm 1 HTML/Javascript và thêm vào code bên dưới
<div id="Book" style="height:400px;position:relative;"></div>

Lưu ý: Bạn nhớ đặt độ cao (400) trong code bằng với độ cao của ảnh của bước 4 thì nó sẽ không có khoảng trống thừa trong blog.

Chúc bạn thành công
Tham khảo code từ code1k.com

Xem khác cùng chủ đề

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

6/16/2011 03:42:00 SA Trả lời

blog của em ko có thẻ (body) đâu anh em CTrl+F nó chỉ ra thẻ này thôi:(body expr:class='"loading" + data:blog.mobileClass') và ngay sau thẻ trên là thẻ (div class='body-fauxcolumns')

Admin
6/16/2011 04:21:00 SA Trả lời

Do mỗi template nó sẽ thêm một số thành phần khác trong thẻ body, em có thể thay thế các thành phần trong thẻ body thành onload='ImageBook()'.

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