Blogger: Slider automático com setas (2 modelos) | Follow your dreams
Blogosfera

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

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!

Tags : Blogger

43 Comentários

  1. 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 .

    1. 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

  2. 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

    1. 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

  3. 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?

  4. 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?

  5. 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?

  6. Oi

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

    sempre dá erro no src=\

    to sem saber o que fazer, pode me ajudar?

  7. 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

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

  9. 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!

  10. 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

  11. 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

  12. 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!!!

  13. 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?

  14. 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.

  15. 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 uma resposta