Trình chiếu bài viết dạng Slideshow cho Blog/web
Các bước thực hiện:
CSS
Bạn đăng nhập vào Blogspot -> Mẫu -> Chỉnh sửa HTML. Bạn copy toàn bộ code phía dưới dán vào ngay trước thẻ ]]></b:skin> (Mách nhỏ: Bạn bấm tổ hợp phím Ctrl+F và nhập vào ]]></b:skin> để tìm cho nhanh)
#tinycarousel {
width:532px; /* Lebar Slideshow */
height:1%;
overflow:hidden;
font:normal 10px/12px Arial,Sans-Serif;
color:#666;
margin:30px auto;
}
#tinycarousel .viewport {
height:336px;
overflow:hidden;
position:relative;
background-color:#eee;
border:1px solid #ccc;
}
#tinycarousel ul.overview {
list-style:none !important;
position:absolute;
padding:0 0 !important;
margin:0 0 !important;
width:240px;
left:0;
top:0;
}
#tinycarousel ul.overview li {
list-style:none !important;
float:left;
margin:5px 0 5px 5px !important;
padding:0 0 !important;
height:auto !important;
width:168px; /* Lebar satu unit slide */
background-color:white;
color:#666;
border:1px solid #ccc;
}
#tinycarousel .inner {
margin:10px;
height:260px;
overflow:hidden;
}
#tinycarousel img {
width:auto;
height:170px;
border:none;
outline:none;
padding:0 0;
margin:0 0;
-webkit-box-shadow:none;
-moz-box-shadow:none;
box-shadow:none;
}
#tinycarousel h6 {
border-top:1px solid #ddd;
font:normal bold 11px/12px Verdana,Tahoma,Arial,Sans-Serif;
color:#39f;
margin:9px 0 5px;
padding:10px 0 0;
background:none;
overflow:hidden;
}
#tinycarousel h6 a {
color:inherit;
text-decoration:none;
border:none;
}
#tinycarousel p {
margin:0 0;
padding:0 0;
overflow:hidden;
}
#tinycarousel em {
font-style:normal;
color:#aaa;
background-color:#333;
background-image:-webkit-linear-gradient(top,#555,#333);
background-image:-moz-linear-gradient(top,#555,#333);
background-image:-ms-linear-gradient(top,#555,#333);
background-image:-o-linear-gradient(top,#555,#333);
background-image:linear-gradient(top,#555,#333);
display:block;
padding:5px 10px;
margin:0 0;
}
#tinyarrow {
display:block;
background-color:white;
border:1px solid #ccc;
padding:5px;
margin:2px 0 0;
overflow:hidden;
}
#tinyarrow .buttons {
background-color:#666;
border:none;
outline:none;
display:block;
padding:2px 5px;
overflow:hidden;
position:relative;
float:left;
margin:0 1px;
color:white;
text-decoration:none;
font-weight:bold;
}
#tinyarrow .disable {display:none}
#tinyarrow .buttons:active {
background-color:#900;
position:relative;
top:1px;
}
#tinyarrow span {
float:right;
font:normal bold 11px/12px Tahoma,Verdana,Arial,Sans-Serif;
margin:2px 5px 0 0;
}
#tinycarousel.vertical {width:242px}
#tinycarousel.vertical ul.overview li {
float:none;
display:block;
width:228px;
margin:5px auto 10px !important;
}
#tinycarousel.vertical img {
width:100%;
height:auto;
}
JAVA
Bạn tìm đến thẻ </head> vào coppy toàn code phía dưới dán vào ngay trước thẻ đóng. Lưu lại<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'></script>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function(){
$('#tinycarousel').tinycarousel({
start : 1,
display : 1,
axis : 'x',
interval : false,
intervaltime: 3000,
animation : true,
duration : 1000,
callback : null
});
});
//]]>
</script>
<script src='http://reader-download.googlecode.com/svn/trunk/jquery.tinycarousel-custom.js' type='text/javascript'></script>
Tiện ích HTML
Bạn vào ngay phần Bố Cục -> Chọn thêm một Tiện Ích HTML ( Bạn muốn hiện ở đâu thì đặc ngay ở đó)Dán code phía dưới vào tiện ích. Lưu lại
<script type="text/javascript">
var showPostDate_g = true,
showComm_g = true,
slideOpenNewTab = true,
idMode = true,
slidebyLabels = false, // Giá trị true nếu bạn muốn trình chiếu một nhãn nhất định
slideLabelName = "Hệ Thống", // Nhãn bài viết của bạn
pBlank = "http://2.bp.blogspot.com/-11FkySHGB5Y/TpZ6SSbsF2I/AAAAAAAAA94/zK10UaL7jgo/s1600/images.jpeg",
text = "Bình luận",
numposts_g = 7,
numchars_g = 100,
showText = "Hiển thị",
postText = "Bài đăng",
tinyprevNav = "<",
tinynextNav = ">",
home_page = "http://www.tynisoft.com"; // Thay thế bằng url của bạn
</script>
<script src="http://reader-download.googlecode.com/svn/trunk/autoContent4TinyCarousel.js" type="text/javascript"></script>
Tùy Chỉnh
Màu đỏ: nếu web bạn đã có thư viện Java thì bỏ qua dòng đóMàu xanh: bạn tùy thay đổi
Màu cam: Bạn có thế tùy chỉnh các kiểu trình chiếu bằng cách thay thế đoạn code màu cam.
Cấu hình tự động: DEMO
$('#tinycarousel').tinycarousel({Cấu hình theo chiều dọc: DEMO
start : 1,
display : 1,
axis : 'x',
interval : true,
intervaltime: 3000,
animation : true,
duration : 1000,
callback : null
});
$('#tinycarousel').tinycarousel({Cấu hình chuyển 3 Slide bằng cách nhấn Navigation: DEMO
start : 1,
display : 1,
axis : 'y',
interval : true,
intervaltime: 3000,
animation : true,
duration : 1000,
callback : null
});
$('#tinycarousel').tinycarousel({Chúc các bạn thành công.
start : 1,
display : 3,
axis : 'x',
interval : false,
intervaltime: 3000,
animation : true,
duration : 1000,
callback : null
});
Nguồn sưu tầm.
