24mar2016

Blogger: Slider automático com setas (2 modelos)

  • Categorias: Blogosfera   |   Tags:
  • Oi pessoal, como estão?

    Fazia tempo que não aparecia por aqui, né?! Os motivos são faculdade + muitas encomendas. Mas voltei trazendo pra vocês um tutorial muito pedido lá no grupo do blog no Facebook, um slider (ou slideshow) nesse estilo:

    Blogger Slider automático com setas 1

    Esse modelo de slider é AUTOMÁTICO. Isso significa que os posts aparecem nele automaticamente, sem você precisar incluir cada imagem e link. Ótimo, né?! Mas a melhor parte é que você pode escolher apenas um marcador para exibir, por exemplo, apenas os posts com o marcador "Resenhas".

     

    Vamos ao tutorial?

    Coracao5 1 - No painel do Blogger vá em Modelo > Editar HTML. Pesquise por ]]></b:skin> e cole ACIMA um dos códigos a seguir (escolher 1 modelo):

    MODELO 1 - GERAL

    Blogger Slider automático com setas 2

    /* ---- CAROUSEL ----- */
    #carousel{
    background-color: transparent;
    width: 700px;
    height:354px;
    margin: 0 auto;
    padding: 20px 0px 10px 0px;
    position:relative;
    border-top: 0px solid #FEE7D4;
    border-right: 0px dashed #FEE7D4;
    border-left: 0px dashed #FEE7D4;
    border-bottom: 0px dashed #FEE7D4;
    display:block;
    }
    #carousel .container{
    position:absolute;
    left:35px;
    margin: 50px 0px 0px 0px;
    width: 700px;
    height:200px;
    overflow:hidden;
    border: 0px solid #cccccc;
    }
    #carousel img {
    width: 187px;
    height: 187px;
    }
    #carousel #previous_button{
    position:absolute;
    margin: 50px 0px 0px 5px;
    width:31px;
    height:210px;
    background: url(https://lh3.googleusercontent.com/-l8_dhVk0Wso/VvNhuEGK2fI/AAAAAAAAEDc/4DpBg2dBrFI2TpzyrqKQIDYk8FRvXww9gCCo/s23-Ic42/SetaEsquerda.png) no-repeat center;
    z-index:100;
    cursor:pointer;
    border-right:0px solid #ccc}
    #carousel #previous_button:hover{
    background: url(https://lh3.googleusercontent.com/-0oTDcE1pZns/VvNhupaPdzI/AAAAAAAAEDk/czfX0w3LraUXjGNBuhJ8I3TEdn8Ldjf-QCCo/s23-Ic42/SetaEsquerdaHover.png) no-repeat center}
    #carousel #next_button{
    position:absolute;
    right:0;
    margin: 50px 5px 0px 0px;
    width:31px;
    height:210px;
    background: url(https://lh3.googleusercontent.com/-VTnP2gpbXX8/VvNhuF5rxwI/AAAAAAAAEDc/MoYqBx7AZJsMRiFv8Az0AlrE3JU3bk6GQCCo/s23-Ic42/SetaDireita.png) no-repeat center;z-index:100;cursor:pointer;border-left:0px solid #ccc}
    #carousel #next_button:hover {background: url(https://lh3.googleusercontent.com/-SF-5nNLG408/VvNhuEy8grI/AAAAAAAAEDk/W2wf3Mo1ZXcGvs_Hz5m5IyFdaG0RMS9ygCCo/s23-Ic42/SetaDireitaHover.png) no-repeat center}
    #carousel ul{width:100000px;position:relative;margin-top:10px}
    #carousel ul li{
    background:transparent url() repeat-x top;
    display:inline;
    float:left;
    text-align:center;
    font-size: 15px;
    font-family: 'Arial';
    font-weight: normal;
    line-height:1.2em;
    border:0px solid #ccc;
    width: 200px;
    margin:0 4px 20px 0px;
    padding:6px;
    }
    #carousel ul li:hover{filter:alpha(opacity=75);opacity:.75;}
    #carousel ul li a.slider_title{
    display:none;
    margin-top:5px;
    text-decoration: none;
    }
    #carousel ul li a.slider_title:hover{color:#A7725D}
    #carousel a img{display:block;background:transparent;margin-top:0; text-decoration: none;}

     

    MODELO 2 - PARA RESENHAS LITERÁRIAS

    Blogger Slider automático com setas 3

    /* ---- CAROUSEL ----- */
    #carousel{
    background-color: transparent;
    width: 700px;
    height: 230px;
    margin: 0 auto;
    padding: 20px 0px 10px 0px;
    position:relative;
    border-top: 0px solid #FEE7D4;
    border-right: 0px dashed #FEE7D4;
    border-left: 0px dashed #FEE7D4;
    border-bottom: 0px dashed #FEE7D4;
    display:block;
    }
    #carousel .container{
    position:absolute;
    left:35px;
    margin: 50px 0px 0px 0px;
    width: 700px;
    height:230px;
    overflow:hidden;
    border: 0px solid #cccccc;
    }
    #carousel img {
    width: 143px;
    height: 230px;
    }
    #carousel #previous_button{
    position:absolute;
    margin: 50px 0px 0px 5px;
    width:31px;
    height:245px;
    background: url(https://lh3.googleusercontent.com/-l8_dhVk0Wso/VvNhuEGK2fI/AAAAAAAAEDc/4DpBg2dBrFI2TpzyrqKQIDYk8FRvXww9gCCo/s23-Ic42/SetaEsquerda.png) no-repeat center;
    z-index:100;
    cursor:pointer;
    border-right:0px solid #ccc}
    #carousel #previous_button:hover{
    background: url(https://lh3.googleusercontent.com/-0oTDcE1pZns/VvNhupaPdzI/AAAAAAAAEDk/czfX0w3LraUXjGNBuhJ8I3TEdn8Ldjf-QCCo/s23-Ic42/SetaEsquerdaHover.png) no-repeat center}
    #carousel #next_button{
    position:absolute;
    right:0;
    margin: 50px 5px 0px 0px;
    width:31px;
    height:245px;
    background: url(https://lh3.googleusercontent.com/-VTnP2gpbXX8/VvNhuF5rxwI/AAAAAAAAEDc/MoYqBx7AZJsMRiFv8Az0AlrE3JU3bk6GQCCo/s23-Ic42/SetaDireita.png) no-repeat center;z-index:100;cursor:pointer;border-left:0px solid #ccc}
    #carousel #next_button:hover {background: url(https://lh3.googleusercontent.com/-SF-5nNLG408/VvNhuEy8grI/AAAAAAAAEDk/W2wf3Mo1ZXcGvs_Hz5m5IyFdaG0RMS9ygCCo/s23-Ic42/SetaDireitaHover.png) no-repeat center}
    #carousel ul{width:100000px;position:relative;margin-top:10px}
    #carousel ul li{
    background:transparent url() repeat-x top;
    display:inline;
    float:left;
    text-align:center;
    font-size: 15px;
    font-family: 'Arial';
    font-weight: normal;
    line-height:1.2em;
    border:0px solid #ccc;
    width:143px;
    margin:0 4px 20px 0px;
    padding:6px;
    }
    #carousel ul li:hover{filter:alpha(opacity=75);opacity:.75;}
    #carousel ul li a.slider_title{
    display:none;
    margin-top:5px;
    text-decoration: none;
    }
    #carousel ul li a.slider_title:hover{color:#A7725D}
    #carousel a img{display:block;background:transparent;margin-top:0; text-decoration: none;}

     

    Coracao5 2 - Agora, ainda nessa página pesquise por </head> e cole ACIMA o código a seguir:

    <script type='text/javascript'>
    //<![CDATA[
    imgr = new Array();
    imgr[0] = "";
    showRandomImg = true;
    aBold = true;
    summaryPost = 140;
    summaryTitle = 25;
    numposts1 = 10;
    label1 = "MARCADOR";
    function removeHtmlTag(strx,chop){
    var s = strx.split("<");
    for(var i=0;i<s.length;i++){
    if(s[i].indexOf(">")!=-1){
    s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
    }
    }
    s = s.join("");
    s = s.substring(0,chop-1);
    return s;
    }
    function showrecentposts(json) {
    j = (showRandomImg) ? Math.floor((imgr.length+1)*Math.random()) : 0;
    img = new Array();
    document.write('<ul>');
    for (var i = 0; i < numposts1; i++) {
    var entry = json.feed.entry[i];
    var posttitle = entry.title.$t;
    var pcm;
    var posturl;
    if (i == json.feed.entry.length) break;
    for (var k = 0; k < entry.link.length; k++) {
    if (entry.link[k].rel == 'alternate') {
    posturl = entry.link[k].href;
    break;
    }
    }
    for (var k = 0; k < entry.link.length; k++) {
    if (entry.link[k].rel == 'replies' && entry.link[k].type == 'text/html') {
    pcm = entry.link[k].title.split(" ")[0];
    break;
    }
    }
    if ("content" in entry) {
    var postcontent = entry.content.$t;}
    else
    if ("summary" in entry) {
    var postcontent = entry.summary.$t;}
    else var postcontent = "";
    postdate = entry.published.$t;
    if(j>imgr.length-1) j=0;
    img[i] = imgr[j];
    s = postcontent ; 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!="")) img[i] = d;
    //cmtext = (text != 'no') ? '<i><font color="'+acolor+'">('+pcm+' '+text+')</font></i>' : '';
    var month = [1,2,3,4,5,6,7,8,9,10,11,12];
    var month2 = ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];
    var day = postdate.split("-")[2].substring(0,2);
    var m = postdate.split("-")[1];
    var y = postdate.split("-")[0];
    for(var u2=0;u2<month.length;u2++){
    if(parseInt(m)==month[u2]) {
    m = month2[u2] ; break;
    }
    }
    var daystr = day+ ' ' + m + ' ' + y ;
    var trtd = '<li class="car"><div class="thumb"><a href="'+posturl+'"><img width="160" height="240" class="alignnone" src="'+img[i]+'"/></a></div><p><a class="slider_title" href="'+posturl+'">'+posttitle+'</a></p></li>';
    document.write(trtd);
    j++;
    }
    document.write('</ul>');
    }
    //]]>
    </script>

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

    - Substitua o trecho destacado em azul (MARCADOR) pelo marcador dos posts que deseja exibir. Exemplo: Resenhas.

    - Substitua o trecho destacado em vermelho (10) pela quantidade de imagens à exibir.

     

    E clique em salvar.

     

    Coracao5 3 - Agora, vá em LAYOUT e no local onde o slider será inserido adicione um novo gadget de HTML/Java Script. Dentro dele cole o código a seguir:

    <div id="carousel">
    <div id="previous_button"></div>
    <div class="container" style="visibility: visible; overflow: hidden; z-index: 2; width: 700px;">
    <script>document.write("<script src=\"/feeds/posts/default/-/"+label1+"?max-results="+numposts1+"&orderby=published&alt=json-in-script&callback=showrecentposts\"><\/script>");</script>

    <script src="/feeds/posts/default/-/MARCADOR?max-results=10&amp;orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts"></script>
    <div class="clear"></div>
    </div>
    <div id="next_button"></div>
    </div>
    <script type='text/javascript'>
    (function($) { $(document).ready(function(){
    $("#carousel .container").jCarouselLite({
    auto:2000,
    scroll: 1,
    speed: 800,
    visible: 3,
    start: 0,
    circular: true,
    btnPrev: "#previous_button",
    btnNext: "#next_button"
    });
    })})(jQuery)
    </script>
    <div style='clear: both;'></div>

    - Substitua o trecho destacado em azul (MARCADOR) pelo marcador dos posts que deseja exibir. Deve ser o mesmo do passo anterior.

    - Substitua o trecho destacado em vermelho (6) pela quantidade de imagens visíveis no slider. No primeiro modelo são 3 e no segundo modelo são 4.

    - Substitua o trecho destacado em laranja (10) pela quantidade de imagens exibidas no total.

     

    E salve o gadget.

     

    Fim! :)

     

    AS SETINHAS NÃO FUNCIONAM?

    Esse slider, quando utilizado com outros scripts, pode apresentar conflito. Quando isso acontece, as setinhas para as laterais não funcionam. Se esse for o seu caso, recomendo que remova os outros scripts instalados fazendo testes até descobrir com qual deles é o conflito.

     

    É isso, pessoal!
    Não consegui achar o autor desse slider, se alguém souber, por favor me informe nos comentários para que eu possa creditar, ok?! Obrigada! :)

    Um beijo!

    43 Comentários em “Blogger: Slider automático com setas (2 modelos)”

    1. Beatriz Andrade 24 março 2016 at 1:38 #

      Eu usava no meu blog um modelo parecido com esse mas a cada nova resenha, eu tinha que colocar o um novo código. Esse é bem melhor, tinha que ser você!!!! <3 <3 <3

      • Karoline 28 março 2016 at 17:15 #

        Obrigaaada <3

    2. Luciana Oliveira 24 março 2016 at 13:17 #

      Finalmente você fez *O* Eu to lá no grupo do Follow e tinha um monte de meninas desesperadas querendo saber como fazia esse carrossel, muito obrigada!!

    3. Mara 25 março 2016 at 9:33 #

      Tava loucaaa por um tutorial assim ,só que ficou meio confuso pra quem for usar o código do slide Geral ,usa quais códigos alem do primeiro ? ,pq não vamos botar nenhuma categoria .Eu não consegui colocar no meu Blog o Slide geral .

      • Karoline 28 março 2016 at 17:12 #

        Oi Mara, na verdade o "Geral" é apenas em quadradinhos, essa é a única diferença entre os modelos, mas ele também precisa ter uma categoria.

        No passo 1 você precisa escolher apenas 1 modelo, depois segue os próximos passos normalmente.

        Consegui explicar melhor? rs
        Qualquer coisa avisa aqui! :)

        Beijos

    4. aline 26 março 2016 at 12:00 #

      Oi carol testei em meu blog teste e deu super certo ,ja no meu mesmo as imagens não aparecem. Mais obrigada por ter postado o tutorial rsrs faço parte la do grupo e era uma das doidas desesperadas atras deste slide

      • Karoline 28 março 2016 at 17:14 #

        Oi Aline!
        Você escreveu a categoria exatamente como usou nos posts? Letras maiúsculas e minúsculas dão diferença, tá?! Sua categoria escolhida já posts para exibir no slider?
        Bjs

        • aline 30 março 2016 at 21:36 #

          Carol tentei novamente e realmente o marcador estava escrito errado agora ficou direitinho, obrigada pela ajuda *-----*

    5. Zé Pedro 26 março 2016 at 12:13 #

      Olá Karol, já conhecia o seu trabalho no Inlove Design, mas só há uns dias descobri o seu blog pessoal e adorei-o! O design é sem dúvida apelativo e organizado e o conteúdo ainda melhor! Muitos parabéns!

      Visite o meu blog pessoal se tiver um tempinho. :)

      • Karoline 28 março 2016 at 17:15 #

        Oi, Zé Pedro! Muito obrigada pelo elogio! Fico muito feliz

    6. Rafaela 27 março 2016 at 20:08 #

      Oi Ka,no meu blog apareceu só as setas e as imagens não :(
      Pode me ajudar?Um beijo!

      • Jéssika Daiane 28 março 2016 at 14:49 #

        Oi nao sou a Ka, mais aconteceu comigo, escrevi o nome da categoria tudo em Maiúsculo ai apaguei e coloquei em minúsculo e apareceu! espero ter ajudado =D

    7. Anna Kcau 28 março 2016 at 0:14 #

      Muito legal a dica, vou salvar aqui nos favoritos pra quando precisar <3

      • Karoline 28 março 2016 at 17:17 #

        Obrigada, Anna! <3

    8. Letícia 28 março 2016 at 10:25 #

      Esse post me salvou, como muitos do seu blog!!
      Beijoos.
      http://www.amordeluaazul.com.br/

      • Karoline 28 março 2016 at 17:17 #

        Obrigada, Letícia! Beijos <3

    9. Mika 29 março 2016 at 0:34 #

      Gostei tanto do tutorial mas infelizmente os slides ficaram em cima do post e do perfil. Não sei arrumar.

      • Lilian Gabriella 4 janeiro 2017 at 12:32 #

        Estou tendo o mesmo problema.

    10. Marcelo Júnior 29 março 2016 at 15:04 #

      Perfeito!! Parabéns!
      Uma sugestão:
      Poderia criar também um gadget de "Ultimos Comentários" personalizado!

    11. Vitória Zavattieri 30 março 2016 at 9:50 #

      Eu estava a muito tempo procurando o carossel para resenhas! Obrigada mesmo! Consegui colocar certinho, só que ficou muito perto do campo de posts... tem como fazer ele subir um pouco ou os posts descerem?

    12. Vitória Zavattieri 30 março 2016 at 9:50 #

      Eu estava a muito tempo procurando o carrossel para resenhas! Obrigada mesmo! Consegui colocar certinho, só que ficou muito perto do campo de posts... tem como fazer ele subir um pouco ou os posts descerem?

    13. Nathy 31 março 2016 at 10:46 #

      Esse gadgets que tem no seu blog "xx pessoas amaram" poderia fazer um post ensinando

    14. TAINARA RAMOS 6 abril 2016 at 12:55 #

      Flor, poderia me dar uma ajudinha?

      Quando posto a segunda parte do tutorial antes de dá erro... Varias partes ficam em vermelho, e apontando como erro... eis as partes:

      [logo na primeira frase o < fica em vermelho]

      var s = strx.split ( "<"); [na linha 12 o ") + 1, s [i] .length);
      } [na linha 15 o sinal de = aponta como erro]

      s = s.substring (0, costeleta-1); [na linha 19 o = tbm da erro]

      document.write ( ''); [na linha 25 o da erro]

      a partir de entao as linhas todas tem algum sinalzinho de erro, e o pior é nessa parte:

      (!!!! (a = - 1) && (b = - 1) && (c = - 1) && (d = "")) se img [i] = d;
      // cmtext = (text = "não"!)? ' (' + pcm + '' + texto + ') ': '';
      var mês = [1,2,3,4, 5,6,7,8,9,10,11,12];
      var mês2 = [ "Janeiro", "fevereiro", "Mar", "abril", "pode", "Jun", "julho", " agosto "," setembro "," outubro "," novembro "," dezembro "];
      dia var = postdate.split (" - ") [2] .substring (0,2);
      var m = postdate.split (" - ") [1];
      var y = postdate.split (" - ") [0];
      for (var u2 = 0; u2 <month.length; u2 ++) {
      if (parseInt (m) == mês [U2] ) {
      m = mês2 [U2]; break;
      }
      }
      var daystr = dia + '' + m + '' + y;
      var trtd = ' <a class =" slider_title "

      essa parte esta toda em vermelho dando erro...

      Nao sei porque e nem o que fazer para darcerto, pode me ajudar?

    15. Giooh Oliveira 7 abril 2016 at 22:48 #

      Karol, se eu quiser colocar vários marcadores, como faço? Dá pra fazer isso?

    16. Isabelly 14 abril 2016 at 11:35 #

      Oi

      Adorei os slides, porem quando chego na parte: ");

      sempre dá erro no src=\

      to sem saber o que fazer, pode me ajudar?

    17. Bita 18 abril 2016 at 19:25 #

      Oiii!!! Acabei de criar um blog e vim aqui pegar dicas. POR FAVOR, ensina a fazer esse"x pessoas amara"????? Não tem tutorial em lugar nenhummmm

    18. Vitor 18 maio 2016 at 12:03 #

      Obrigado Karol! Tutorial maravilhoso. Ficou lindo no meu blog ! <3 Parabéns, continue talentosa assim, e tão caridosa com seus leitores ! ♥

    19. Jéssica Leite 27 maio 2016 at 17:35 #

      Oi, Karol!
      Eu tentei colocar a versão de resenhas literárias e funciona perfeitamente, porém acaba ficando em cima das postagens do blog. Você pode me ajudar a resolver isso?
      Muito obrigada desde já!
      Adoro seu cantinho!
      Beijos!

    20. Angelina 3 junho 2016 at 11:01 #

      Não consegui :(

    21. Amanda Emanoele 14 junho 2016 at 10:22 #

      Quando eu coloco para editar e tal, não encontro esse ]]>

    22. Eli Martins | Blog Encantada 6 julho 2016 at 13:38 #

      Karoline, que post barbaro, esta função é ótima para destacar nossos posts.
      Aproveitando, deixa eu te perguntar uma coisa:

      Existe algum tipo de slide de fotos que dê para colocar no corpo do post. Por exemplo, meu blog é de decoração, então sempre insiro um "zilhão" de fotos para ilustrar o post, penso que se fosse via slide no tamnaho das fotos que costumo fazer seria bem mais bonitinho.

      Se souber se existe essa possibilidade me avise por favor.

      Obrigada

      Eli

    23. Sarah 13 julho 2016 at 21:16 #

      Mds esse blog é maravilhoso, parabéns pelo conteúdo de qualidade!
      Seus tutoriais me ajudaram muuuito!
      Obrigada e beijosss!

      • Karoline 22 julho 2016 at 15:09 #

        Muito obrigada, Sarah! ♥

    24. Ana Macedo 8 agosto 2016 at 18:52 #

      Oi
      Eu tentei colocar a versão de resenhas literárias e funciona perfeitamente, porém acaba ficando em cima das postagens do blog. Você pode me ajudar a resolver isso?
      Atenciosamente, Ana

    25. serena 12 setembro 2016 at 17:51 #

      Oi Karol, amei seu tutorial, mas gostaria de saber se tem como fazer no wordpress? Já procurei por tudo um slider assim, mão não consigo encontrar :( Obrigada!!!

    26. Gabriel Baleroni 7 outubro 2016 at 22:32 #

      Oi, tudo bem.
      Tentei aplicar no blog da minha esposa de teste mas não consegui, não aparecem as imagens e a tag eu coloquei corretamente, aconteceu com alguem mais?

    27. Laah Ribeiro 1 dezembro 2016 at 15:58 #

      Karoline, vc pode me ajudar? Não está pegando no meu blog... fica bugando e nn aparece as setas, e fica todo rosa o slide... :'(

      Laah
      http://literaryheartt.blogspot.com.br/

    28. Daniela 9 dezembro 2016 at 15:02 #

      Oi, você pode me ajudar? Fiz tudo certinho e apareceu as imagens e as setas. Mas o slide não anda. As imagens ficam paradas e quando clico na seta elas não se movem. Têm alguma coisa errada?

    29. Catrine Vieira dos Santos 17 dezembro 2016 at 22:32 #

      Já tentei várias vezes mas fica com o fundo preto. :( O que faço?

    30. TAYNARA BATISTA DE PAULA 10 fevereiro 2017 at 11:34 #

      usei e deu super certo obrigada

    31. Philipe Nogueira 18 maio 2017 at 17:18 #

      Olá, boa tarde, já conheço seu blog à um tempinho, venho sempre do google para pegar algumas dicas de HTML.
      Enfim, minha pergunta é: Tem como eu criar esse modelo de slide carousel, igual o exemplo 1, só que com imagens manuais? Sim, imagens que eu possa colocar manualmente.

    32. BINSPRD 1 setembro 2017 at 17:03 #

      Gosto muito, e estou a usar, widget perfeito para destacar novas mixtapes no meu blog, a pergunta é, dá para aumentar a distância entre "previous_button" & "next_button" ?

    Deixe um comentário