Tin mới đăng:

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

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="http://buixuandoanh.com.vn/js/jquery.min.js"></script>
<script type="text/javascript" src="http://buixuandoanh.com.vn/js/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 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!
Thủ thuật: Tạo Slideshow cho hình ảnh với mô tả trượt đẹp mắt cho Blogspot Thủ thuật: Tạo Slideshow cho hình ảnh với mô tả trượt đẹp mắt cho Blogspot
9/10 356 bình chọn

Chia sẻ:

Xin chào! Mình là Bùi Xuân Doanh. Mình muốn được chia sẻ cùng các bạn những gì mình biết.

Theo dõi tôi trên Facebook Or Youtube


Bạn nhập từ: cungly Bạn nhập từ: lleu Bạn nhập từ: kkrong Bạn nhập từ: cuoilon Bạn nhập từ: roile Bạn nhập từ: hehehe Bạn nhập từ: byebye Bạn nhập từ: idontknow Bạn nhập từ: votay more »

Quản trị

    Admin Bùi Xuân Doanh

    Click để Chat với Admin! Click để Chat với Admin!

    Email: buixuandoanh@gmail.com

    Hotline: 0983.379.818

Tư vấn Kỹ thuật