Hướng Dẫn Tạo Widget Bài Viết Mới Nhất Cho Blogspot

Bài viết mới nhất hay còn gọi là Recent posts là một trong những thành phần quan trọng của blog, giúp website của bạn trong chuyên nghiệp hơn. Bài hướng dẫn ngày hôm nay sẽ giúp bạn những bài viết hiển thị với tiêu đề thay đổi, có tóm tắt nội dung, chuyển bài tự động.

Hình 1 - Bài viết mới nhất cho blogspot

Mẫu 1: Hiển thị tương tự hình 1
Để tạo Recent posts như trên, các thực hiện các bước như sau:

Bước 1: Đăng nhập Blogger.com --> Bố Cục (Layout)
Bước 2: Chọn thêm tiện ích à  HTML/Javascript và copy và paste đoạn code dưới đây vào html vừa hiện ra:

<style>
.gfg-root {
width: 100%;
height : auto;
position : relative;
overflow : hidden;
margin: 0 auto;
text-align : center;
font-size: 12px;
border: 1px solid #2da5da;
}
.gfg-title {
font-size: 18px;
font-family: times new roman;
color : #cd2122;
background-repeat: repeat;
line-height : 1.4em;
overflow : hidden;
padding: 5px;
text-transform: uppercase;
text-align: left;
border-bottom: #d8d8d8 solid 1px
}
.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: #558D47;
font-size: 16px;
font-weight: bold;
}
.gfg-subtitle {
display: none;
}
.gfg-list {
position : relative;
overflow : hidden;
text-align : left;
font-size: 14px !important;
}
.gfg-listentry .gfg-listentry-odd .gfg-listentry-even .gfg-listentry-odd a  .gfg-listentry-even a{}


.gfg-listentry {
line-height : 1.5em;
overflow : hidden;
white-space : nowrap;
text-overflow : ellipsis;
padding: 5px 5px 5px 2px;
margin: 5px 5px 5px 5px;
}
.gfg-listentry-odd {
background-color : #F2F2F2;
border-bottom : 1px dotted #2da5da;
padding: 5px 5px 5px 2px;
margin: 5px 5px 5px 5px;
}
.gfg-listentry-even {
background-color : #F2F2F2;
border-bottom : 1px dotted #CCCCCC;
padding: 5px 5px 5px 2px;
margin: 5px 5px 5px 5px;
}
.gfg-listentry-odd a{
color: #595959;
padding: 5px 5px 5px 2px;
margin: 5px 5px 5px 5px;
}
.gfg-listentry-even a{
color: #242424;
padding: 5px 5px 5px 2px;
margin: 5px 5px 5px 5px;
}
.gfg-listentry-highlight {
background: #FFFFFF;
}
.gfg-listentry-highlight:before {
position: absolute;
left: 0;
content: '\25BA ';
font-size: 14px;
color: #558D47;
}
.gfg-listentry-highlight a {
color: #242424;
}
.gfg-root .gfg-entry .gf-result {
position : relative;
background-color: #ffffff;
width : auto;
height : 100%;
padding-left : 10px;
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;
}
.gf-snippet {
font-style: italic !important;
}
.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://khamphamedia.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 : 10, displayTime : 6000, hoverTime : 600});} 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ả

Bước 3. Chọn vị trí đặt widget mong muốn

Bạn chỉ cần kéo thảo tiện ích vừa tạo vào vị trí bất kỳ mà bạn mong muốn.
Chú ý:  Một số thông tin bạn cần thay đổi cho phù hợp
- http://khamphamedia.blogspot.com/:  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 : 10: Số bài viết bạn muốn hiển thị

- displayTime : 6000, hoverTime : 600 : 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/jsapi

Thành 

https://sites.google.com/site/seovnpro/jsapi

Và

.http://www.google.com/uds/solutions/dynamicfeed/gfdynamicfeedcontrol.js

Thành

https://googledrive.com/host/0B9GaSUrdVodCT1dJejBfeEVnY3M

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

Mẫu 2: Hiển thị tương tự hình 2

Hình 2 - Recents Post widget

<style type='text/css'>
img.recent_thumb {padding:1px;width:60px;height:60px;border:0;
float:left;margin-right:10px;border:1px solid #999;}
.recent_posts_with_thumbs {float:left;width: 100%;min-height: 70px;padding: 0;font-size:12px;}
ul.recent_posts_with_thumbs li {padding-bottom:5px;padding-top:5px;min-height:65px;}
.recent_posts_with_thumbs a {text-decoration:none;}
.recent_posts_with_thumbs strong {font-size:10px;}</style>
<script style='text/javascript' src='https://googledrive.com/host/0B9GaSUrdVodCdUJqakRFbEduVmc'></script>
<script style='text/javascript'>
var numposts = 5;
var showpostthumbnails = true;
var displaymore = false;
var displayseparator = true;
var showcommentnum = false;
var showpostdate = false;
var showpostsummary = true;
var numchars = 100;</script>
<script src='/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentpostswiththumbs'></script>

Chú ý:

- width:60px;height:60px:  Là kích thước hình ảnh hiển thị.
Chúc các bạn thành công!

Nguồn: www.ikhampha.com

If You Enjoyed This, Take 5 Seconds To Share It

• Facebook
• Twitter
• Google+
• StumbleUpon
• Digg
• Delicious
• LinkedIn
• Reddit
• Technorati