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

Read More »

Tạo một slider recent post như thế nào

Tạo một slider recent post như thế nào

Bạn cần một slider để trình chiếu ảnh kèm theo link bài viết mà không cần phải cập nhật bài mới bằng tay mà là một cách tự động theo recent post, video sau là một minh họa:

Slider recent post

video:

Bạn copy đoạn code sau vào nơi bạn muốn hiển thị slider là được:

<!--slider-->

<style scoped='' type='text/css'>

ul.abt-sidebar-slider *{

-moz-box-sizing:border-box;

-webkit-box-sizing:border-box;

box-sizing:border-box;

}

ul.abt-sidebar-slider{

font:normal normal 11px embria

}

ul.abt-sidebar-slider,ul.abt-sidebar-slider li{

margin:0;

padding:0;

list-style:none;

position:relative

}

ul.abt-sidebar-slider{

width:100%;

height:350px

}

ul.abt-sidebar-slider li{

height:24.5%;

position:absolute; 

padding:0;

width:49.5%;

float:left;

overflow:hidden;

display:none

}

ul.abt-sidebar-slider li:nth-child(1),ul.abt-sidebar-slider li:nth-child(2),ul.abt-sidebar-slider li:nth-child(3),ul.abt-sidebar-slider li:nth-child(4){

display:block

}

ul.abt-sidebar-slider img{

border:0;

width:100%;

height:100%} ul.abt-sidebar-slider li:nth-child(1){width:100%;

height:49.5%;

margin:0 0 2px;

left:0;top:0

}

ul.abt-sidebar-slider li:nth-child(2){left:10;top:50%}

ul.abt-sidebar-slider li:nth-child(3){left:50.5%;top:50%}

ul.abt-sidebar-slider li:nth-child(4){width:100%;left:0;top:75%}

ul.abt-sidebar-slider .overlayx,ul.abt-sidebar-slider li{

-webkit-transition:all .4s ease-in-out;

-moz-transition:all .4s ease-in-out;

-o-transition:all .4s ease-in-out;

-ms-transition:all .4s ease-in-out;transition:all .4s ease-in-out

}

ul.abt-sidebar-slider .overlayx{

width:100%;

height:100%;

position:absolute;

z-index:1;

left:0;

top:0;

background-image:url(https://lh3.googleusercontent.com/-x4FA0ZhdvTU/VB6j4UavjxI/AAAAAAAACXE/qxvtd4gwSDA/w100-h169-no/slider-bg.png);

background-position:50% 50%;

background-repeat:repeat-x

}

ul.abt-sidebar-slider .overlayx,ul.abt-sidebar-slider img{

border:1px solid #326693;

-moz-border-radius:3px;

-webkit-border-radius:3px;

border-radius:3px

}

ul.abt-sidebar-slider li:nth-child(1) .overlayx{

background-position:50% 25%

}

ul.abt-sidebar-slider .overlayx:hover{

-ms-filter:&quot;progid:DXImageTransform.Microsoft. Alpha(Opacity=10)&quot;;

filter:alpha(opacity=10);-khtml-opacity:0.1;

-moz-opacity:0.1;opacity:0.1

}

ul.abt-sidebar-slider h4{

position:absolute;

bottom:30px;

z-index:1;

color:black;

margin:0;

width:100%;

padding:0 10px;

line-height:1.5em; 

font:embria;

font-weight:strong

}

ul.abt-sidebar-slider li:nth-child(1) h4,ul.abt-sidebar-slider li:nth-child(4) h4{

font-size:150%

}

ul.abt-sidebar-slider .label_text{

position:absolute;

bottom:10px;

left:10px;

z-index:1;

color:blue;

font-size:100%}

ul.abt-sidebar-slider li:nth-child(2) .autname,ul.abt-sidebar-slider li:nth-child(3) .autname{

display:none

}

.buttons{

margin:5px 0 0

}

.buttons a{

display:inline-block;

text-indent:-9999px;

width:15px;

height:25px;

position:relative

}

.buttons a::before{

content:&quot;&quot;;

width:0;

height:0;

border-width:8px 7px;

border-style:solid;

border-color:transparent #535353 transparent transparent;

position:absolute;

top:50%;

margin-top:-8px;margin-left:-10px;

left:50%

}

.buttons a.nextx::before{

border-color:transparent transparent transparent #535353;

margin-left:-3px

}

</style>

<div id='featuredpostside'/>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js' type='text/javascript'/>

<script src='https://trickstoo-slider-recent-posts.googlecode.com/svn/trickstoo-slider.js' type='text/javascript'/>

<script type='text/javascript'>

//<![CDATA[

FeaturedPostSide({

blogURL:"http://dientudieukhien.net",

MaxPost:8,

idcontaint:"#featuredpostside",

ImageSize:300,

interval:6000,

autoplay:true,

tagName:false

});

//]]>

</script>

<!--end slider-->

nguồn: dienudieukhien.net

Read More »