Tạo Slideshow ảnh đẹp cho Blogspot

Bắt đầu thủ thuật
demo

1. Đăng nhập vào tài khoản Blogger

2. Vào phần Mẫu (Template)

3. Chọn chỉnh sửa HTML (Edit HTML)

4. Chèn tiếp code CSS bên dưới vào trước thẻ ]]></b:skin>

#slider{ width:660px;height:275px;position:relative;overflow:hidden;-moz-box-shadow:0 0 6px #000;-webkit-box-shadow:0 0 6px #000;box-shadow:0 0 6px #000}
#mask-gallery{overflow:hidden}
#gallery{list-style:none;margin:0;padding:0;z-index:0;width:900px;overflow:hidden}
#gallery li{float:left}
#mask-excerpt{position:absolute;top:0;left:0;z-index:500;width:100px;overflow:hidden}
#excerpt{filter:alpha(opacity=60);-moz-opacity:0.6;-khtml-opacity:0.6;opacity:0.6;list-style:none;margin:0;padding:0;z-index:10;position:absolute;top:0;left:0;width:100px;background-color:#000;overflow:hidden;font-family:arial;font-size:14px;color:#fff}
#excerpt li{padding:5px}
.clear{clear:both}
#btn-prev{border-top:1px solid #96d1f8;background:#65a9d7;padding:4px 8px;-webkit-border-radius:8px;-moz-border-radius:8px;border-radius:8px;-webkit-box-shadow:rgba(0,0,0,1) 0 1px 0;-moz-box-shadow:rgba(0,0,0,1) 0 1px 0;box-shadow:rgba(0,0,0,1) 0 1px 0;text-shadow:rgba(0,0,0,.4) 0 1px 0;color:white;font-size:9px;font-family:Georgia,serif;text-decoration:none;vertical-align:middle}
#btn-prev:hover{border-top-color:#28597a;background:#28597a;color:#ccc}
#btn-prev:active{border-top-color:#238acf;background:#238acf}
#btn-next{border-top:1px solid #96d1f8;background:#65a9d7;padding:4px 8px;-webkit-border-radius:8px;-moz-border-radius:8px;border-radius:8px;-webkit-box-shadow:rgba(0,0,0,1) 0 1px 0;-moz-box-shadow:rgba(0,0,0,1) 0 1px 0;box-shadow:rgba(0,0,0,1) 0 1px 0;text-shadow:rgba(0,0,0,.4) 0 1px 0;color:white;font-size:9px;font-family:Georgia,serif;text-decoration:none;vertical-align:middle}
#btn-next:hover{border-top-color:#28597a;background:#28597a;color:#ccc}
#btn-next:active{border-top-color:#238acf;background:#238acf}

5. Chèn code bên dưới vào trước thẻ </head>

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script type="text/javascript" src="https://vncongnghe.googlecode.com/files/jquery.scrollTo.js"></script>
<script>/* <![CDATA[ */ 
$(document).ready(function() {
var speed = 5000; // Tốc độ trình diễn
$('#mask-gallery, #gallery li').width($('#slider').width()); 
$('#gallery').width($('#slider').width() * $('#gallery li').length);
$('#mask-gallery, #gallery li, #mask-excerpt, #excerpt li').height($('#slider').height());
var run = setInterval('newsscoller(0)', speed); 

$('#gallery li:first, #excerpt li:first').addClass('selected');
$('#btn-pause').click(function () {
clearInterval(run);
return false;
});
$('#btn-play').click(function () {
run = setInterval('newsscoller(0)', speed); 
return false;
});
$('#btn-next').click(function () {
newsscoller(0); 
return false;
}); 
$('#btn-prev').click(function () {
newsscoller(1); 
return false;
}); 
$('#slider').hover(

function() {
clearInterval(run);
}, 
function() {
run = setInterval('newsscoller(0)', speed); });});

function newsscoller(prev) {
var current_image = $('#gallery li.selected').length ? $('#gallery li.selected') : $('#gallery li:first');
var current_excerpt = $('#excerpt li.selected').length ? $('#excerpt li.selected') : $('#excerpt li:first');
if (prev) {
var next_image = (current_image.prev().length) ? current_image.prev() : $('#gallery li:last');
var next_excerpt = (current_excerpt.prev().length) ? current_excerpt.prev() : $('#excerpt li:last');
} else {
var next_image = (current_image.next().length) ? current_image.next() : $('#gallery li:first');
var next_excerpt = (current_excerpt.next().length) ? current_excerpt.next() : $('#excerpt li:first');
}
$('#excerpt li, #gallery li').removeClass('selected');
next_image.addClass('selected');
next_excerpt.addClass('selected');
$('#mask-gallery').scrollTo(next_image, 800); 
$('#mask-excerpt').scrollTo(next_excerpt, 800); }
/* ]]> */</script>

6. Save template lại và vào Bố cục (Layout)

7. Thêm 1 HTML/Javascript và thêm vào code bên dưới

<div id="slider">
<div id="mask-gallery">
<ul id="gallery">
<li><img src="http://1.bp.blogspot.com/-12wbu0i_muc/Ta24AqDbjcI/AAAAAAAAH7c/pTr-k1Ur8JE/s515/100307-1920x1200.jpg" width="660" height="275" alt=""/></li>
<li><img src="http://1.bp.blogspot.com/-CTFG58k6MzM/Ta24ARmgsQI/AAAAAAAAH7U/LNGbQ7kSjZg/s515/22355-2560x1600%2B%255BDesktopNexus.com%255D.jpg" width="660" height="275" alt=""/></li>
<li><img src="http://2.bp.blogspot.com/-89bQalZvhUA/Ta23_zy7c6I/AAAAAAAAH7M/Uc4eVNXNKxU/s515/7%2B%255BDesktopNexus.com%255D.jpg" width="660" height="275" alt=""/></li>
<li><img src="http://2.bp.blogspot.com/-EEYNzbtRXzI/Ta24BApWoUI/AAAAAAAAH7k/3QZoOxdoUEw/s515/1254602948249.jpg" width="660" height="275" alt=""/></li>
<li><img src="http://2.bp.blogspot.com/-Lx0_DpHs6dk/Ta23_rRARVI/AAAAAAAAH7E/HJ0cDTXl-iM/s515/2.jpg" width="660" height="275" alt=""/></li>
</ul>
</div>

<div id="mask-excerpt">
<ul id="excerpt">
<li>Nội dung thông tin mô tả cho hình ảnh 1. </li>
<li>Nội dung thông tin mô tả cho hình ảnh 2. </li>
<li>Nội dung thông tin mô tả cho hình ảnh 3. </li>
<li>Nội dung thông tin mô tả cho hình ảnh 4. </li>
<li>Nội dung thông tin mô tả cho hình ảnh 5. </li>
</ul>
</div>
</div>
<div id="buttons" style="width: 100px;margin-left: 260px;padding-left: 25px;height: 25px;">
<a href="#" id="btn-prev">prev</a> <a href="#" id="btn-next">next</a></div>

Bạn hãy thay link ảnh (Link màu đỏ) thành link hình ảnh của bạn và nội dung mô tả tương ứng cho hình ảnh của bạn.

8. Cuối cùng save tiện ích lại

Chúc bạn thành công!