Slide de postagens recentes

Views:
CÓDIGO JAVASCRIPT
(colar abaixo de </body>)

<!-- Início Easy  slide -->
  <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js' type='text/javascript'/>
  <script src='http://static.tumblr.com/uoel5vg/p51nl0jk4/easyslider1.7.js' type='text/javascript'/>
  <script type='text/javascript'>
    //<![CDATA[
    $(document).ready(function(){
      $("#slider").easySlider({
        auto: true,
        continuous: true
      });
    });
    //]]>
  </script>
  <!-- Final Easy Slide -->


CÓDIGO CSS
(colar acima de ]]></b:skin>)

/* Início Easy Slide  */
#slide-container {
position: relative;
height: 350px; /*ALTURA DO SLIDE, MANTENHA IGUAL EM TODAS AS MARCAÇÕES  */
width: 750px; /*LARGURA DO SLIDE, MANTENHA IGUAL EM TODAS AS MARCAÇÕES  */
top:0px;
padding:0px;
background:transparent;
}
#slide-container img{
width:100%;
height:auto;
}
#slider {
width: 750px; /*LARGURA DO SLIDE, MANTENHA COMO DEFINIU ACIMA  */
height: 350px;/*ALTURA DO SLIDE, MANTENHA COMO DEFINIU ACIMA  */
left: -12px; /*LEVA O SLIDE PARA A ESQUERDA, ALTERE DE ACORDO COM SEU TEMPLATE  */
margin-top: -5px;/*LEVA O SLIDE PARA O TOPO, ALTERE DE ACORDO COM SEU TEMPLATE  */
overflow-x: hidden;
overflow-y: hidden;
position: relative;
}
a.slider-category {
color: #bf9f79; /*COR DA FONTE DOS MARCADORES */
text-align: center;
margin-bottom: 20px;
margin-top: 13px;
display: block;
font: 22px 'Shadows Into Light Two';  /*TAMANHO E TIPO DA FONTE DOS MARCADORES */
}
span.readmore {
background: #444; /*COR DE FUNDO DO BOTÃO LEIA MAIS */
padding: 12px 22px;
margin-top: 9px;
margin-left: 40%;
display: inline-block;
font-family: Arial, sans serif;  /* FONTE DO BOTÃO LEIA MAIS */
text-transform: uppercase;  /*COLOCA A FONTE EM CAPSLOCK, APAGUE SE PREFERIR */
letter-spacing: 1px;
font-size: 11px;  /*TAMANHO DA FONTE LEIA MAIS */
-webkit-transition: all 0.4s ease;
-moz-transition: all 0.4s ease;
transition: all 0.4s ease;
}
span.readmore:hover{
background: #bf9f79; /*COR DE FUNDO DO BOTÃO LEIA MAIS HOVER */
}
span.readmore a{
color:#fff; /*COR DA FONTE LEIA MAIS */
}
.slide-desc h2 {
display: block !important;
margin: -10px auto 10px !important;
font-family: century gothic, 'source sans pro', sans serif; /* FONTE DO TÍTULO DO POST */
font-weight: normal !important;
text-align: center;
text-transform: none;
letter-spacing: 2px;
font-size: 25px;
width: 400px; /*LARGURA OCUPADA PELO TÍTULO, ALTERE SE PREFERIR*/
}
.slide-desc {
background: rgba(255, 255, 255, 0.85); /*COR DE FUNDO DA CAIXA DE TÍTULO */
color: #231f20; /*COR DA FONTE DO TÍTULO DO POST */
padding: 10px;
position: absolute;
top: 24%;
padding: 11px 0px 24px;
width: 500px; /*TAMANHO DA ÁREA DO TÍTULO/LEIA MAIS E MARCADORES */
left: 50%;
margin-left: -250px;
z-index: 99999;
}
#slider ul {
padding: 0;
margin: 0;
width: 750px;  /*LARGURA DO SLIDE, MANTENHA IGUAL EM TODAS AS MARCAÇÕES  */
height: 350px;  /*ALTURA DO SLIDE, MANTENHA IGUAL EM TODAS AS MARCAÇÕES  */
}
#slider li {
width: 750px;  /*LARGURA DO SLIDE, MANTENHA IGUAL EM TODAS AS MARCAÇÕES  */
height: 350px;  /*ALTURA DO SLIDE, MANTENHA IGUAL EM TODAS AS MARCAÇÕES  */
overflow: hidden;
margin: 0;
padding: 0;
list-style: none;
}
#prevBtn, #nextBtn {
display: none;
width: 30px;
height: 77px;
position: relative;
text-indent: -9999px;
top: -200px;
left: 5px;
}
#nextBtn {
left: 612px !important;
top: -280px;
}
#prevBtn a, #nextBtn a {
display: block;
position: relative;
width: 30px;
height: 77px;
background: none;
}
#nextBtn a {
background: none;
}
/* Final Easy Slide  */


