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