Recents Post với hiệu ứng load đổi bài viết cho blogspot

Tiện ích này cho phép các blogger tạo một widget với hiệu ứng đẹp mắt chuyển đổi load bài viết. Với Hiệu ứng load đổi bài viết sẽ hiển thị bài duy nhất cùng tiêu đề (liên kết), tác giả, ngày và bản tóm tắt ngắn gọn về nội dung . Thêm nữa, bài viết sẽ tự động xoay,chuyển bài viết trong danh sách mới đó lên top đầu của widget này. Rất đẹp và ấn tượng!

Hướng dẫn cách tạo Recents Post với hiệu ứng load đổi bài viết cho blogspot

Bước 1: Đăng nhập Blogger => Bố cục (Layout) => Thêm tiện ích HTML/JavaScript

Bước 2: Paste code bên dưới vào trong widget vừa thêm

<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://softwarecrack.ga/feeds/posts/default?redirect=false&start-index=1&max-results=15'},];
new GFdynamicFeedControl(feeds, 'feedGadget',{title: 'Bài Viết Mới ', numResults : 10, displayTime : 4500, hoverTime : 500});} google.load("feeds", "1");
google.setOnLoadCallback(showGadget);
</script>
<div id="feedGadget">Loading…</div>

Thay softwarecrack.ga bằng blog của bạn

Tiếp đến Ctrl + F đưa code CSS bên dưới trước ]]</b:skin>

.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;}

Lưu lại và kiểm tra kết quả xem đã tạo được hiệu ứng load đổi bài viết chưa nhé! Chúc các bạn thành công!