Wiget bài viết mới với hiệu load bài viết liên tục cho Blogspot

Wiget bài viết mới với hiệu load bài viết liên tục cho Blogspot.Cách tạo tiện ích bài viết với hiệu ứng load liên tục cho Blogspot

Tiện ích bài viết mới với hiệu ứng trượt và load những bài viết mới cho Blogspot. Bài viết này được chia sẻ bởi trollvl.com mình thấy hay nên chia sẻ cho các bạn cho những ai thấy thích

Ảnh demo

Cách tạo tiện ích bài viết mới với hiệu load bài viết liên tục cho Blogspot

Các bạn làm theo các bước sau: Đăng nhập Blog ==> Bố Cục (Layout) ==> Thêm tiện ích ==> HTML/Javascript rồi các bạn copy đoạn code dưới nhấn lưu là Ok

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<style scoped="scoped">
.spy-outer {
  border:2px solid white;
  -webkit-box-shadow:0 1px 3px rgba(0,0,0,.4);
  -moz-box-shadow:0 1px 3px rgba(0,0,0,.4);
  box-shadow:0 1px 3px rgba(0,0,0,.4);
  margin:0 auto;
}
.spy-outer h2 {
  margin:0;
  padding:5px 10px;
  background-color:#008800;
  background-image:-webkit-linear-gradient(#008800,#037103);
  background-image:-moz-linear-gradient(#008800,#037103);
  background-image:-ms-linear-gradient(#008800,#037103);
  background-image:-o-linear-gradient(#008800,#037103);
  background-image:linear-gradient(#008800,#037103);
  color:white;
  font:normal bold 12px/normal Helmet,Freesans,Sans-Serif;
  text-transform:none;
  text-shadow:0 1px 2px black;
}
.spy {
  margin:0;
  padding:0;
  font:normal normal 10px/12px Helmet,Freesans,Sans-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 #A7D101;
  border-bottom:1px solid #899D00;
  word-wrap:break-word;
  overflow:hidden;
}
.spy a {text-decoration:none}
.spy li em {
  font-weight:bold;
  color:#409540;
}
.spy-header {
  font:normal bold 12px/14px "Trebuchet MS",Trebuchet,Geneva,Verdana,Arial,Sans-Serif;
  display:block;
  color:yellow;
  text-shadow:0 1px 0 rgba(0,0,0,.2);
  /*
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  */
}
.spy-header:hover {
  color:white;
  text-decoration:underline;
}
.spy-summary {
  margin-top:5px;
  overflow:hidden;
}
.spy li .image-wrapper,
.spy li img {
  float:right;
  margin:0 0 2px 7px;
  padding:0;
  width:72px;
  height:72px;
  border:4px solid #899D00;
  background:white url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEits1cw_dt1BDJ8Xvq2Dz_l5O4UjPM3X8897OUVNCNpKmZANai8aAzU2rjYxCiyO6zyeX9e-6fjxPo55bnOu9lgNjZMM-xZ_AYaIkt3sgOvXABdIHVQtr3XY7_P00keNqVR48pJYQ9dg_aP/s1600/loading.gif') no-repeat 50% 50%;
}
.spy li .image-wrapper {
  -webkit-box-shadow:0 0 2px rgba(0,0,0,.7);
  -moz-box-shadow:0 0 2px rgba(0,0,0,.7);
  box-shadow:0 0 2px 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:10px;
  background-color:#fafafa;
}
</style>
<div id="spy-outer" class="spy-outer"><span class="loading">Memuat...</span></div>
<script>
var spy_config = {
    widgetTitle: '<h2>Recent Post</h2>',
    url:'http://bittuot.blogspot.com',
    containerId: 'spy-outer',
    numPost: 10,
    numChars: 100,
    monthNames: [
        'Januari',
        'Februari',
        'Maret',
        'April',
        'Mei',
        'Juni',
        'Juli',
        'Agustus',
        'September',
        'Oktober',
        'November',
        'Desember'
    ],
    noImage: 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiK9H_Q8OWu1hkyF-_X9CUfKTCtpmP_HdprZAh9tbs_KB_UWYX-dZdXozZLBAn-NFPPTugjpMy4SEu_4dJ6rX3oj1meZ9BbfqusgLdcisr-9dB3XIbwGNe-UFqbaBnhkSdRkEjVfs8eqgg4/s1600/noimage.png',
    showSummaries: true,
    showThumbnails: true,
    showPostDate: true,
    showComments: true,
    newTabLink: false,
    animatedRecentPost: true,
    jsonCallback: 'recentpost_spy',
    newsTicker: {
        visible: 4,
        interval: 3000,
        speed: 600
    }
};
</script>
<script src="https://sites.google.com/site/seovnpro/0Bz_65BAr9KCZbUpFSU12WGR5RGM"></script>

Chú ý: 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 thử xem sao nhé <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
- https://sites.google.com/site/seovnpro/0Bz_65BAr9KCZbUpFSU12WGR5RGM các bạn down file này rồi up lên host riêng nhé để dùng lâu dài
- Các bạn thay link http://bittuot.blogspot.com thành link blog của bạn
- Các bạn tùy chỉnh css thay đổi màu và kích thước cho phù hợp nhé

• 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 các bạn thành công.

Nguồn được chia sẻ bởi http://bittuot.blogspot.com/

Mọi thắc mắc các bạn comment phía dưới nhé