Tạo Slideshow cho hình ảnh với mô tả trượt đẹp mắt cho Blogspot

Traidatmui.com – Với các bài viết trước mình cũng có chia sẻ với các bạn cách tạo Slideshow cho hình ảnh. tuy nhiên slide mỗi bài mỗi kiểu trình diễn. Nhằm thêm đa dạng kiểu trình diễn ảnh thì hôm nay mình chia sẻ cho các bạn một thủ thuật nữa để tạo slideshow cho hình ảnh của bạn. Với thủ thuật này thì hình ảnh của bạn sẽ tự động trình diễn với 1 khoảng thời gian định trước cùng với nội dung mô tả cho hình ảnh tương ứng. Với 2 nút điều khiển tới lùi thì bạn có thể lần lượt xem tất cả hình ảnh trong slide đó và phần mô tả sẽ trượt lần lượt theo hình ảnh tương ứng trông đẹp mắt.

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

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="http://traidatmuidata.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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjS2cw1RUGsGR7bE5IrO6B_0z-aaJ8MbebK2INoTr8vgXyC8YehCQ_mXcoWd2DNG8tzOMKPbB-8ZQ4YZ5LTstjdwuVSZM8gXUl9w1pCWzxguwpxgL7NfGi56qTvAlyS2gnGBP08y_2O71i1/s515/100307-1920x1200.jpg" width="660" height="275" alt=""/></li>
<li><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiaha75ciKQXljgSpr48DCLgbtSz3ZtHM45fXMbb0O1w9vviumixYCLd8EbqfDu9OKVFpr1xqkgnq2IGtAT8M5TYr9TiabdmzjcpYp9J7zHMBKf7_ygWcP6R7wlKIvVjnRk3dC_Kf5Hr9tj/s515/22355-2560x1600+%255BDesktopNexus.com%255D.jpg" width="660" height="275" alt=""/></li>
<li><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDTGFGCoIhlMAp9T6wkkeTcGbaeG3XeU3nWLpiuCQduVGbkNdmPWGeIbJGbnBEICOSjsP4ZEAQpnIGZx44Rzq1vQNFvnsOqtulMsKjqVd1k_3HKGaNNeNpMLx2ZthiGaCvWrUKrqk1hIGc/s515/7+%255BDesktopNexus.com%255D.jpg" width="660" height="275" alt=""/></li>
<li><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEglSK-LYfO_SdfZcHEn-head9zA3QA2eSmwvQ-nSzxRoItsnDKb5_2TblS9g39KTdyIwTzhdS1U7zBo1eC2PeBac0XhBruxUVPluyCzZwBNjAj7EQCAfRyyC106Iv71J_QtH7jkzaUTeuJp/s515/1254602948249.jpg" width="660" height="275" alt=""/></li>
<li><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWdbR3vo9SN_hZb3pgWfh3qUVxGr7IWXphZbaGgQlyp-mbbF4qx1KjpZHFssGm7e5DpswWEPVeTPhIFgb2eJBui_dIMZ9_t6SIlnhsBGmEQIKD7dqtbGWhbPoYmfxEWc1_rt5LQIB3vJKs/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 xanh) 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!

Nguồn: Traidatmui.com