Tiện ích bài viết mới với hiệu ứng load liên tục

Đây là "Tiện ích bài viết mới với hiệu ứng trượt và tải những bài viết mới nhất" cho blogspot. Bài viết này được chia sẻ bởi trollvl.com .

Nếu bạn thích thì thực hiện theo các bước sau: Đăng nhập Blog ==> Bố Cục (Layout) ==> Thêm tiện ích ==> HTML/Javascript; copy đoạn code dưới dán vào khung nội dung của tiện ích; nhấp lưu; di chuyển tiện ích vào vị trí thích hợp; nhấp lưu sắp xếp là xong.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> 
<style type=text/css scoped="scoped">
.spy-outer {
  border:1px solid white;
  -webkit-box-shadow:0 1px 1px rgba(0,0,0,.4);
  -moz-box-shadow:0 1px 1px rgba(0,0,0,.4);
  box-shadow:0 1px 1px rgba(0,0,0,.4);
  margin:0 auto;
}
.spy-outer h2 {
  margin:0;
  padding:1px 1px;
  background-color:#FFFFFF;
  background-image:-webkit-linear-gradient(#FFFFFF,#D8D8D8);
  background-image:-moz-linear-gradient(#FFFFFF,#D8D8D8);
  background-image:-ms-linear-gradient(#FFFFFF,#D8D8D8);
  background-image:-o-linear-gradient(#FFFFFF,#D8D8D8);
  background-image:linear-gradient(#FFFFFF,#D8D8D8);
  color:white;
  font:normal bold 12px/normal Dancing Script, cursive, serif;
  text-transform:none;
  text-shadow:0;
}
.spy {
  margin:0;
  padding:0;
  font:normal normal 10px/12px Dancing Script, cursive, serif;
  color:#333;
  overflow:hidden;
}
.spy li {
  list-style:none;
  text-align:left;
  margin:0;
  padding:5px 7px;
  background-color:#AABD30;
  background-image:-webkit-linear-gradient(#AABD30,#9BB009);
  background-image:-moz-linear-gradient(#AABD30,#9BB009);
  background-image:-ms-linear-gradient(#AABD30,#9BB009);
  background-image:-o-linear-gradient(#AABD30,#9BB009);
  background-image:linear-gradient(#AABD30,#9BB009);
  border-top:1px solid #D8D8D8;
  border-bottom:1px solid #D8D8D8;
  word-wrap:break-word;
  overflow:hidden;
}
.spy a {text-decoration:none}
.spy li em {
  font-weight:bold;
  color:#424242;
}
.spy-header {
  font:normal bold 12px/14px "Dancing Script", Dancing Script, cursive, serif;
  display:block;
  color:#2E2E2E;
  text-shadow:0 1px 0 rgba(0,0,0,.2);
  /*
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  */
}
.spy-header:hover {
  color:#0000FF;
  text-decoration:underline;
}
.spy-summary {
  margin-top:5px;
  overflow:hidden;
}
.spy li .image-wrapper,
.spy li img {
  float:left;
  margin:0px 10px 0px 7px;
  padding:0;
  width:36px;
  height:36px;
  border:1px solid #899D00;
  background:white url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg49xozRuQrAMesAHBMv1_Z25cIPWLt93_ZEPanO-rxWBgNisGgF10pkHdMGD94eSO9fCuttF8NGXugs1DTRpRICpchcnembJy4O5eJQTwVXLcJKNSCtq1CYoNfryhx_7cswMHGTJ44MSAl/s1600/loading.gif') no-repeat 50% 50%;
}
.spy li .image-wrapper {
  -webkit-box-shadow:0 0 1px rgba(0,0,0,.7);
  -moz-box-shadow:0 0 1px rgba(0,0,0,.7);
  box-shadow:0 0 1px rgba(0,0,0,.7);
}
.spy li img {
  border:none !important;
  float:none;
  margin:0;
  padding:0;
  display:none;
}
.spy-outer .loading {
  display:block;
  padding:1px;
  background-color:#fafafa;
}
</style>
<div id="spy-outer" class="spy-outer"><span class="loading">Đang mở...</span></div>
<script>
var spy_config = {
    widgetTitle: '<h2>Mới nhất</h2>',
    url:'https://dovaden2010.blogspot.com',
    containerId: 'spy-outer',
    numPost: 6,
    numChars: 100,
    monthNames: [
        '/01/',
        '/02/',
        '/03/',
        '/04/',
        '/05/',
        '/06/',
        '/07/',
        '/08/',
        '/09/',
        '/10/',
        '/11/',
        '/12/'
    ],
    noImage: 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7cJ82v6ZFDkD9ndEA9Dy1aQgcbkaKkTyP4cGzaNPM3M4TGTy-cWd9gH5dnE_E-FkyvRKS8dvviN4N5zye1HEOPTD09lPRm9RguWJeYBNa05ZZTEmfaTmv5Ls8sPB7KYcW2a5ZGpuOwrnR/s1600/noimage.png',
    showSummaries: false,
    showThumbnails: true,
    showPostDate: true,
    showComments: true,
    newTabLink: false,
    animatedRecentPost: true,
    jsonCallback: 'recentpost_spy',
    newsTicker: {
        visible: 5,
        interval: 3000,
        speed: 600
    }
};
</script>
<script src="https://dl.dropbox.com/s/n0n1vd2lqhsv1sz/baimoislide.js"></script>

Chú ý: 

1- Nếu blog bạn đã có đoạn code này hoặc tiện ích không chạy, các bạn thử xóa đoạn này đi xem sao nhé 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

2- Đường dẫn
 https://dl.dropbox.com/s/n0n1vd2lqhsv1sz/baimoislide.js

bạn download file này rồi up lên host riêng nhé để dùng lâu dài

3- Bạn thay link
 https://dovaden2010.blogspot.com 

thành link blog của bạn.


4- Các bạn tùy chỉnh css thay đổi màu và kích thước cho phù hợp với blog của bạn

• widgetTitle: Title của widget, bạn có thể đổi thành Bài viết mới nếu muốn
• url: Để mặc định.
• containerId Để mặc định.
• numPost Số bài viết hiển thị (phải lớn hơn newsTicker => visible).
• numChars Số ký tự tóm tắt hiển thị nếu bạn để showSummaries là true.
• monthNames Tên các tháng trong năm.
• noImage URL hình ảnh cho bài viết không có hình ảnh.
• showSummaries Thay đổi thành false nếu bạn không muốn hiển thị nội dung tóm tắt.
• showThumbnails Thay đổi thành false nếu bạn không muốn hiển thị hình ảnh thu nhỏ.
• showPostDate Thay đổi thành false nếu bạn không muốn hiển thị ngày tháng đăng bài.
• showComments Thay đổi thành false nếu bạn không muốn hiển thị số lượng comment.
• newTabLink Thay đổi thành true nếu bạn muốn mở cửa sổ mới mỗi khi click vào link trong tiện ích.
• animatedRecentPost Thay đổi thành false nếu bạn muốn tắt hiệu ứng trượt.
• newsTicker => visible Số lượng bài viết bạn muốn hiển thị trên widget. Phải chắc chắn nhỏ hơn numPost.
• newsTicker => interval Khoảng thời gian để di chuyển bài viết, 3000=3s.
• newsTicker => speed Tốc độ chuyển bài viết, giá trị càng cao thì tốc độ di chuyển càng chậm.

Chúc bạn thành công!

Bạn có thể tham khảo thêm tiện ích này với màu sắc ban đầu tại nguồn:
https://tinhockhanhdat.blogspot.com/2015/11/widget-bai-viet-moi-voi-hieu-ung-load.html