html

Como colocar slide no blog - Nivo Slider

15:12

                

Olá garotas tudo bem? Bom á pedido de uma leitora fofa ela me pediu como colocar um slide no blog. Então decidi trazer o Nivo slider. Acho que todo mundo já ouviu falar dele. É ele que eu uso na revista, para ver uma prévia clique aqui, e ele que vou colocar no próximo layout do blog. E muitas meninas tem dúvida de como colocar, assim como eu quando não sabia pensei que fosse um bicho de 7 cabeças, mas é super simples e muito fácil, muito mesmo. Deixa o blog com um estilo mais personalizado, e eu amo slides em blogs, fico parada o tempo que for preciso só pra ver todas as fotos do slide, adoro mesmo. Vamos aprender? 
Créditos á Adolescente Virtual



Primeiro vai no seu HTML, e procure por </head>
Depois você cole esse código abaixo.

<style type="text/css">
/* <![CDATA[ */
 #w2bSlideContainer           {position: relative;display: block;top:0px; left:0px; right:0px;/*Ajuste as posição do slide*/}
 #w2bNivoSlider              { position:relative;
width:640px  !important; /*largura do slide*/height:300px  !important; /*Altura do slide*/
background:  #fff url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvayf2bGJUzrruNGimoBK4b4AQYWOJsFNMKuBUgc0sNu6o5N1-JicB8nNHYXRy-YkRDchPCuKNsDt610-QPDtUZH4I8TGMR01XTdnKG7hyphenhyphenjNsPRVFSUF7HdO6wu3quksco2br8igvrHBzi/s1600/w2bLoader.gif") no-repeat 50% 50%;
margin: 20px auto 35px;
border: 3px solid #000;/*Coloque borda se quiser*/ }
 #w2bNivoSlider img           {position:absolute; top:0; left:0;  display:none}
 .nivoSlider                  {position:relative;width:100%;height:auto;}
 .nivoSlider img              {position:absolute;top:0;left:0}
 .nivo-main-image             {display:block!important;position:relative!important;width:100%!important}
 .nivoSlider a.nivo-imageLink {position:absolute;top:0;left:0;width:100%;height:100%;border:0;padding:0;margin:0;z-index:6;display:none}
 .nivo-slice                  {display:block;position:absolute;z-index:5;height:100%;top:0}
 .nivo-box                    {display:block;position:absolute;z-index:5;overflow:hidden}
 .nivo-box img                {display:block}
 .nivo-caption                {padding: 5px;
font-family: Arial,sans-serif;position:absolute; /*Fonte da legenda*/Font-size: 14px; /*Tamanho da fonte da legenda*/background:#000; /*Cor de fundo da legenda*/color:#fff; /*Cor do texto da legenda*/-ms-filter:"alpha(opacity=80)";filter:alpha(opacity=80);opacity:.8;width: 630px;/*Largura da legenda*/ z-index:8;}
 .nivo-caption p              {padding:2px;margin:0}
 .nivo-caption a              {display:inline!important}
 .nivo-html-caption           {display:none}
 .nivo-directionNav a         {position:absolute;top:45%;z-index:9;cursor:pointer;display:block;width:30px;height:30px;
background: url("URL_IMG_SETA") no-repeat;text-indent:-9999px;border:0}
 .nivo-prevNav                {left:10px}
 .nivo-nextNav                {background-position:-30px 0!important;right:10px}
 .nivo-controlNav             {position:absolute;left:0;right:0;bottom:-35px;text-align:center}
 .nivo-controlNav a           {position:relative;z-index:9;cursor:pointer;display:inline-block;width:22px;height:22px;
background:url("URL_IMG_BULLETS") no-repeat;text-indent:-9999px;border:0;margin-right:3px}
 .nivo-controlNav a.active    {font-weight:bold;background-position:0 -22px}
/* ]]> */
</style>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/>
<script src='http://static.tumblr.com/y66747w/9hlmdpcpa/nivoslider.js' type='text/javascript'/>
<script type='text/javascript'>
/* <![CDATA[ */
jQuery(document).ready(function($) {
 $('#w2bNivoSlider').nivoSlider({
  effect           : 'random',
  slices           : 10,
  boxCols          : 8,
  boxRows          : 4,
  animSpeed        : 500,
  pauseTime        : 4000,
  startSlide       : 0,
  directionNav     : true,
  directionNavHide : true,
  controlNav       : true,
  keyboardNav      : false,
  pauseOnHover     : true,
  captionOpacity   : 0.8
 });
});
/* ]]> */
</script>

Logo depois você crie um gadget HTML/JAVASCRIPT e cole esse código.


<div id="w2bSlideContainer"><div id="w2bNivoSlider"><a href="LINK_DO_SLIDE_1"><img src="URL_DA_IMAGEM_1" title="LEGENDA DA IMAGEM 1"/></a><a href="LINK_DO_SLIDE_2"><img src="URL_DA_IMAGEM_2" title="LEGENDA DA IMAGEM 2"/></a><a href="LINK_DO_SLIDE_3"><img src="URL_DA_IMAGEM_3" title="LEGENDA DA IMAGEM 3"/></a><a href="LINK_DO_SLIDE_4"><img src="URL_DA_IMAGEM_4" title="LEGENDA DA IMAGEM 4"/></a></div></div>

Após fazer tudo isso, use este tutorial para colocar o slide na posição desejada.
Em todo o código já está bem explicado o que se deve fazer. Siga os passos que está pedindo em negrito e está pronto. Se precisarem de ajuda é só falar.!

You Might Also Like

86 Chocolates viraram Cupcakes

  1. Adoro esse tutorial , slide no blog
    fica muito lindo ><

    # Mil beijos :*

    >>> http://pensamento-jhenny.blogspot.com.br/ <<<<<
    Paasse lá ! '

    ResponderExcluir
  2. Tava precisando desse tutorial, pois nunca achei um que funcionasse rsrs...

    http://pequena-julieta.blogspot.com.br
    Beijos!
    Conheça as novas postadoras do blog :)

    ResponderExcluir
  3. Ótimo tutu, eu usei tanto slide em meus layouts que enjoei sabe mas fica legal ;)

    Beijos

    ResponderExcluir
    Respostas
    1. Nossa eu nunca enjoo de slide nao, no proximo lay vou trocar esse pelo Nivo
      Beijinhos

      Excluir
  4. Amei o tutorial, vou tentar fazer!
    Não deixe de dar uma passadinha lá no blog para conferir nossas novidades de anéis de falange :)
    Beijinhos

    http://buledetule.blogspot.com

    ResponderExcluir
  5. Esse slide é muito bacana, o problema é que não curto muito 3u3 Kissez!

    Ju, do Epílogos e Finais.

    ResponderExcluir
  6. Ótimo tutorial, vou tentar fazer no meu.
    www.sayinpassing.blogspot.com.br

    ResponderExcluir
  7. Ah, queria muito descobrir como usar esse recurso, agora já sei e vou testar super!
    Adorei!
    Beijos
    http://talitascoralick.blogspot.com.br/

    ResponderExcluir
  8. Adoro este tutorial, deixa o blog com um "ar" profissional! Haha. (:

    Beijos, imfuckingazombie.blogspot.com.

    ResponderExcluir
  9. Eu acho lindo slide no blog, mas tenho receio de colocar, tenho medo de que o blog fique lento :/ Então flor, as formas de pagamento são: Boleto Bancário, TEF, cartão de crédito (parcelado em até 18x)e depósito bancário.

    Beijinhos <3
    Garota Inocente

    ResponderExcluir
    Respostas
    1. Nao fica lento nao, fica super leve em qualquer navegador.
      Obrigada por responder minha duvida
      Beijinhos

      Excluir
  10. Que dicas uteis flor, queria muito colocar um slide no meu blog, vou tentar, viu? Ah, seu blog é lindo!
    Convido você a conhecer meu blog, e participar deste post, ficarei muito feliz, lembrando todos que participarem deste post, estarão no blog no dia 23/02: http://anaateen.blogspot.com.br/2013/02/carregando.html
    Beijos, Analine Grippa!

    ResponderExcluir
  11. Legal o tutorial, beijos

    http://window-soul.blogspot.com.br/

    ResponderExcluir
  12. Oii!! Eu queria deixar apenas 1 slide, não os 4 passando, aí eu exclui os outros 3 códigos no java script/html nos gadgets e deixei apenas 1 código, mas mesmo assim, ele fica trocando de slide.. O que eu poderia fazer? Bjss

    ResponderExcluir
    Respostas
    1. Bom como ele é um slide, mesmo que vc exclua os codigos as imagens, ou no caso a imagem vai continuar passando. Pq ele foi feito para ir passando as imagens mesmo que so tenha uma, ela vai ficar se repetindo.
      Nao sei oq vc quer fazer, mas acho que pra esse caso como vc so quer uma imagem daria para vc colocar um gadget apenas com a tag , sabe como se faz? Senao sabe me fala que vou tentar te ajudar. Beijinhos linda

      Excluir
  13. Olá querida, eu tenho uma duvida, assim que coloquei o Nivo no meu site toda vez que divulgo um link especifico no Facebook, a imagem que aparece é uma das imagens do slide e não do post que eu fiz. Como acertar isso?

    Bjão!

    ResponderExcluir
    Respostas
    1. Nunca tinha ouvido falar nisso. Vou pesquisar a respeito. Mas provavelmente deve ter algum link no codigo.
      Se vc puder me passar o link do seu facebook e o link do blog, eu te ajudo nisso ta?
      Beijos.

      Excluir
    2. Obrigada por me responder, mas é estranho mesmo. Tipo se eu colocar qualquer link do meu blog http://www.beautyrock.com.br pra divulgar no Facebook, só aparecem as fotos do slide. Inclusive vi na página de algumas pessoas que divulgaram meus links e tava acontecendo sempre o mesmo.

      Excluir
  14. http://www.beautyrock.com.br/2013/02/resenha-lentes-roxas-da-pink-paradise.html

    ResponderExcluir
  15. é estranho porque no começo uns dias atras mesmo com os slides tava tudo normal, perfeitinho a divulgação e tudo mais, nem tive esse problema com Facebook, mas de uns dois dias pra cá mudou. Será que é um problema do facebook?

    ResponderExcluir
    Respostas
    1. é verdade, Bom se for algum problema com o facebook vc pode procurar outras pessoas que postem links e no blog tem slide, se o problema for igual ai pode ser sim no facebook.

      Excluir
  16. Boa noite gostaria se você teria alguma ideia de como colocar 2 slaid diferentes em um blog

    e já tenho um slaid só que quando coloco esse o 1 da erro sera que poderia me ajudar ?


    Seu Blog e nota 10

    ResponderExcluir
    Respostas
    1. Acho que vc poderia colocar um slide de cada tipo.
      Tipo assim colocar 2 slides diferentes, com 2 codigos, Assim pode dar certo.
      Se quiser posso fazer um post ensinado
      Beijinhos linda, e obrigada

      Excluir
  17. Olá, eu não consigo fazer isso no meu blog. Poderia me ajudar?
    Qualquer coisa me add no facebook " Leoh Menndes ".

    ResponderExcluir
    Respostas
    1. Oi Leoh, eu nao tenho facebook para te add.
      Mas qual o problema que vc ta?
      Pode falar que eu passo todos passo a passo para vc.
      Beijoos

      Excluir
  18. deu certo a parada, mas eleficou tipo centralizado no meoi confira www.castelodoterror.blogspot.com . como faço pra chegar elepro canto esquerdo??? e para que ps gadgets fiquem dolado deles, tipos pq eles desceram tb sacas? no caso pra que fique tipo assim http://www.vaiassistindoterror.com/ oslide ocupando so a cima da pagina de postagem???

    ResponderExcluir
    Respostas
    1. Bom para isso voce vai ter que colocar o gadget em primeiro lugar da sua sidebar, vai ficar torto e em cima dos outros gadgets, mas ja vamos arrumar, logo após vc vai seguir esse outro tutorial: http://cupcakeofchocolate.blogspot.com.br/2013/01/como-colocar-gadgets-no-cabecalho-aviso.html
      Quer serve para vc mudar a posição do gadget, entao assim vc ajusta ele no lugar ideial que vc quer,
      Se tiver duvidas pode perguntar

      Excluir
    2. Giselle entendi o tutorialmais tentei tentei e naum consegui. vc poderiame add no face https://www.facebook.com/ron.bragio?ref=tn_tnmn ??? pramim te passarminha senha e vc fazer pra mim.por favorrr muito desespero rsrs, ja temmeses qto tentando colocar slides no meu blog e hjfinalmente consegui so falta essa parada q te falei.. brigadaumm!

      Excluir
  19. haa conseguiiii !!!!! rsrs.mais naofoi como codigo pqele poe aonde quer so q fica porcima das coisas tampando =/ maisdei 1 jeitinho rsrs. e como façoprapor a setinha no slide??? pq ja colei o url de seta la na parte background: url("URL_IMG_SETA") so q naum aparece de jeito nenhum... asbolinhas eu consegui! e temcomo mudar o efeito dele tipo escolher somente um?

    ResponderExcluir
    Respostas
    1. Que bom que vc conseguiu, fico feliz.
      Vc vai precisar encontrar uma imagem que seja de setinha, elas irao substituir as bolinhas.
      E esse efeito nao tem como mudar. Ele é o efeito do Nivo slide. So se vc escolher outro slide com outro efeito.
      Beijos

      Excluir
  20. ola fiz tudo certinho, ms o me ficou muito no meio queria pode coloca-lo no canto, como voce conseguiu colocar o seu ali? me ajuda por favor

    ResponderExcluir
    Respostas
    1. Coloquei com esse outro tutorial que eu ensinei aqui http://cupcakeofchocolate.blogspot.com.br/2013/01/como-colocar-gadgets-no-cabecalho-aviso.html
      Se tiver duvida pode perguntar.
      Beijao

      Excluir
  21. Giselle me bateu outra duvida. sao4imagens no slide, temcomo acrescentar mais 1? se sim como?

    ResponderExcluir
  22. Pode sim Ron, voce deve colocar esse codigo após o codigo da ultima foto. Pode colocar quantos quiser.
    < img src="URL_DA_IMAGEM_1" title="LEGENDA DA IMAGEM 1"/>
    Caso tenha duvidas pode perguntar.
    Beijao

    ResponderExcluir
    Respostas
    1. Ps: Retire o espaço antes de img src. O blogger não permitiu eu escrever tag, por isso tive que add um espaço no meio

      Excluir
  23. Este comentário foi removido pelo autor.

    ResponderExcluir
  24. mas i a parte que rediriciona para o link da pag desejada tem como naum?

    ResponderExcluir
    Respostas
    1. no caso o codigo ali q vc colocou tem a pate do url daimagem e o lugar pra por o titulo,!! mas eo lugar que colocar o link de postagem que vai pra pagina quando clima em cima?

      Excluir
    2. Tinha esquecido de copiar essa parte rs.
      < a href="LINK_DO_SLIDE_1">< img src="URL_DA_IMAGEM_1" title="LEGENDA DA IMAGEM 1"/ >

      Excluir
  25. Procurei por muitos tutoriais ate em vídeo mas nenhum funcionava no meu blog e eu fazia tudo passo a passo,e nada (falo muito neh) em fim esse foi simples fácil direto e rápido nem precisei ficar quebrando a cabeça pra ficar modelando ele simplesmente perfeito muito obrigada mesmo esta aqui a previa do meu futuro blog =D
    http://seunovomundoaqui.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. Oi Missa, fico realmente muito feliz com seu comentario.
      Fico feliz em poder ajudar vc.
      Desculpa a demora em responder
      Beijao

      Excluir
  26. Oi Giselle, você pode me dizer qual o tamanho ideal para as imagens dos slides, o meu não esta redimensionando automaticamente, da uma olhadinha por favor, beijos e obrigada, estava procurando exatamente isso!!

    http://nossojeitinhobrasileiro.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. Entao o tamanho das imagens que eu usava era width: 500px;height: 335px;
      Mas vc pode ir em width:640px !important; /*largura do slide*/height:300px !important; /*Altura do slide*
      Que esta no codigo e mudar o tamanho para o da sua imagem.
      Tenta fazer isso.
      Beijao, duvidas pode falar

      Excluir
  27. Oii Giselle, muito obrigada por responder tão rápido=)
    eu coloquei as imagens na resolução 640px x 355px e deu cetinho..
    ficou lindoo ameii!!! muito obrigada!

    ResponderExcluir
    Respostas
    1. Que isso linda, é um prazer ajudar vc.
      Fico feliz que deu certo
      Vou la ver.
      Beijos

      Excluir
  28. Adorei, mas tem que editar o código antes num bloco de notas, tipo as cores pq fica complicado :s
    Vou usar! Bjs

    http://delicadaeimperfeita.blogspot.com/

    ResponderExcluir
    Respostas
    1. é tem pessoas que fazem isso mesmo.
      Para mim ja é mais facil no proprio blogger.
      Beijos, que bom que gostou.

      Excluir
  29. Passei dias procurando como colocar um slide no blog, graças a você eu consegui thank you =) http://webradiodoforro.blogspot.com.br/

    ResponderExcluir
  30. Onde eu acho o HTML ??? pf eu preciso mt que me ajude. obg

    ResponderExcluir
  31. Opa, nossa muito bom esse post mesmo, foi muito útil pra mim, tava atras de um slide no meu blog a tempos ... agr queria sabe como faço pra que os links do slide abram em uma noa guia ? Desde já obrigado pela atenção. att Gabriel Oliveira
    http://brutosdoterere.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. Obrigada querido(a). Fico feliz em poder te ajudar e ter sido util em seu blog.
      Bom para fazer isso é simples você só precisa adicionar uma tag a mais no codigo do html.
      Assim < a href = "LINK_DO_SLIDE_2" target = "_blank " > TEXTO < / a >
      Ps retire os espaços desnecessários do codigo.

      Excluir
  32. Olá,
    Amada que lindo seu blog.Já estou seguinndo e já me tornei fã.
    Se puder retribuir a visita segue o meu e curte minha página.

    Blog: http://femmemakiup.blogspot.com.br/

    Página: https://www.facebook.com/Luisamakiup

    ResponderExcluir
  33. Otimo muito bom parabéns

    LOLcases capas para celulares http://www.lolcases.com.br/

    https://www.facebook.com/LOLcasesCapasparaSmartphones

    ResponderExcluir
  34. Instalei o Nivo Slider, mas ele está conflitando com a área de últimas postagens e o box de redes sociais, você pode me ajudar? O blog é este: http://radiocruzdasarmas104.blogspot.com.br

    ResponderExcluir
  35. não Consigo achar onde coloca o gadget Onde é ??

    ResponderExcluir
  36. Confesso que tive dificuldade em achar imagens que enquadrasse no slide, mas o tutorial foi o melhor que achei. Muito bom!
    Já estou usando!! :3
    http://imperfeitasperfeitas.blogspot.com.br/

    ResponderExcluir
  37. amei o blog e as dicas! abraços www.cantomaebebe.com.br

    ResponderExcluir
  38. Finalmente alguém me ajudou e essa ajuda deu certo, muito obrigada!! <3

    ResponderExcluir
  39. Adorei o tutorial, ficou certinho, agora só falta ajeitá-lo *-*
    Obrigada <3
    http://www.leticiakoliveira.com/

    ResponderExcluir
  40. Funcionou certinho, mas as imagens não ficou do tamanho do slide certinha, ficou pequena.
    Como faço para ficar do mesmo tamanho que o slide?
    inecarlablog.blogspot.com.br

    ResponderExcluir
  41. heey queria saber como eu faço pra exibir o slide apenas na HOME do blog?

    ResponderExcluir
  42. Heey queria saber como faço para exibir o slide apenas na HOME do blog

    ResponderExcluir

Deixe um recadinho sobre o blog. Obrigada!

Related Posts Plugin for WordPress, Blogger...