Slide de posts recentes automático para sidebar

Views:
<style scoped="" type="text/css">
ul.rcentside *{
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
box-sizing:border-box;
 }
ul.rcentside{
font-size:11px; /*TAMANHO DA FONTE DOS TÍTULOS*/
}
ul.rcentside,ul.rcentside li{
margin:0;
padding:0;
list-style:none;
position:relative;
 }
ul.rcentside{
width:100%; /*LARGURA TOTAL DO SLIDE, NÃO ALTERE*/
height:600px; /*ALTURA TOTAL DO SLIDE, ALTERE SE DESEJAR MAIOR*/
 }
ul.rcentside li{
height:24.5%;
position:absolute;
padding:0;
width:49.5%;
float:left;
overflow:hidden;
display:none;
 }
ul.rcentside li:nth-child(1),ul.rcentside li:nth-child(2),ul.rcentside li:nth-child(3),ul.rcentside li:nth-child(4){display:block }
ul.rcentside img{
border:0;
width:100%;
height:auto;
}
ul.rcentside li:nth-child(1){
width:100%;
height:49.5%;
margin:0 0 2px;
left:0;
top:0;
 }
ul.rcentside li:nth-child(2){
left:0;
top:50%;
 }
ul.rcentside li:nth-child(3){
left:50.5%;
top:50%;
 }
ul.rcentside li:nth-child(4){
width:100%;
left:0;
top:75%;
 }
ul.rcentside .overlayx,ul.rcentside li{
transition:all .4s ease-in-out;
 }
ul.rcentside .overlayx{
width:100%;
height:100%;
position:absolute;
z-index:2;
left:0;
top:0;
opacity:.6;
background-image:url(http://1.bp.blogspot.com/-FtnGJHMcWH8/UIV3IE-aaJI/AAAAAAAAGHs/WvLypnWxg5A/s1600/linebg-fade.png); /*TEXTURA SOBRE A IMAGEM, DELETE SE PREFERIR*/
background-position:50% 50%;
background-repeat:repeat-x;
 }
ul.rcentside .overlayx,ul.rcentside img{
margin:3px;
}
ul.rcentside li:nth-child(1).overlayx{
background-position:50% 25%;
 }
ul.rcentside .overlayx:hover{
opacity:.1;
 }
ul.rcentside h4{
position:absolute;
bottom:10px;
left:10px;
right:10px;
z-index:2;
color:#ffffff; /*COR DO TEXTO*/
font-weight:700; /*ESPESSURA DA FONTE*/
margin:0;
padding:10px;
line-height:1.5em;
overflow:hidden;
transition:all .3s;
}
ul.rcentside li:hover h4{
bottom:30px;
}
ul.rcentside li:nth-child(1)h4,ul.rcentside li:nth-child(4)h4{
font-size:150%;
 }
ul.rcentside .label_text{
position:absolute;
bottom:0;
left:20px;
z-index:2;
color:#ffffff; /*COR DA DATA E AUTOR*/
font-size:90%; /*TAMANHO DA FONTE AUTOR E DATA*/
opacity:0;
transition:all .3s;
}ul.rcentside li:hover .label_text{
bottom:20px;
opacity:1;
}
ul.rcentside li:nth-child(2).autname,ul.rcentside 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:"";
width:0;
height:0;
border-width:8px 7px;
border-style:solid;
border-color:transparent #535353 transparent transparent; /*COR DOS BOTÕES*/
position:absolute;
top:50%;
margin-top:-8px;
margin-left:-10px;
left:50%;
 }
.buttons a.nextx::before{
border-color:transparent transparent transparent #535353; /*COR DOS BOTÕES MANTENHA IGUAL ACIMA*/
margin-left:-3px;
 }
</style>
<div id="featuredpostside"></div>
<script type='text/javascript'>
function FeaturedPostSide(a){(function(e){var h={blogURL:"",MaxPost:4,idcontaint:"",ImageSize:100,interval:5000,autoplay:false,loadingClass:"loadingxx",pBlank:"http://1.bp.blogspot.com/-htG7vy9vIAA/Tp0KrMUdoWI/AAAAAAAABAU/e7XkFtErqsU/s1600/grey.gif",MonthNames:["Jan","Fev","Mar","Abr","Mai","Jun","Jul","Ago","Set","Out","Nov","Dez"],tagName:false};h=e.extend({},h,a);var g=e(h.idcontaint);var d=h.MaxPost*200;g.html('<div class="sliderx"><ul class="rcentside"></ul></div><div class="buttons"><a href="#" class="prevx">prev</a><a href="#" class="nextx">next</a></div>');var f=function(w){var q,k,m,u,x,p,t,v,r,l="",s=w.feed.entry;for(var o=0;o<s.length;o++){for(var n=0;n<s[o].link.length;n++){if(s[o].link[n].rel=="alternate"){q=s[o].link[n].href;break}}if("media$thumbnail" in s[o]){u=s[o].media$thumbnail.url.replace(/\/s[0-9]+\-c/g,"/s"+h.ImageSize+"-c")}else{u=h.pBlank.replace(/\/s[0-9]+(\-c|\/)/,"/s"+h.ImageSize+"$1")}k=s[o].title.$t;r=s[o].published.$t.substring(0,10);m=s[o].author[0].name.$t;x=r.substring(0,4);p=r.substring(5,7);t=r.substring(8,10);v=h.MonthNames[parseInt(p,10)-1];l+='<li><a target="_blank" href="'+q+'"><div class="overlayx"></div><img class="random" src="'+u+'"/><h4>'+k+'</h4></a><div class="label_text"><span class="date"><span class="dd">'+t+'</span> <span class="dm">'+v+'</span> <span class="dy">'+x+'</span></span> <span class="autname">'+m+"</span></div></li>"}e("ul",g).append(l).addClass(h.loadingClass)};var c=function(){e(h.idcontaint+" .nextx").click()};var b=function(){e.get((h.blogURL===""?window.location.protocol+"//"+window.location.host:h.blogURL)+"/feeds/posts/summary"+(h.tagName===false?"":"/-/"+h.tagName)+"?max-results="+h.MaxPost+"&orderby=published&alt=json-in-script",f,"jsonp");setTimeout(function(){e(h.idcontaint+" .prevx").click(function(){e(h.idcontaint+" .sliderx li:first").before(e(h.idcontaint+" .sliderx li:last"));return false});e(h.idcontaint+" .nextx").click(function(){e(h.idcontaint+" .sliderx li:last").after(e(h.idcontaint+" .sliderx li:first"));return false});if(h.autoplay){var i=h.interval;var j=setInterval(c,i);e(h.idcontaint+" .sliderx li:first").before(e(h.idcontaint+" .sliderx li:last"));e(h.idcontaint+" .sliderx").hover(function(){clearInterval(j)},function(){j=setInterval(c,i)})}e("ul",g).removeClass(h.loadingClass)},d)};e(document).ready(b)})(jQuery)};
//<![CDATA[
FeaturedPostSide({
  blogURL: "https://www.elainegaspareto.com",
  MaxPost: 90,
  idcontaint: "#featuredpostside",
  ImageSize: 300,
  interval: 5000,
  autoplay: true,
  tagName: false
});
//]]>
</script>
Home Sobre mim Tutoriais Loja de templates Portfólio Fanpage