Widget Recent Posts đổi bài viết liên tục cho Blogspot

Blogspot là một nền tảng viết blog miễn phí nổi tiếng. Nó thuộc quyền sở hữu của Google nên bạn hoàn toàn yên tâm về vấn đề bảo mật cũng như DOSS cả. Nó không chỉ là nền tảng dùng để tạo blog cá nhân, mà nó còn được dùng với tất cả các mục đích khác như bán hàng, giải trí, du lịch,….. Ẹc, hình như không liên quan đến trọng tâm bài viết mấy nhỉ? Thôi quay lại với trọng tâm bài viết, tuy là blogspot có khá nhiều các tiện ích sẵn có trong thư viện nhưng nó lại thiếu mất một cái khá là quan trọng, đó chính là Widget các bài viết mới nhất trên blog của chúng ta.

Khi bạn vào thêm một tiện ích mới, bạn có thể thấy có tiện ích những comment mới nhất, những bài viết được quan tâm nhất nhưng lại không thể thấy những bài viết mới nhất. Đó có lẽ là một thiếu sót của Blogspot. Tuy nhiên, không tìm thấy thì cũng đồng nghĩa với việc à chúng ta sẽ bó tay và không thể tạo Widget bài viết mới được. Hô nay, mình xin được giới thiệu tới các bạn một thủ thuật nho nhỏ giúp ta giải quyết được vấn đề này.

Không chỉ là một widget hiển thị ra các bài viết mới nhất của blog. Với widget này, nó sẽ hiển thị tác giả bài viết, ngày đăng bài viết và một phần nội dung của các bài viết trên đầu của widget. Đặc biệt, phần này sẽ tự động thay đổi nội dung lần lượt cho từng bài viết trong list bài viết mới.

Cách tạo widget:

Bước 1: Đăng nhập vào blogger.com

Bước 2: Di chuyển đến menu quản lý bố cục của blog.

Bước 3: Tạo thêm một widget HTML/Javascript mới sau đó copy và dán đoạn code dưới đây vào trong nội dung HTML/Javascript.

<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="https://www.google.com/jsapi" type="text/javascript"></script>
<script src="https://www.google.com/uds/solutions/dynamicfeed/gfdynamicfeedcontrol.js" type="text/javascript"></script>
<script type="text/javascript">
function showGadget() {var feeds = [{title:'List',url:'<b>http://apps.doiguocmoc.com/</b>feeds/posts/default?redirect=false&start-index=1&max-results=15'},];
new GFdynamicFeedControl(feeds, 'feedGadget',{title: '<b>Bài Viết Mới Nhất</b>',<b> numResults : 7</b>, <b>displayTime : 5000, hoverTime : 500</b>});} google.load("feeds", "1");
google.setOnLoadCallback(showGadget);
</script>
<div id="feedGadget">Đang tải...</div>

OK, bây giờ các bạn nhấn Save lại là xong rồi đấy. Ra trang chủ để xem kết quả nó như thế nào nhé!

Chú ý: Trước khi lưu các bạn hãy để ý một số thông số sau trong đoạn code nhé!

  • http://apps.doiguocmoc.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, bạn thích sửa thành gì cũng được
  • numResults : 7: 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

Mong rằng bài viết này sẽ có ích với các bạn. Nếu không làm theo được hãy để lại comment dưới bài viết nhé!

Chia sẻ bài viết:

Bài viết liên quan:

Đọc nhiều cùng chuyên mục:

Add Comment

5 Comments

  1. Tran Duc Thao
    3 Bình luận
    18/04/2016
  2. Nhân Huỳnh
    3 Bình luận
    27/06/2016
  3. luong
    1 Bình luận
    13/11/2016
  4. homedy
    20 Bình luận
    30/08/2017