Thủ thuật blogspot - Dautoblog

SlideShow Đơn Giản Có Chú Thích Và Gắn Liên Kết

SlideShow Đơn Giản Có Chú Thích Và Gắn Liên Kết
Bài này xin được chia sẻ một dạng slideshow trình chiếu hình ảnh đơn giản có chú thích cho ảnh và có gắn địa chỉ liên kết khi click vào ảnh nó sẽ chuyển tới 1 trang mà bạn muốn nhắm tới
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!
Comments blogger

Không có nhận xét nào :