CODE968.COM: Tiện Ích Bài Mới Dạng SlideShow Tự Động Lấy Bài Kiểu 1.

Thứ Năm, 20 tháng 6, 2013

Tiện Ích Bài Mới Dạng SlideShow Tự Động Lấy Bài Kiểu 1.

Đây là tiện ích tôi sưu tầm được trên mạng mang về đây chia sẻ cùng mọi người.Tiện ích này hoàn toàn tự động lấy hình ảnh kèm tiêu đề bài viết và tổng số nhận xét của những bài mới trên blog.Ta cũng có thể trình chiếu theo bài mới của từng nhãn,ta chỉ việc sửa đổi đôi chút code

Nếu dùng cho toàn blog thì ảnh đại diện của mỗi bài viết nên để kích thước lớn thì khi lên hình ảnh không bị vỡ hạt(ảnh mới nét)
Để thuận tiện cho những người tính tình sớm nắng chiều mưa lúc thích lúc không.Nên có thể gộp code vào 1 tiện ích nếu không thích thì xóa bỏ tiện ích không cần can thiệp vào template.
Vào bố cục chọn thêm một tiện ích và dán đoạn code sau vào rồi lưu lại

<style type="text/css">
#slider,
#sliderContent,
#slider img {
  width:620px; /* Chiều rộng slideshow */
  height:500px; /* Chiều cao slideshow */
}

#slider {
  margin:0 auto 10px;
  border:2px solid white;
  background:#fff url('https://lh5.googleusercontent.com/-0WhJFu38VaU/UWwBydC2ZAI/AAAAAAAAXps/fdoWfvSqRoM/s16/nivo-loading.gif') no-repeat 50% 50%;
  position:relative;
  -webkit-box-shadow:0 1px 3px rgba(0,0,0,.4),0 7px 10px -3px rgba(0,0,0,.4);
  -moz-box-shadow:0 1px 3px rgba(0,0,0,.4),0 7px 10px -3px rgba(0,0,0,.4);
  box-shadow:0 1px 3px rgba(0,0,0,.4),0 7px 10px -3px rgba(0,0,0,.4);
  overflow:hidden;
}

#sliderContent {
  position:absolute;
  top:0;
  left:0;
  margin:0 0;
  padding:0 0;
  overflow:hidden;
}

#slider img {
  border:none;
  padding:0 0;
  margin:0 0;
  width:100%;
  height:auto;
  outline:none;
}

.sliderImage {
  list-style:none;
  margin:0 0;
  padding:0 0;
  width:100%;
  display:none;
}

.sliderImage span {
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:auto;
  font:normal 11px Arial,Sans-Serif;
  color:white;
  background-color:black;
  opacity:.8;
  filter:alpha(opacity=80);
  padding:7px 10px 12px;
  display:none;
}

.sliderImage span a {
  font-size:12px;
  font-weight:bold;
  color:white;
  text-decoration:none;
}</style>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'></script>
<script src='https://krdautocrazyblog.googlecode.com/files/S3Slider.js' type='text/javascript'></script>
<script type='text/javascript'>
//<![CDATA[
$(window).bind('load', function() {
    $('#slider').css('background-image', 'none').s3Slider({
        timeOut:3000
    });
});
//]]>
</script>
<script type="text/javascript">
var showPostDate_g  = true,
    slideOpenNewTab = false,
    idMode          = true,
    slidebyLabels   = false,//Nếu theo nhãn thì để true
    slideLabelName  = "Nhãn",
    thumbWidth      = 420,
    pBlank          = "https://lh4.googleusercontent.com/-wo2eWGsrvg4/UWlxklHeRUI/AAAAAAAAWrk/3GfFvq6ZgJE/s88/dte-darkblue.png",
    text            = "Comments",
    numposts_g      = 10,//Số bài trình chiếu
    home_page       = "http://kartriderdautocrazy01.blogspot.com/";//URL Blog
</script>
<script src="https://krdautocrazyblog.googlecode.com/files/autoContent4s3Slider.js" type="text/javascript"></script>

Vậy là xong.

Recent Post Slider-Bài Mới Dạng SlideShow.

Đây là tiện ích giới thiệu những bài viết gần đây được trình chiếu dưới dạng slideshow với hiệu ứng xoay tròn trông cũng khá đẹp mắt.

Slider này hoạt động tốt trên các mẫu do blogger cung cấp,có 1 số mẫu do tự thiết kế thì cần có 1 số chỉnh sửa nhưng cũng không chắc là nó sẽ hoạt động.Việc cài đặt thì cũng đơn giản và hiệu chỉnh thì dễ dàng.

Ta cần đăng nhập blog rồi tiến hành thêm 1 tiện ích HTML/javascript,dán code sau vào và lưu lại.