Trình diễn ảnh dạng tự động lật trên Blogspot
Điểm 4.6/5 dựa vào 87 đánh giá
(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>
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
Chuyên mục:
Blogspot cơ bản
![Phim Khúc Ca Cho Tình Nhân [32/32 Tập] Trọn Bộ Online](http://1.bp.blogspot.com/-0lPFnc_UVq0/TrVDZU6vbcI/AAAAAAAABUU/TTJlcT09M3U/s72-c/Khuc-ca-cho-tinh-nhan.jpg "Phim Khúc Ca Cho Tình Nhân [32/32 Tập] Trọn Bộ Online")
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')
Trả lờiXóaDo 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()'.
Trả lờiXóa