Tạo slider recent post kiểu list

Tạo slider recent post kiểu list

Một blog quan trọng nhất là số lượng bài viết và chất lượng của nó, tuy nhiên khi số lượng bài viết lớn dần thì việc tạo một recent post là quan trọng để điều hướng người dùng. Blogspot đã cung cấp cho ta một recent post tuy nhiên nó còn đơn điệu và đôi khi không đáp ứng được nhu cầu riêng của mình. Sau đây là một slider recent post theo kiểu list.

Slider kiểu list

XEMDEMO

Bạn vào Mẫu, tạo một Widget HTML/JAVASCRIP và pase đoạn code sau 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://dientublog.blogspot.com/feeds/posts/default?redirect=false&start-index=1&max-results=5'},];
new GFdynamicFeedControl(feeds, 'feedGadget',{title: 'Bài đăng mới nhất', numResults : 5, displayTime : 5000, hoverTime : 500});} google.load("feeds", "1");
google.setOnLoadCallback(showGadget);
</script>
<div id="feedGadget" align="center">
<img border="0" src="https://lh6.googleusercontent.com/-rZIKgR2CzKU/VB7xG9OBopI/AAAAAAAACYs/aDUen4Er37w/s128-no/loading.gif" width="40" height="40" />
</div>

* Ở đoạn code trên có một số bạn cần lưu ý:

• Bạn thay địa chỉ dientublog.blogspot.com thành địa chỉ của blog bạn nha.
• Max-results=5 và numResult=5, số 5 ở đây là số lượng bài xuất hiện trong list phía dưới
• Trong trường hợp bạn muốn ẩn list và chỉ xuất hiện post thì đổi

 .gfg-list {
position : relative;
overflow : hidden;
text-align : left;
}
Thành:
 .gfg-list {
display:none;
}






Trong trường hợp bạn chỉ xuất hiện list và chỉ xuất hiện post thì đổi

 .gfg-entry {
background-color: #FFFFFF;
width : 100%;
height : 9.2em;
position : relative;
overflow : hidden;
text-align : left;
margin-top : 3px;
}
Thành
 .gfg-entry {
display: none; }

Chúc bạn sẽ tùy chỉnh được theo nhu cầu của hình