Slide de imagens com numeração

|

Finalmente consegui postar esse tuto! Essas ultimas semanas estão sendo muito corridas pra mim, os dias passam voando e não dá tempo de fazer nada! Mas enfim, vamos esquecer meus problemas e focar no tutorial de hoje. Com ele você vai aprender como fazer um slide igual ao do blog da finada revista CB. O slide é assim:
Ele tem a numeração de cada slide, e ao clicar no número vai para o slide correspondente *-*

Vamos ao passo a passo desse slide lindo!

1° -  Abra seu HTML, copie o imenso código abaixo e cole acima de </head>

<!-- JavaScript Slider Horizontal - Inicio-->
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function() {

//Set Default State of each portfolio piece
$(".paging").show();
$(".paging a:first").addClass("active");

//Get size of images, how many there are, then determin the size of the image reel.
var imageWidth = $(".window").width();
var imageSum = $(".image_reel img").size();
var imageReelWidth = imageWidth * imageSum;

//Adjust the image reel to its new size
$(".image_reel").css({'width' : imageReelWidth});

//Paging + Slider Function
rotate = function(){
var triggerID = $active.attr("rel") - 1; //Get number of times to slide
var image_reelPosition = triggerID * imageWidth; //Determines the distance the image reel needs to slide

$(".paging a").removeClass('active'); //Remove all active class
$active.addClass('active'); //Add active class (the $active is declared in the rotateSwitch function)

//Slider Animation
$(".image_reel").animate({
left: -image_reelPosition
}, 500 );

};

//Rotation + Timing Event
rotateSwitch = function(){
play = setInterval(function(){ //Set timer - this will repeat itself every 3 seconds
$active = $('.paging a.active').next();
if ( $active.length === 0) { //If paging reaches the end...
$active = $('.paging a:first'); //go back to first
}
rotate(); //Trigger the paging and slider function
}, 7000); //Timer speed in milliseconds (3 seconds)
};

rotateSwitch(); //Run function on launch

//On Hover
$(".image_reel a").hover(function() {
clearInterval(play); //Stop the rotation
}, function() {
rotateSwitch(); //Resume rotation
});

//On Click
$(".paging a").click(function() {
$active = $(this); //Activate the clicked paging
//Reset Timer
clearInterval(play); //Stop the rotation
rotate(); //Trigger rotation immediately
rotateSwitch(); // Resume rotation
return false; //Prevent browser jump to link anchor
});

});

</script>
<!-- JavaScript Slider Horizonta - Fim-->


2° - Depois coloque esse código antes de ]]></b:skin> 


/*--Container geral--*/
.main_view {
float: left;
position: relative;
}
/*--Estilos do container das imagens--*/
.window {
height:200px; /*-- Altura do Slide (as imagens devem ter a mesma altura */
width: 550px;  /*-- Largura do Slide (as imagens devem ter a mesma largura)-- */
overflow: hidden;
position: relative;
}.image_reel {
position: absolute;
top: 0; left: 0;
}
.image_reel img {
float: left;
}
/*--Estilos do container da numeração(Não precisa mudar nada aqui)--*/
.paging {
position: absolute;
bottom: 40px;
right: -1px;
width: 220px;
height:41px;
z-index: 100;
text-align: center;
line-height: 40px;
-moz-border-radius-topleft: 15px;
-moz-border-radius-bottomleft: 15px;
-webkit-border-radius-bottomleft: 15px;
-webkit-border-radius-topleft: 15px;
display: none;
}
/*--Estilos do link da numeração (Estilo dos numeros)--*/
.paging a {
outline:none;
padding: 5px 10px;
text-decoration: none;
color: #fff;
background: #bad5d9;
-moz-border-radius: 17px;
-khtml-border-radius: 17px;
-webkit-border-radius: 17px;
}
/*--Estilos do link ativo da numeração--*/
.paging a.active {
font-weight: bold;
color: #fff;
background: #b97ac9;
-moz-border-radius: 17px;
-khtml-border-radius: 17px;
-webkit-border-radius: 17px;
}
/*--Estilos do link hover da numeração--*/
.paging a:hover {
font-weight: bold;
}.feed-links { 
 display: none; }
Nesse código você irá alterar as medidas e as cores da numeração do slide.

3° - Agora é só inserir o slide em seu blog. Para isso, vá em layout, adicione um gadget de HTML/Javascript onde você deseja que seu slide fique, e cole nele esse código:

