Hướng dẫn cách thêm tiện ích Recent Post đơn giản mà đẹp

Recent Post

Chào các bạn!

Recent Post là một trong những tiện ích làm cho blog trở nên đẹp, chuyên nghiệp. Nó giúp cho độc giả dễ dàng tìm kiếm những bài viết mới nhất của blog vì recent post nghĩa là bài đăng gần đây hoặc bài mới đăng, rất là thú vị nhé! Bên cạnh việc làm cho blog trở nên chuyên nghiệp và thể hiện là chủ nhân của blog là một tay khó chơi thì nó cũng có những hạn chế đó là làm giảm tốc độ load trang, phải công nhận nhưng không đáng kể đâu. Sau đây mình sẽ hướng dẫn các bạn chèn 1 widget Recent Posts vào blog, widget này trông đơn giản nhưng mà đẹp và đặc biệt nó rất giống quảng cảo mà các blogger ao ước có được bấy lâu. Rata đơn giả

Bước 1: Đăng nhập vào blogger và vào phần "Bố cục" và chọn "Thêm tiện ích"

Bước 2: Thêm một tiện ích bất kỳ là HTML/Javascript 

Bước 3: Coppy toàn bộ mã dưới đây và dán nó vào cái tiện ích widget vừa thêm nhé!

<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://b-chiase.blogspot.com/feeds/posts/default?redirect=false&start-index=1&max-results=10'},];
new GFdynamicFeedControl(feeds, 'feedGadget',{title: 'Latest Posts',numResults : 10, displayTime : 5000, hoverTime : 500});} google.load("feeds", "1");
google.setOnLoadCallback(showGadget);
</script>
<div id="feedGadget">Loading...</div>

Trong đó: Các bạn nhớ thay url: http://b-chiase.blogspot.com/ là trang của các bạn nha! Còn các thông số khác các bạn có thể tự tùy biến thêm. Nếu không hiểu chỗ nào thì để lại commment cho e giải đáp. Chúc các bạn thành công!