Xem thử:
DEMO
làm thế nào để áp dụng vào blogger
Bước 1:Muốn tạo được Slideshow trên điều đầu tiên Blog của bạn cần có thư viện Jquery.Vậy ta cần thêm đoạn mã sau vào trước thẻ </head>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js' type='text/javascript'/>Nếu Blog đã có thư viện Jquery rồi thì bỏ qua bước này.
Bước 2:
Tại phần đăng bài mới bên HTML hoặc ở phần thêm tiện ích HTML/javascript ta sử dụng code sau
<style type="text/css>
#slider {
overflow: hidden;
width: 500px;/*Chiều rộng Slider*/
height: 300px;/*Chiều cao Slider*/
border:3px solid #b8b8b8;
border-radius: 40px;
margin: 0 auto;
padding: 0;
position: relative;
}
#slider p {
position: absolute;
bottom:0px;
left: 0;
display: block;
width: 400px;/*Chiều rộng băng chú thích*/
height: 24px;/*Chiều cao băng chú thích*/
margin:0;
padding: 5px 0;
color: #eee;
background: #990000;/*Màu nền băng chú thích*/
font-size: 22px;/*Cỡ chữ*/
line-height:22px;
text-align:center;
}
</style>
<script type="text/javascript">//<![CDATA[
$(function(){
$('#slider div:gt(0)').hide();
setInterval(function(){
$('#slider div:first-child').fadeOut(0)
.next('div').fadeIn(1000)
.end().appendTo('#slider');}, 4000);
});
//]]></script>
<div id="slider">
<div><a href="Link_URL1"><img src="Image_URL1" /></a><p>CHÚ THÍCH 1</p></div>
<div><a href="Link_URL2"><img src="Image_URL2" /></a><p>CHÚ THÍCH 2</p></div>
<div><a href="Link_URL3"><img src="Image_URL3" /></a><p>CHÚ THÍCH 3</p></div>
</div>
Trong đó:Link_URL1:Là link liên kết cần tới
Image_URL1: Là link ảnh
CHÚ THÍCH 1: Chú thích cho ảnh
Muốn thêm bao nhiêu ảnh là tùy yêu cầu của bạn.Ta chỉ việc thêm
<div><a href="Link_URL"><img src="Image_URL" /></a><p>CHÚ THÍCH </p></div>Chúc thành công!