Tiện ích bài mới dạng SlideShow automatic kiểu 3

Tiện ích này về cơ bản cũng như 2 tiện ích trước mà tôi đã trình bầy.Ở tiện ích này có thêm chức năng gọi lại những bài đã chuyển qua bằng cách click vào dấu lùi.(<)

Cũng bao gồm tự động lấy bài kèm tiêu đề và trích dẫn,tiêu đề có liên kết link.

Xem thử

Để tạo tiện ích này ta cần đăng nhập blog vào bố cục và chọn thêm 1 tiện ích dán đoạn code sau vào rồi lưu lại

<link rel="stylesheet" type="text/css" href="https://dautocrazy.googlecode.com/svn/trunk/BaiMoiSlideShowK3.css"/>
<style type="text/css">
/* Custom CSS here... */
.slider-rotator {
width:600px;
height:400px;
padding:0 0;
background-color:white;
font:italic normal 12px/1.4 Georgia,Serif;
color:white;
border:15px groove black;
}

.slider-rotator .slider-item {
background-color:white;
height:400px; /* Same with `.slider-rotator` height */
padding:0 0;
}

.slider-rotator h4 {margin-top:0}
.slider-rotator p {margin:2px 0 0}

/* Slider details as caption */
.slider-rotator .detail-wrapper {
position:absolute;
top:auto;
right:0;
bottom:0;
left:0;
background-color:black;
background-color:rgba(0,0,0,.9);
padding:.5em 1em;
z-index:4;
}
</style>
<div id="slider-rotator" class="slider-rotator loading"></div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="https://krdautocrazyblog.googlecode.com/files/BaiMoiSlideShowK3.js"></script>
<script type="text/javascript">
makeSlider({
url: "http://kartriderdautocrazy01.blogspot.com",
thumbWidth: 580,
// Hide all captions on initiation...
onInit: function() {
$('#' + this.containerId).find('.detail-wrapper').hide();
},
// Hide the caption with `.slideUp()` effect when the slide item hides
onHide: function() {
$('#' + this.containerId).find('.detail-wrapper').slideUp();
},
// Show the caption with `.slideDown()` effect when the slide item appears
onShow: function(index) {
$('#' + this.containerId).children().eq(index).find('.detail-wrapper').slideDown();
}
});
</script>

Thay URL blog của bạn và điều chỉnh chiều rộng chiều cao và kích thước thumbWidth cho phù hợp

Nguồn: www.dte.web.id