<div class="main_view">
<div class="window">
<div class="image_reel">
<a href="LINK_1" alt="" ><img src="URL_IMG_1"/></a>
<a href="LINK_2" alt=""><img src="URL_IMG_2"/></a>
<a href="LINK_3" alt=""><img src="URL_IMG_3"/></a>
<a href="LINK_4" alt=""><img src="URL_IMG_4"/></a>
</div></div>
<div class="paging">
<a href="www.blogger.com" rel="1">1</a>
<a href="www.blogger.com" rel="2">2</a>
<a href="www.blogger.com" rel="3">3</a>
<a href="www.blogger.com" rel="4">4</a>
</div></div>
Você só precisa mudar o link que cada imagem vai direcionar e o url da imagem. Não precisa alterar aqueles links www.blogger.com Eles não vão funcionar no slide, é só para aparecer a mãozinha do mouse em cima dos números.

Espero que o tutorial tenha sido útil para vocês. Só lembrando que esse slide foi feito pelo Mundo Blogger, e eu só estou mostrando como instalá-lo :) Ah amores, infelizmente não vai ter batalha de blogs essa semana, mas na próxima é sem falta!

Kissus,
Liah

76 comentários

  1. Liah, como você fez para a primeira letra do post ficar grande e colorida? Faz um tutorial? E sempre gostei dos sites que tinham esses slides numerados que passavam noticias, mas eu acho que não vai dar, deve ficar muito grande no meu blog!

    http://www.cravos-e-rosas.blogspot.com.br/

    http://liberdadedosmeusatos.blogspot.com.br/

    ResponderExcluir
  2. gostei do tuto, bem explicadinho
    http://dezapaixao.blogspot.com.br/

    ResponderExcluir
  3. Ótimo tutorial eu tava procurando isso faz é tempo *-*


    Go Belezando

    ResponderExcluir
  4. Ótimo tuto linda, não vou usar porque meu lay novo já está pronto. Olha, meu blog está fazendo 1 mês dia 11 de maio, passa lá? Sua visita ia ser muito importante, Liah!

    4-Brownies.blogspot.com

    ResponderExcluir
  5. Amei o tuto! Antes eu adorava slides, mas agora eu não gosto tanto =/ Só que esse é bem bonitinho *-* Beijos ♥

    Garota de All Star

    ResponderExcluir
  6. Aii que legal esse tutorial acho que vou colocar no meu blog ;D
    http://imperfeitaadolescente.blogspot.com.br/

    ResponderExcluir
  7. ADOREI! Mt legal ^^

    ResponderExcluir
  8. muito legal esse tutorial.bjs
    http://blogbondmais.blogspot.com/

    ResponderExcluir
  9. Esse tutorial é tudo de bom Liah, á algum tempinho estava á procura..Obrigada por postar hihi ^^

    http://www.world-cutest.blogspot.com.br/

    ResponderExcluir
  10. Nossa, é fácil! Cola uns códigos ali e outros aqui e pronto, tá feito. Adorei o efeito, super legal =] Liah, tinha como ensinar como numerar os comentários? Adoraria aprender. Ah, menina do céu, vamos falar sobre o CB agora. Entrei aqui, levei um susto do bem e disse: CARAMBA VÉI A LIAH VOLTOU QUE PERFEITO O LAYOUT TÁ MAIS LINDO QUE NUNCA NOSSA TO MORRENDO E NEM PERCEBI ESSA MENINA TEM MUITO TALENTO E AINDA COLOCA A DIVA KATY PERRY COMO TEMA NOSSA VÉI MUITO DEMAIS QUERO SER ELA O CHERRY BOMB TÁ PERFEITÃO........ É, foi mais ou menos assim, nem vírgulas tinham '-' Mas é sério, fiquei muito triste quando o CB disse que ia dar uma pausa. Eu também dei, sabia? Fiquei um mês sem postar, tava sem tempo e muito ocupada com a escola. Mas nós voltamos, uhu *-* Liah, meus parabéns pelo design invejável e pelo conteúdo maravilhoso, o blog tá cada vez melhor! Que bom que voltou e espero que tenha voltado pra ficar MESMO! Te amo muito, minha lindinha. Beijos da Dani, onthefame.blogspot.com

    ResponderExcluir
  11. hmmm, q interessante..um dia vou por um slide de imagens do meu blog..mas agora vim aqui pra dizer:
    NOOOSSSA, vc voltooooou!!!
    E voltou com tudo heim!!
    Eu sabia que vc não ia aguentar ficar longe..
    menina do céu, fique sabendo q eu tbm to tentando desistir do blog, por causa do trabalho e da faculdade, mas eu nao to conseguindoo.
    É mto dificil, nos nos apegamos demais, e pra sair é dificil..
    enfim, seu blog ta maravilhosoo viu...
    fiquei feliz com a sua volta, de verdade,..
    seu blog foi um dos primeiros q conheci e pelo qual me apaixonei, por isso ele sempre vai estar cmg...
    Enfim...bjs

    http://espacofemininoaqui.blogspot.com.br

    ResponderExcluir
  12. Olhe,para o próximo tutorial não podia publicar como pôr suas próprias imagens no fundo de seu blog? era um grande favor.

    ResponderExcluir
  13. Nossa que lugar , mais lindo seu cantinho e lindo demais .
    PARABENS
    sucesso mais ainda para voce

    ResponderExcluir
  14. Nossa, vou te contar Liah, eu tenho uma amiga da escola que também é blogueira e ela sabia da volta do CB. O CB tá nos meus Favs mas eu não sabia ainda! Quis matar ela agora!
    Eu amoooooooo o CB, sabia que você ia voltar uma hora!
    Vou colocar esse slide perfeeito no meu blog novo agora :3
    Thanks!
    Girls On-Line

    ResponderExcluir
  15. Posso dizer uma coisa? Eu estava procurando este tuto A ANOS, já havia perguntado pra VÁRIAS blogueiras! AMEEEI ! Obrigadãão Liah!
    Abraços, Cáah!

    ResponderExcluir
  16. Esse tuto é muito legal, procuro ele a seculos, seu blog tá um sucesso. Posso fazer um pedido ? Ensina como vc colocou aquele WELCOME lá em cima, dentro daquele bannerzinho ?? Aaaah, e, vc ainda faz a revista cherry bomb ?? Adoro ler sua revista !!

    Beijokas :*
    http://sweet-flower-laura.blogspot.com/

    ResponderExcluir
  17. Olá Liah, você poderia nos ensinar a colocar este papel, igual esse aí do lado esquerdo do Cherry Bomb? E também nos ensinar a fazer este seu blockquote LINDO DE MORRER!

    ResponderExcluir
  18. Liaah!!!! QUE BLOG DIVOOO! AMEI MESMO! Desde o dia que vc disse um "goodbye" eu achei que era o fim da minha vida! Agora eu vim ver um tutuzinho, aí eu vi seu novo lay, de 0 a DEZ, vc é mais que o infinito! Noossa, que blog divoo! ME DÁ DE PRESENTE DE NATAL ^-^ ?? hihi. Seguindo muito bem seguido... Segue de volta? Beijokas.

    ResponderExcluir
  19. por favor pode me ajudar,eu estava andando pelos blogs de Templates e achei o http://www.blogskins.com e queria saber se você sabe como fazer um download de um template de lá obrigada beijos http://josianeteixeiraoficial.blogspot.com.br/

    ResponderExcluir
  20. Liaaah! Que bom que postou algo novo! Sempre fico ansiosa pra ver o que você vai postar no seu blog, esse tutorial foi muito útil, tava precisando muito dele! Você sempre salvando vidas rsrs! Valeu!!

    ~ http://garotavertigem.blogspot.com.br/

    ResponderExcluir
  21. oi liah ! como vai ? eu tenho uma duvida sobre o seu template free delicate (http://layoutdelicate.blogspot.com.br/).
    quando vou dezipar ele , aparece para eu digitar uma senha. você pode me falar que senha é essa? XOXO
    diariodeumameninanerd.tk

    ResponderExcluir
  22. Tutorial super perfeito, acho que fica bem legal no blog pra destacar os tutoriais ou post's importantes, e deixa super moderno e lindo. Beijão Liah,
    Stephanie ~~> Garota do Olhar Sincero *-*

    ResponderExcluir
  23. Liah, que bom que você voltou s2 Tava com muitas saudades do CB, só pude vim aqui agora porque o SDF estava fechado temporariamente, estava resolvendo uns problemas pessoais. Mais o layout ficou lindo com a linda da KP! Muito sucesso *-*

    http://saladadefrutasbr.blogspot.com.br/

    ResponderExcluir
  24. Uoooooooooooooou, estava louco atras desse tuto pois eu fiz minha revista com a ajuda do CHERY BOM ou sejao seu blog liah!
    gostei muito daqui sempre visito pra aprender otimas coisas, aa/ divulguei seu blog na primeir edição da mibha revista!
    seguindo aqui, se puder visita meu blog?
    ~>http://nateeladopc.blogspot.com.br

    ResponderExcluir
  25. Muito obrigada! Eu estava procurando a uns 10 anos esse tutorial (okay, não é para tanto) kkk' Amei, com certeza irei usar quando for fazer o site da revista do blog
    Kissus ----> Blog Bola de Chiclete.com

    ResponderExcluir
  26. Nossa Liah que perfeito, sempre quis saber como fazer. WOW!... Acho que um design futuro vou usar esse tuto..

    Amo muito o seu blog, sempre acompanho! bgs bgs ;*

    http://chuvasde-dezembro.blogspot.com.br/

    ResponderExcluir
  27. ótimo tutorial ameiiiiiiiiii *---------*

    ResponderExcluir
  28. Eu estava quase maluca procurando esse tuto! O seu blog é a minha salvação Liah! Voce tá de parabéns seu design é lindo, e o conteúdo blog é ótimo.

    ResponderExcluir
  29. Fiz o meu lá, acho que ficou legal. Muito lindo o tutorial, obrigada por compartilhar!

    ResponderExcluir
  30. Olá flor, adorei o tutorial ;)
    já coloquei no meu blog ...porém estou com um problema ...
    as imagens ficaram lado a lado ... poderia me ajudar?
    Desde já obrigada!
    Beijos.
    maremakeup.blogspot.com.br

    ResponderExcluir
  31. Dúvida!! e como faço pra colocar no cabeçalho do blog?


    Milena
    http://paradise-bieber.blogspot.com.br/

    ResponderExcluir
  32. Nossa, preciso colocar esse! Lerei com mais calma e tentarei inseri-lo!

    abraços,
    Luciana
    http://folhasdesonhos.blogspot.com

    ResponderExcluir
  33. Amei! Vou usar no próximo layout do blog, tutorial maravilhoso como sempre! Vou dar os créditos, ok?

    Beijos,
    Cami. www.vitima-fashion.blogspot.com/

    ResponderExcluir
  34. Muito boa a dica, parabéns.

    ResponderExcluir
  35. as imagens ficam uma ao lado da outra :/ como faço para resolver?

    ResponderExcluir
  36. Oi Liah! O tuto é ótimo, muito bem explicado, só que eu n encontrei o código ]]>
    Pq será?
    Bjs!

    ResponderExcluir
  37. Ah no meu não deu certo de jeito nenhum :c

    Beijokas
    www.jademarlla.tk

    ResponderExcluir
  38. Seu blog e suas dicas são mil! Agradeço por ser tão prestativa.
    Acerca deste slide com numeração, fiz conforme indicado no tuto. Antes, fiz três imagens do mesmo tamanho e no 3o. código troquei aquele valor de 550/200 por 960/115 e certifiquei-me de colocar os links das páginas para as quais os links aos quais cada uma seria direcionada.
    1-Fui em "/head" e coloquei após ele aquele primeiro código enorme.

    2-Achei o código "]]>" e coloquei antes dele o código fornecido.

    3-Coloquei dentro do gadget html/java o terceiro código. E arrastei para a posição desejada.

    As imagens apareceram. O slide está funcionando, show de bola; mas quanto ao direcionamento do link dá a mensagem de erro: 'A página que você está procurando neste blog não existe."
    Lembrando que já testei o primeiro código em várias posições: antes e depois do primeiro "/head", antes e depois do segundo.

    O que devo fazer? Help me please...

    ResponderExcluir
  39. Rebloguei, mas dei os créditos ;)
    Seguindo, segue de volta?
    http://super-kawaii-fofura.blogspot.com

    ResponderExcluir
  40. Oiie adorei seu tuto,mas tenho uma dúvida
    Como coloco a imagem e a URL no código, pe eu nao sei e ja tentei de tudo
    Obrigado!

    ResponderExcluir
  41. muuuuuuuuuuuuuuuuuito obrigada mesmo <3

    ResponderExcluir
  42. Ótimo tuto! Créditos eternos lá no meu blog OIEPOWQIE-
    Kisses

    space-sweet-girl.blogspot.com.br

    ResponderExcluir
  43. Muito Obrigada!! Tava procurando um tutorial assim há algum tempo e só tive sucesso com esse! Você me ajudou bastante ^^ amei o Cherry Bomb, seguindo.

    --> kissofgloss.blogspot.com

    ResponderExcluir
  44. Como faz para centralizar o slide?

    http://meusdezoitoanos94.blogspot.com.br

    ResponderExcluir
  45. Tutorial maravilhoso, me ajudou muito!!!!
    blogthistime.blogspot.com

    ResponderExcluir
  46. Muito bom o tutorial, o melhor que encontrei até agora.
    Me tira uma dúvida, tem como deixar as transições entre as imagens mais rápidas?
    Abçs.

    ResponderExcluir
  47. MASSA.mas no meu deu um probleminha,a imagem 4 não aparece,ja mudei vária vezes mas ela nunca aparece..abç

    ResponderExcluir
  48. Como faço para que o slide fique centralizado?

    ResponderExcluir
  49. Realmente,não entendi nada da última parte..como mudo o link?

    ResponderExcluir
  50. quando você diz "cole acima de " você diz acima "no lugar do " ou "acima do lado do "?

    me rasponda por favor!!! bjooos!

    ResponderExcluir
  51. Já usei
    questao-deopiniao.blogspot.com.br

    ResponderExcluir
  52. Menina te adoro! Estou há uma semana procurando, modificando e testando códigos pra esse efeito e só aqui consegui! Obrigada mesmo, muito sucesso pra vc e seu blog! Kisses

    facamake.blogspot.com

    ResponderExcluir
  53. Tutorial muuuuuito bom!

    Acho que foi o mais fácil e o slide mais lindinho que eu vi...

    Pena que deu um probleminha, mas normal... Todos estão dando...

    ResponderExcluir
  54. ajudou muito minha linda,ficou certinho :D , eu ainda estou usando.

    ResponderExcluir
  55. tem como posicionar os números 1, 2, 3 e 4 na parte inferior da imagem?
    Carlos

    ResponderExcluir
  56. Tava procurando isso mesmo ! PERFEITO ! So queria saber como aumentar um pouco o tamanho do slide.. ME AJUDOU muito, valeu mesmo !
    bjs
    http://humorlimao.blogspot.com.br/

    ResponderExcluir
  57. Espero que volte logo. Parabens pelo blog e por ser uma pessoa disposta a ajudar o próximo. Brigado!

    ResponderExcluir
  58. Oii, tentei colocar o slider, e deu tudo certinho, mas como faço pra ele ficar do lado direito da tela? em cima da área do post?? Valeu

    ResponderExcluir
  59. Este comentário foi removido pelo autor.

    ResponderExcluir
  60. amei, achei super legal
    http://mininaimperfeita.blogspot.com.br/

    ResponderExcluir
  61. Flor, como eu faço pra centralizar o Slide de imagens com numeração? Vi algumas pessoas perguntando isso nos comentários mas não vi sua resposta. Meu email é luh.borboleta@gmail.com

    Beijos e parabéns pelo blog!

    ResponderExcluir
  62. Eu estou estudar aprender mexer com html,em meu blog o código ficou tudo no topo do blog parecendo teve ter algo errado, porque fiz tudo como mandou coloquei o link da imagem nada dava certo, até apaguei essa suas informação que fica escrito no meio do código para ver se era isso... foi a mesma coisa eu não consegui!

    ResponderExcluir
  63. Adoro o tutorial!! Ficou bem perfeitinho no meu blogue *-* Espero que um dia você volte novamente a publicar no Cherry Bomb.

    ResponderExcluir
  64. Muito bom o tutorial, vou coloocar o slide no meu blog :3

    ResponderExcluir
  65. Eu estou em desespero! Toda vez que eu tento colocar algum código no HTML do meu blog, eu nunca tenho as coisas que se precisa procurar para colocar o código antes ou depois. Eu não tenho , por exemplo. É muito triste, pois nunca consigo personalizar meu blog com códigos que exijam isso. Meninas do Cherry Bomb me ajudem!!
    Se quiserem dar uma olhada no meu blog pra ver o problema é esse aqui:
    http://tralhasuteis.blogspot.com.br/

    ResponderExcluir

Related Posts Plugin for WordPress, Blogger...