http://gaincapital-forex-com.blogspot.com/p/gioi-thieu-ve-thi-truong-forex.html
1. Đăng nhập vào tài khoản Blogspot
2. Vào thiết kế (Design) và chọn chỉnh sửa HTML
3. Thêm code bên dưới vào sau thẻ <head> hoặc trước thẻ </head>
<script type="text/javascript" src="http://traidatmui-tips.googlecode.com/files/jquery.min.js"></script>
<script type="text/javascript" src="http://traidatmui-tips.googlecode.com/files/fadeslideshow.js"></script>
<script type="text/javascript" src="http://traidatmui-tips.googlecode.com/files/fadeslideshow.js"></script>
4. Tiếp theo bạn chèn code css vào trước thẻ ]]></b:skin>
.imgarray {
background:#ccc; /* màu nền của tiện ích*/
width:600px; /*độ rộng của ảnh*/
height:480px; /*chiều cao của ảnh*/
border:1px solid #fff; /*đường viền của ảnh*/
padding:2px;
margin:0px;
}
.descpanelfg{
color:#fff; /*màu text mô tả*/
font:13px verdana;
background:#000; /*màu nền của phần mô tả*/
padding:5px 5px 8px 9px;
opacity:0.7;
border-top:1px solid #fff;
position:absolute;
left:0;
top:0;}
background:#ccc; /* màu nền của tiện ích*/
width:600px; /*độ rộng của ảnh*/
height:480px; /*chiều cao của ảnh*/
border:1px solid #fff; /*đường viền của ảnh*/
padding:2px;
margin:0px;
}
.descpanelfg{
color:#fff; /*màu text mô tả*/
font:13px verdana;
background:#000; /*màu nền của phần mô tả*/
padding:5px 5px 8px 9px;
opacity:0.7;
border-top:1px solid #fff;
position:absolute;
left:0;
top:0;}
5. Save template lại và trở về phần tử trang
6. Chọn thêm tiện ích và thêm phần tử Javascript/HTML
7. Thêm code bên dưới vào phần tử HTML trên
<script type="text/javascript">
var mygallery4=new fadeSlideShow({
wrapperid: "fadeshow4",
imagearray: [
["https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjm8ggpGz7IiKGPhMJwA-jSycTQYJQMHE4H5PRqGyAruvdFY1XqRLEXJFEq12XqmkFDrX6iV4PWTYdjir2VdHEqVX4ogJT3ypk90zsuXTMsbDXaDT3IC6_xN6JFudnyLBGO4yxygjIxMEM/s640/Chrysanthemum.jpg", "URL 1", "", "Phần dành cho mô tả ảnh 1"],
["https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkdj-DNizygawHENLdT156C-D1i2EzEBJUSCChsZGa3sBlm6M0GLwrjYp3a6Ap6cJH-eltgunriDdY-ocFKfqMbvObXURyWZE2xGDcfgxVOcOmpLk373MPRGoJIJfAYIe201OFPzGy00Y/s800/img7.jpg", "URL 2", "", "Phần dành cho mô tả ảnh 2"],
["https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgx2VP7bIBHuIpjQvTZZSw3wr8ToSRFbrmvEbECzGIDXOxdgAYPjNbjrkjcLg9lzNUB5_UZu_1OPHTPxwX5XxXI_UXgE31zoU4ZfpxcpIMaCV3Fwf6CjuRP-7SfW5AHD3aCqzsonxo473o/s800/img10.jpg", "URL 3", "", "Phần dành cho mô tả ảnh 3"],
["https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2w3pOztpcHQ64jDB3WXMrjgJLG1wBKoi_SDkVG_ZiVLz_eBkotv3qPPZgh9WXMBJiC9u9J8wxwGwl3NLMJpYmtUOu_YBpQmXtY7CnSIQl0yflbGeEcMF9n6soeCW0rEt3_dB4n_70fBc/s640/Desert.jpg", "URL 4", "", "Phần dành cho mô tả ảnh 4"]
],
dimensions: [605, 485], //độ rộng và chiều cao của tiện ích
displaymode: {type:'auto', pause:3000, cycles:0, wraparound:true},
persist: false,
fadeduration: 500,
descreveal: "peekaboo",
togglerid: ""
})
</script>
<div id="fadeshow4"></div>
var mygallery4=new fadeSlideShow({
wrapperid: "fadeshow4",
imagearray: [
["https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjm8ggpGz7IiKGPhMJwA-jSycTQYJQMHE4H5PRqGyAruvdFY1XqRLEXJFEq12XqmkFDrX6iV4PWTYdjir2VdHEqVX4ogJT3ypk90zsuXTMsbDXaDT3IC6_xN6JFudnyLBGO4yxygjIxMEM/s640/Chrysanthemum.jpg", "URL 1", "", "Phần dành cho mô tả ảnh 1"],
["https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkdj-DNizygawHENLdT156C-D1i2EzEBJUSCChsZGa3sBlm6M0GLwrjYp3a6Ap6cJH-eltgunriDdY-ocFKfqMbvObXURyWZE2xGDcfgxVOcOmpLk373MPRGoJIJfAYIe201OFPzGy00Y/s800/img7.jpg", "URL 2", "", "Phần dành cho mô tả ảnh 2"],
["https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgx2VP7bIBHuIpjQvTZZSw3wr8ToSRFbrmvEbECzGIDXOxdgAYPjNbjrkjcLg9lzNUB5_UZu_1OPHTPxwX5XxXI_UXgE31zoU4ZfpxcpIMaCV3Fwf6CjuRP-7SfW5AHD3aCqzsonxo473o/s800/img10.jpg", "URL 3", "", "Phần dành cho mô tả ảnh 3"],
["https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2w3pOztpcHQ64jDB3WXMrjgJLG1wBKoi_SDkVG_ZiVLz_eBkotv3qPPZgh9WXMBJiC9u9J8wxwGwl3NLMJpYmtUOu_YBpQmXtY7CnSIQl0yflbGeEcMF9n6soeCW0rEt3_dB4n_70fBc/s640/Desert.jpg", "URL 4", "", "Phần dành cho mô tả ảnh 4"]
],
dimensions: [605, 485], //độ rộng và chiều cao của tiện ích
displaymode: {type:'auto', pause:3000, cycles:0, wraparound:true},
persist: false,
fadeduration: 500,
descreveal: "peekaboo",
togglerid: ""
})
</script>
<div id="fadeshow4"></div>
Chỉnh code:
- Bạn hãy thay dòng màu cam ở trong code thành link ảnh của bạn
- Thay URL 1, URL 2... thành các link đường dẫn bạn muốn tạo cho ảnh tương ứng
- Thay phần mô tả cho ảnh tương ứng với ảnh của bạn
8. Save tiện ích lại
Lưu ý: Phần độ rộng (600px) và chiều cao (480px ) của ảnh và tiện ích ([605, 485])phải tương đồng với nhau.
Nếu bạn muốn phần mô tả chỉ hiển thị khi rê chuột vào ảnh thì bạn thay các code như sau
Thay mygallery4 thành mygallery2
Thay fadeshow4 thành fadeshow2
Thay peekaboo thành ondemand
Thay fadeshow4 thành fadeshow2
Thay peekaboo thành ondemand
Chúc bạn thành công
Previous Article
Share your views...
0 Respones to "Trình diễn (slideshow) ảnh tự động với hiệu ứng Jquery"
Đăng nhận xét