Trình chiếu bài viết dạng Slideshow cho Blog/web

Lê An    9/28/2013    Recent Posts , Slideshow , Thủ thuật blog , Widget    Comments   

Một tiện ích trình chiếu các bài viết trên Web/blog theo dạng Slideshow. Và bạn có thể tùy biến trình chiếu theo một nhãn nhất định.

DEMO

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     = "&lt;",
    tinynextNav     = "&gt;",
    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({
    start       : 1,
    display     : 1,
    axis        : 'x',
    interval    : true,
    intervaltime: 3000,
    animation   : true,
    duration    : 1000,
    callback    : null
}); 

Cấu hình theo chiều dọc: DEMO 

$('#tinycarousel').tinycarousel({
    start       : 1,
    display     : 1,
    axis        : 'y',
    interval    : true,
    intervaltime: 3000,
    animation   : true,
    duration    : 1000,
    callback    : null
}); 

Cấu hình chuyển 3 Slide bằng cách nhấn Navigation: DEMO

$('#tinycarousel').tinycarousel({
    start       : 1,
    display     : 3,
    axis        : 'x',
    interval    : false,
    intervaltime: 3000,
    animation   : true,
    duration    : 1000,
    callback    : null
}); 

Chúc các bạn thành công.

Nguồn sưu tầm.