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.
Đã lâu rồi mình không có UP bài viết nào về Tiện Ích Blog. Tình cờ mình dạo một vòng Blog mấy bạn nước ngoài thấy có một tiện ích rất hay về Bài Viết Mới, Những tiện ích trướt đây đơn giản chỉ hiện những bài viết mới nhất và số lần hiển thị chỉ 5 bài hoặc nhiều hơn tùy mình chỉnh. Nhưng với tiện ích này bạn có thể Next hoặc Previous về bài cũ nhất, rất nhanh rất là gọn. Chắc chắn các Bogger điều rất thích điều này.