Tạo Recent Posts có hiệu ứng load đổi bài viết liên tục dành cho Blogspot

Recent Posts có hiệu ứng load đổi bài viết liên tục dành choBlogspot.Thuthuatblogspot xin chia sẻ với bạn thủ thuật blog  cách thêm widget Recent Posts khá là bắt mắt.Nó hiển thị những bài viết mới nhất mà bạn đã viết. Ở đầu  widget 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 . Ngoài ra, 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.Khá là ấn tượng đó.

Hướng dẫn tạo widget: Recent Posts hiệu ứng load đổi bài viết mới

Bước 1:  Login Blogger và vào Edit Bố Cục (Layout)

Bước 2: Thêm tiên ích HTML/Javascript ở vị trí muốn hiển thị  và copy đoạn code dưới :

<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://thuthuatblogspot.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>

Cuối cùng SAVE TEMPLATE lại nhé.

Chú ý: bạn thay đổi các thông tin dưới sao phù hợp với sở thích của bạn nhé :

• http://thuthuatblogspot.com/: sửa thành link blogger của mình
• numResults : 12:  đây là số lượng bài viết muốn hiển thị
• displayTime : 5000, hoverTime : 500 : Thời gian chuyển đổi giữa mấy bài viết , cứ để khoảng 3000 là hợp lý.
• Nếu như bạn không thấy chạy ,hãy thử thay:  http://www.google.com/uds/solutions/dynamicfeed/gfdynamicfeedcontrol.js thành như sau https://sites.google.com/site/seovnpro/gfdynamicfeedcontrol.js .Thay http://www.google.com/jsapi thành https://sites.google.com/site/seovnpro/jsapi

Nếu bạn ko thích hiển thị tên Bài viết mới nhất thì thêm thuộc tính display:none vào  css là.gfg-title

Vậy là xong !