Tiện Ích Recent Posts - Dạng 6

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

Tiện ích Recent Post dạng Slideshow ảnh rất thích hợp cho các trang Tin Tức.

Thêm một tiện ích HTML

Bạn đang nhập vào Blogspot -> Bố Cục -> Thêm Tiện Ích HTML. Và coppy toàn bộ code phía dưới dán vào Save lại. Xong

<link rel="stylesheet" type="text/css" href="http://blogger-json-experiment.googlecode.com/svn/resources/blogger-feed-rotator-plugin/default-style.min.css"/>
<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="http://blogger-json-experiment.googlecode.com/svn/resources/blogger-feed-rotator-plugin/blogger-feed-rotator.min.js"></script>
<script type="text/javascript">
makeSlider(
{
    url: "http://www.tynisoft.com", // blog URL của bạn
    numPost: 5, // Số bài viết để hiển thị
    newTabLink: false, // `true` để tự động mở liên kết trong cửa sổ mới tab
    labelName: null, // Hiển thị bài viết trong nhãn cụ thể. Xác định tên nhãn của bài viết, hoặc `null` để hiển thị tất cả các bài viết.
    showDetail: true, // `false` để ẩn các bài đăng blog tiêu đề và mô tả.
    summaryLength: 60, // Chiều dài của bài tóm tắt.
    titleLength: "auto", //  chiều dài của tiêu đề bài viết. "auto" mặc định, hoặc chỉ định số lượng để cắt các ký tự tiêu đề bài viết và cắt nó với `...`
    showThumb: true, // `false`để ẩn các bài hình thu nhỏ
    thumbWidth: 250, // Chiều rộng của bài trước trong pixel
    squareThumb: true, // chế độ / / thu nhỏ: chế độ Quảng trường hoặc sử dụng hình thu nhỏ quy mô với chiều rộng ban đầu và tỷ lệ chiều cao
    noThumb: "images/grey.png", // Dự trữ hình ảnh thu nhỏ không có bài viết
    showNav: true, // `true` để cả hai chương trình kế tiếp / trước chuyển hướng và số chuyển hướng, "tiếp theo / trước" để hiển thị tiếp theo / trước chuyển hướng chỉ, "số" để hiển thị số chuyển hướng chỉ, `sai` để ẩn chuyển hướng
    navText: {
        prev: "&lt;", // Label of the previous navigation
        next: "&gt;" // Label of the next navigation
    },
    containerId: "slider-rotator" // HTML ID yếu tố được sử dụng để hiển thị trình slideshow/rotator
}
);
</script>

Mở rộng thêm tiện ích

Hình minh họa

Đối với bạn nào muốn Hiện Silder ở trang chủ thì sử dụng Code như sau:

<link rel="stylesheet" type="text/css" href="http://blogger-json-experiment.googlecode.com/svn/resources/blogger-feed-rotator-plugin/default-style.min.css"/>
<style type="text/css">
/* Custom CSS here... */
.slider-rotator {
  width:600px;
  height:240px;
  padding:0 0;
  background-color:white;
  font:italic normal 12px/1.4 Georgia,Serif;
  color:white;
  border:1px solid black;
}
.slider-rotator .slider-item {
  background-color:white;
  height:240px; /* 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="http://blogger-json-experiment.googlecode.com/svn/resources/blogger-feed-rotator-plugin/blogger-feed-rotator.min.js"></script>
<script type="text/javascript">
makeSlider({
    url: "http://tynisoft.blogspot.com",
    thumbWidth: 600,
    // 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>

Hiện cùng lúc 3 Khung tiện ích và theo Nhãn bài viết

Hình minh họa

<link rel="stylesheet" type="text/css" href="http://blogger-json-experiment.googlecode.com/svn/resources/blogger-feed-rotator-plugin/default-style.min.css"/>
<style type="text/css">
/* Custom CSS here... */
.slider-rotator-wrapper {
  width:630px;
  padding:10px 5px;
  border:1px solid #ccc;
  background-color:white;
  margin:0 auto;
}
.slider-rotator-wrapper .grid {
  float:left;
  margin:0 5px;
}
.slider-rotator {
  padding:0 0;
  border:none;
  width:200px;
  height:320px;
}
.slider-rotator .slider-item {padding:0 0}
.slider-rotator-nav {
  overflow:hidden;
  margin-top:10px;
  border:1px solid #999;
  background-color:#ccc;
  padding:2px 0;
}
.slider-rotator-nav a {
  margin:0 0;
  display:inline-block;
  line-height:normal;
}
.clear {clear:both}
</style>
<div id="slider-rotator-wrapper" class="slider-rotator-wrapper">
    <div class="grid">
        <div id="slider-rotator-1" class="slider-rotator loading"></div>
    </div>
    <div class="grid">
        <div id="slider-rotator-2" class="slider-rotator loading"></div>
    </div>
    <div class="grid">
        <div id="slider-rotator-3" class="slider-rotator loading"></div>
    </div>
    <div class="clear"></div>
</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="http://blogger-json-experiment.googlecode.com/svn/resources/blogger-feed-rotator-plugin/blogger-feed-rotator.min.js"></script>
<script type="text/javascript">
makeSlider({
    url: 'http://luubutsong.blogspot.com', //  url web của bạn
    labelName: "Tình Yêu", // Nhãn bạn muốn hiển thị
    thumbWidth: 200,
    interval: 10000,
    containerId: "slider-rotator-1"
});
makeSlider({
    url: 'http://luubutsong.blogspot.com',
    labelName: "Cuộc Sống", // Nhãn bạn muốn hiển thị
    thumbWidth: 200,
    interval: 10000,
    containerId: "slider-rotator-2"
});
makeSlider({
    url: 'http://luubutsong.blogspot.com',
    labelName: "Gia Đình", // Nhãn bạn muốn hiển thị
    thumbWidth: 200,
    interval: 10000,
    containerId: "slider-rotator-3"
});
</script>

Tùy chỉnh

Màu đỏ: Nếu web/blog bạn đã có thư viện Java thì bỏ qua dòng đó.
Màu xanh: Thay địa chỉ URL của ban.