CÓDIGO HTML
(colar como gadget HTML/JAVASCRIPT)

<div id="slider">
<script style="text/javascript">
    var showpostthumbnails_gal  = true;
    var showpostsummary_gal     = true;
    var random_posts            = false;
     function showgalleryposts(json) {
    var numPosts = json.feed.openSearch$totalResults.$t;
    var indexPosts = new Array();
    document.write('<ul>');
    for (var i = 0; i < numPosts; ++i) {
        indexPosts[i] = i;
    }
    if (random_posts == true){
    indexPosts.sort(function() {return 0.5 - Math.random()});
    }
    if (numposts_gal > numPosts) {
        numposts_gal = numPosts;
    }
    for (i = 0; i < numposts_gal; ++i) {
        var entry = json.feed.entry[i];
        var post_category = entry.category[0].term;
        var category = '<a class="slider-category" href="/search/label/'+ post_category +'?max-results=10">'+ post_category +'</a>';
        var entry_gal = json.feed.entry[indexPosts[i]];
        var posttitle_gal =  entry_gal.title.$t;
        for (var k = 0; k <  entry_gal.link.length; k++) {
            if ( entry_gal.link[k].rel == 'alternate') {
                posturl_gal =  entry_gal.link[k].href;
                break;
            }
        }
        if ("content" in entry_gal) {
            var postcontent_gal = entry_gal.content.$t
        }
        s = postcontent_gal;
        a = s.indexOf("<img");
        b = s.indexOf("src=\"", a);
        c = s.indexOf("\"", b + 5);
        d = s.substr(b + 5, c - b - 5);
        if ((a != -1) && (b != -1) && (c != -1) && (d != "")) {
            var thumburl_gal = d
        } else var thumburl_gal = 'https://4.bp.blogspot.com/-Ft9vQdRayDs/WV1zjwlcZRI/AAAAAAABXao/fJUArFkK6vg-rBcRuV9pyj0VcxHpYURGACLcBGAs/s1600/SEM-IMAGEM.png';
        document.write('<li><div id="slide-container"><span class="slide-desc">');
        document.write(category + '<h2 style="margin:10px 0px;">' + posttitle_gal + '</h2>');
        document.write('<span class="readmore"><a href="' + posturl_gal + '">Leia Mais </a></span>');
        var re = /<\S[^>]*>/g;
        postcontent_gal = postcontent_gal.replace(re, "");
        if (showpostsummary_gal == true) {
            if (postcontent_gal.length < numchars_gal) {
                document.write(postcontent_gal);
                document.write('</span>')
            } else {
                postcontent_gal = postcontent_gal.substring(0, numchars_gal);
                var quoteEnd_gal = postcontent_gal.lastIndexOf(" ");
                postcontent_gal = postcontent_gal.substring(0, quoteEnd_gal);
                document.write('</span>')
            }
        }
        document.write('<a href="' + posturl_gal + '"><img src="' + thumburl_gal + '" width="px" height=""/></a></div>');
        document.write('</li>');
    }
    document.write('</ul>');
 
}

</script>

<script style="text/javascript">
 var numposts_gal = 20;
 var numchars_gal = 0;
 var random_posts = false; // random posts

</script>
<script src="AQUI COLOQUE O ENDEREÇO DE SEU BLOG/feeds/posts/default?orderby=published&alt=json-in-script&callback=showgalleryposts&max-results=999999"></script>
</div>





Home Sobre mim Tutoriais Loja de templates Portfólio Fanpage