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!