"Thủ thuật: 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.


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

» 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="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 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!

Tham khảo bloggertrix.com

Xem khác cùng chủ đề

10 nhận xét | Viết lời bình

7/05/2013 02:02:00 SA Trả lời

Cho hỏi bạn, nếu áp dụng cho Google site có được không, nhờ bạn chỉ dẫn. Xin cảm ơn bạn.

Admin
7/06/2013 08:05:00 SA Trả lời

Google site không áp dụng được bạn

7/08/2013 09:22:00 CH Trả lời

Bạn ơi, đối với google site bạn có code tạo ảnh trượt hok , kiểu như web http://www.chungcucaocap.info/home vậy nè.

8/14/2013 05:58:00 CH Trả lời

bạn có biết làm sao để upload 1 album trong picasa của mình lên thành 1 webpage không ? sau đó mình muốn dùng đường link của webpage này đưa vào 1 widget của blog mình. bạn có cách nào hay hơn không ? giúp mình nhé ! thank you

Admin
8/23/2013 10:26:00 CH Trả lời

Mình chưa thử bạn ah

8/26/2013 12:47:00 SA Trả lời

bạn trai đất mũi cho mình hỏi, blog không hiện ngyaf đăng và giờ đăng bài, làm như nào để nó hiện lại ? mong bạn giúp đỡ, mình k làm thế nào để nó hiện dù trong phần bố cục bài viết vẫn nhẫn chọn hiện rôi

8/26/2013 12:48:00 SA Trả lời
Nhận xét này đã bị tác giả xóa.
8/26/2013 12:48:00 SA Trả lời
Nhận xét này đã bị tác giả xóa.
7/24/2015 02:09:00 SA Trả lời

Bạn ơi bên mình có dịch vụ Đăng tin tự động lên groups trên facebook miễn phí bạn xem qua nhé. miễn phí 100%
Ngoài ra các bạn có thể đọc tin tức tại Kênh tin tức giải trí yeubao.com
Các bạn có thể truy cập link sau để xem thông tin công nghệ
Khoinguoncongnghe.net | kênh thông tin dành cho tín đồ công nghê
cám ơn bạn đã đọc
đăng tin tự động trên facebook miễn phí 100% xem tại Đăng tin tự động lên groups trên facebook miễn phí
xem thủ thuật blogspot, thủ thuật blogger, thủ thuật facebook tại thủ thuật tổng hợp facebook, blogger,coputuer
xem tin tức giới trẻ, các tin nổi bật tin tức nổi bật, tin sao, tin giới trẻ, đời sống xã hội
xem thong tin giải trí, cung hoàng đạo, tại bí mật 12 chòm sao,tâm sự,blog tâm sự

giải trí thư giã relax giải trí thư giãn relax
khám phá du lịch, bi ẩn khám phá du lịch, bí ẩn
kho video giải trí khổng lồ video đời sống xã hội, video giải trí
khởi nguồn công nghệ, xem tin tức công nghệ, tin tức internet
tin tức internet
Tin tức itc , tin tức technogoy tin tức ict

Khám phá công nghệ
khám phá

Thủ thuật công nghê thủ thuật công nghệ, tips





10/14/2016 08:20:00 SA Trả lời

sao mà cái gì cũng khó khăn quá vậy

du lịch

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 »

Giải pháp bán hàng online Số 1 Việt Nam
Lên đầu trang Xuống cuối trang