Thống kê bài viết mới với hiệu ứng đổi liên tục cho Blogspot

Đây là 1 thủ thuật Blogspot khá hay cho người dùng vì khá nhiều bạn quan tâm đến tiện ích bài viết mới này. Phần lớn các template Blogger đều có hiển thị bài viết mới ở ngoài trang chủ. Tuy nhiên bạn cũng có thể hiển thị bài viết mới ở các trang bài viết, label nếu bạn dùng kết hợp thêm thủ thuật hiển thị tiện ích ở trang chủ hoặc trang cố định

- Và bài viết này mình giới thiệu với bạn 1 hiệu ứng đổi liên tục để thống kê bài viết mới cho Blogspot.

Cách làm như sau:

Bước 1: Vào bảng điều khiến Blogger -> Bố cục (Layout) -> Thêm tiện ích (Add a widget) -> HTML/JavaScript

Bước 2: Dán code dưới đây vào tiện ích vừa thêm

<style>
.gfg-root {
width: 100%;
height : auto;
position : relative;
overflow : hidden;
margin: 0 auto;
text-align : center;
font-size: 12px;
border: 1px solid #DBDBDB;
}
.gfg-title {
font-size: 16px;
font-weight : bold;
color : #6B6B6B;
background:#F3F3F3;
background-repeat: repeat;
line-height : 1.4em;
overflow : hidden;
white-space : nowrap;
padding: 5px;
text-shadow: 0px 2px #fff;
}
.gfg-entry {
background-color: #FFFFFF;
width : 100%;
height : 9.2em;
position : relative;
overflow : hidden;
text-align : left;
margin-top : 3px;
}
.gf-title a {
text-transform: capitalize;
color: #0000ff;
font-size: 14px;
}
.gfg-subtitle {
display: none;
}
.gfg-list {
position : relative;
overflow : hidden;
text-align : left;
}
.gfg-listentry {
line-height : 1.5em;
overflow : hidden;
white-space : nowrap;
text-overflow : ellipsis;
padding-left : 15px;
padding-right : 5px;
}
.gfg-listentry-odd {
background-color : #F3F3F3;
border-bottom : 1px dotted #CCCCCC;
padding: 5px;
}
.gfg-listentry-even {
background-color : #F3F3F3;
border-bottom : 1px dotted #CCCCCC;
padding: 5px;
}
.gfg-listentry-odd a{
color: #595959;
padding: 0 0px 0 10px;
}
.gfg-listentry-even a{
color: #242424;
padding: 0 0px 0 10px;
}
.gfg-listentry-highlight {
background: #FFFFFF;
}
.gfg-listentry-highlight:before {
position: absolute;
left: 0;
content: '\25BA ';
font-size: 14px;
color: #DBDBDB;
}
.gfg-listentry-highlight a {
color: #242424;
}
.gfg-root .gfg-entry .gf-result {
position : relative;
background-color: #ffffff;
width : auto;
height : 100%;
padding-left : 20px;
padding-right : 5px;
}
.gfg-root .gfg-entry .gf-result .gf-title {
font-size: 14px;
line-height : 1.2em;
overflow : hidden;
white-space : nowrap;
text-overflow : ellipsis;
margin-bottom : 2px;
margin-top: 5px;
}
.gfg-root .gfg-entry .gf-result .gf-snippet {
height : 3.8em;
color: #000000;
margin-top : 3px;
}
.clearFloat {
clear : both;}</style>
<script src="http://www.google.com/jsapi" type="text/javascript"></script><script src="http://www.google.com/uds/solutions/dynamicfeed/gfdynamicfeedcontrol.js" type="text/javascript"></script>
<script type="text/javascript">
function showGadget() {var feeds = [{title:'List',url:'http://www.thanhnienbinhdinh.com/feeds/posts/default?redirect=false&start-index=1&max-results=15'},];
new GFdynamicFeedControl(feeds, 'feedGadget',{title: 'Bài Viết Mới Nhất', numResults : 12, displayTime : 5000, hoverTime : 500});} google.load("feeds", "1");
google.setOnLoadCallback(showGadget);
</script>
<div id="feedGadget">Loading...</div>

Trong đó bạn cần lưu ý tới những thông tin sau:

- www.thanhnienbinhdinh.com : Thay thế bằng tên Blog của bạn

- Tiêu đề của tiện ích bạn sửa theo ý bạn, ở đây ghi là Bài Viết Mới Nhất.

- numResults : 12 : Đây là số bài viết sẽ hiển thị trong Widget.

Chúc các bạn vui vẻ !