Recent Posts với hiệu ứng load đổi bài viết liên tục cho Blogspot
Recent Posts với hiệu ứng load đổi bài viết liên tục cho Blogspot. Bài viết mới nhất với hiệu ứng load đổi bài viết liên tục cho Blogspot

Hôm nay Bít Tuốt xin chia sẻ với các bạn 1 thủ thuật blog là cách thêm 1 widget: Recent Posts với hiệu ứng load đổi bài viết liên tục cho Blogspot

Widget này có gì đặc biệt: Nó sẽ hiển thị những bài viết mới nhất mà bạn viết. Ở đầu  widget này sẽ hiển thị một bài duy nhất cùng với tiêu đề (liên kết), tác giả, ngày và một bản tóm tắt ngắn gọn về nội dung của nó. Ngoài ra, bài viết này sẽ tự động xoay,chuyển bài viết trong danh sách bài viết mới đó lên top đầu widget này.

Ai có nhu cầu tìm kiếm templates đẹp miễn phí cho blogspot vui lòng ghé qua web sau để down temp: bit.templates

Demo: Recent Posts với hiệu ứng load đổi bài viết


Loading...


Cách tạo widget: Recent Posts với hiệu ứng load đổi bài viết

Bước 1: Đăng nhập blogspot ==> Bố Cục (Layout)

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

<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://bittuot.blogspot.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>

Các bạn nhấn lưu lại rồi ra xem kết quả

Chú ý: Các bạn cần thay đổi các thông tin dưới đây sao cho phù hợp

  • http://bittuot.blogspot.com/: Các bạn sửa thành link blog của các bạn
  • title: 'Bài Viết Mới Nhất' : Tên tiêu đề của Widget
  • numResults : 12: Số bài viết bạn muốn hiển thị
  • displayTime : 5000, hoverTime : 500 : Thời gian chuyển đổi giữa các bài viết
  • Nếu ko thấy chạy các bạn thử thay http://www.google.com/uds/solutions/dynamicfeed/gfdynamicfeedcontrol.js thành link 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 các bạn ko muốn hiển thị cái tên Bài viết mới nhất thì các bạn thêm thuộc tính display:none vào  cái css tên là .gfg-title

Bài viết được viết bởi Bít Tuốt Blog - bittuot.blogspot.com .Chú ý ghi rõ nguồn khi copy bài viết này



Nếu bạn cảm thấy hay hãy ấn theo dõi này :)
Đánh Giá Bài Viết Đễ Ad Cải Thiện Nội Dung Chất Lượng Bài Viết
Facebook Google twitter
Từ khóa: Recent, Posts, với, hiệu, ứng, load, đổi, bài, viết, liên, tục, cho, Blogspot, Recent Posts với hiệu ứng load đổi bài viết liên tục cho Blogspot edit
Cùng Chuyên Mục
Bài Viết Mới

Tin Tức Online
Xem Thêm Tất Cả »
Bài Viết Ngẫu Nhiên
  • Những cách làm trắng da từ thiên nhiên
    30.05.2013 - 0 Comments
    Những cách làm trắng da từ thiên nhiên . Tổng hợp những cách làm trắng da từ thiên nhiên hiệu quả…
  • Bàn làm việc Hòa Phát cho vị trí giám đốc
    09.03.2016 - 0 Comments
    Dù được ra mắt từ năm 2010 nhưng sức hút của bàn giám đốc Royal vẫn chưa bao giờ giảm, Royal luôn là một dòng…
  • Tổng hợp những bài Vè Chúc Tết hay 2014
    26.01.2014 - 0 Comments
    Tổng hợp những bài Vè Chúc Tết hay 2014. Năm mới đã đến Bít Tuốt chúc mọi người một năm mới An Khang - Thình…
  • Cách chơi lên đồ Jhin AD tướng mới mùa 6
    12.01.2016 - 0 Comments
    Cách lên đồ Jhin AD mùa 6 mạnh nhất. Lên đồ Jhin AD S6. Cách chới Jhin AD mùa 6. Bảng ngọc bảng bổ trợ Jhin…
  • Tặng quà gì cho bạn gái nhân ngày sinh nhật ngày lễ ?
    06.12.2015 - 0 Comments
    Tặng quà gì cho bạn gái nhân ngày sinh nhật ngày lễ ? Sinh nhật bạn gái nên tặng quà gì.Nên tặng gì cho bạn…
Copyright © 2016 - All Rights Reserved
Template by Lê Hiển - Powered by Blogger Liên kết: Kênh Tải Miễn Phí