Nivo slider

|
Tumblr_m9dg269jux1rc4p8oo1_500_large

Podem comemorar, porque hoje eu vou ensinar como colocar esse slide divo que eu uso no seu blog. O nome dele é Nivo e vários sites profissionais usam ele. O que eu acho mais legal no Nivo é os diferentes efeitos de transição que ele tem (15 no total). Mas chega de enrolar, vamos ao tão esperado tutorial.

O resultado final será semelhante a este:
Imagem do site Isabela Freitas

O script
Cole esse código abaixo de </head>

<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/AVvXsEgQLslxlGOSj8dRb5Duiyoz4EKxA_whtkVfPjrYcfvUFJVV0xWvcorFBB7yS65C7b23-oqmkZYHk_Dla6yreLs9dhjs8PwEBS_2A13uFjRkINyuG6DQ0zpIqaFq_AJhXj5f8ObH2ytBgAoW/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>
Eu destaquei em negrito as partes que você irá precisar alterar para ficar mais fácil de encontrar. No fim do post tem algumas imagens de setas e das bolinhas de navegação para vocês usarem. Depois de fazer as alterações, visualize se está tudo ok e salve.

Os Slides
Agora para o slide aparecer, basta colar o código abaixo em um gadget de HTML/Javascript ou onde quiser que o slide apareça:

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

Substitua o endereço das imagens, os links e a legenda e pronto! Um slide lindo estará no seu blog. Agora as imagens que eu prometi:
Setas


Bolinhas



Espero que tenham gostado. Se usarem em seus blogs, creditem. E se quiser postar esse tutorial no seu blog, peça permissão primeiro.
Kissus, Liah

175 comentários

  1. Liah adorei o tutorial, faz tempo que procuro algo assim os que eu já tentei nunca deram certo, vou tentar esse.

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

    ResponderExcluir
  3. amo demais seus post acompanho todos os dias como sou nova muitas dicas eu pego no seu blog, se vc puder seguir meu blog será uma grande honra
    http://world-of-princess-pink.blogspot.com.br/

    ResponderExcluir
  4. Tempão que eu estava procurando esse Tutorial.
    Me ajudou bastante!

    Obrigada Liah. (:
    Beijoos ;*

    http://cherry-gabiih.blogspot.com.br/

    ResponderExcluir
  5. Awn, eu tava louca por esse tutorial!
    é mais fácil do que pensei!
    adoro seu blog
    Beijos
    -> morango-aos-pedacos|tk
    (veja no perfil se precisar)

    ResponderExcluir
  6. Que super tutorial hein Liah *O* Acho q todas as blogueiras piram neles!

    http://www.meianoitebr.com/

    ResponderExcluir
  7. O Slide é perfeito, ja tenho de outro tipo no meu blog, mas acho que vou trocar *3*

    omeubrilhantemundo.blogspot.com

    ResponderExcluir
  8. Hey Liah! Help? Eu resolvi colocar este slide no próximo layout do meu blog de fanfics, fiz tudo certinho, mas o slide fica apenas com aquela bolinha rodando e não aparece as imagens! qual pode ser o erro? Olha:http://testeveneris.blogspot.com.br/

    preciso dizer que está de parabéns com o CB? :D

    http://www.venerispluvius.blogspot.com.br/

    ResponderExcluir
  9. Esse slide é muito bonito, da um "up" no designer do blog, talvez vou usar no meu próximo layout e com certeza vou dar os créditos!

    Beijos♥

    Clique no perfil e entre no blog.

    ResponderExcluir
  10. Preciso dizer que sempre quis saber como você fez esse slide da causar ciúmes em todos? Haha! Minha curiosidade era grande, e agora acho que vou poder usá-lo nos meus próprios layouts. Sabe, eu sou super fã do jeitinho que você explica, fica tudo tão mais fácil. Agora é só deixar a preguiça de lado e prestar bem atenção no tutorial, tenho certeza de que vai dar super certo. Um beijo, Luly - TZA (clique no meu perfil para acessar o blog).

    ResponderExcluir
  11. Amei *o* Simplesmente perfeito! Sempre quis por slide, mas nenhum nunca me encantou, mas esse foi amor a primeira vista <3 Vou tentar por no blog!

    goimagines.blogspot.com

    ResponderExcluir
  12. Aaaa meu sonhoo chegou! Liah, você é maravilhosa! adorei o slide!

    Beijos, Giu do Ah.
    (para ver meu blog, vá em meu perfil)

    ResponderExcluir
  13. Adorei o Tuto! Vou colocar no meu próximo layout!
    Beijos
    http://girluntamed-official.blogspot.com.br/

    ResponderExcluir
  14. Oi Liah, tudo bem?
    Estou precisando de uma ajudinha, fiz o tuto todo certinho mas não ficou a imagem, só a bolinha de carregando.
    Me ajuda?

    Beijos e parabéns pelo blog que sempre está perfeito!

    ResponderExcluir
  15. Obrigada pela visita, amei!! Volte sempre...

    Vem, tem post novo http://padulamakeup.blogspot.com.br/

    Beijos ;)

    ResponderExcluir
  16. Lindooo o slide! Amei! Com certeza vou usar lá no blog ^^
    Ótimo post!
    Beijinhos :*

    www ♥ PiinkCookie ♥ blogspot ♥ com

    ResponderExcluir
  17. Adorei seu blog e já estou seguindo! :-)
    Tenho uma dúvida: tem como centralizar o slide?
    Xerimmmm!!!

    solteiras-noivas-casadas.blogspot.com.br

    ResponderExcluir
  18. Amei esse slide na hora em que vi no CB, e não achava em lugar nenhum. Que bom que você contou pra gente o segredo. rs Vou usar no próximo lay!
    E desculpe por não estar visitando tanto ultimamente, estava ocupada com provas :\

    Beijos, Anna
    http://garota-queen . blogspot . com/

    ResponderExcluir
  19. Realmente, devo comemorar! Esse slide é muito divo, talvez eu use já que estou louca pra colocar alguns destaques no meu blog! HAHA!
    Ah! Valeu pela dica lá no GV!

    Garota Vertigem (Blog no perfil)

    ResponderExcluir
  20. Posso usar esse tutorial no meu blog Liah?Muito legal....Faz um post ensinando como colocar gadget no cabeçalho(não sei se vc já tem mas se não tiver faça?)

    www.bigode-de-chocolate.blogspot.com

    ResponderExcluir
  21. Oi tdb? eu queria saber se esse slide também pode ser colocado em tumblr. Thankx.

    ResponderExcluir
  22. Gostei do slide.
    Acho que vou usar no próximo layout!
    Amo seu blog tá fofa?
    Se puder visita o meu?

    heartsehearts.--blogspot.com.br (Quando for colocar a URL tira os --.)

    ResponderExcluir
  23. e muito legal mais tenho medo de colocar no meu blog e nao da certo ,acho muito lindo que tem isso..
    aperte no perfil para evitar spam.

    ResponderExcluir
  24. Obg Liah por fazer uma post ensinando a usar esse slide,vou usar esse slide em meu blog depois,fica liiiindoo demais! ♥
    sweetmagia.blogspot.com

    ResponderExcluir
  25. Fica muito lindo,perfeito,maravilhoso u.u
    sweetmagia.blogspot.com

    ResponderExcluir
  26. Adorei a dica, sempre tive curiosidade de saber como ter um slide desse, seguindo seu blog,

    http://www.wondermarcelo.blogspot.com.br/

    ResponderExcluir
  27. UFÁ ! Aprendi eu amei ele <3
    Liah forever <3
    smileretro.(blogspot.com)

    ResponderExcluir
  28. Liah amei o tutorial,posso colocar o tutorial no meu blog ? tó de layout novo. ^^

    ResponderExcluir
  29. Eu acho lindo o efeito do novo slider, fica tão mais cute, e é uma ótima forma de divulgar os anteriores posts. O tutorial como sempre ficou mega bem explicado. Talvez eu use em algum layout, eu gostei muito *-*

    Beijos, Moma.
    momamoraes,blogspot,com

    ResponderExcluir
  30. Deu tudo certo com o slide agora Liah! Obrigada! Estava atrás de um tutorial bom à tempos! :D

    http://www.venerispluvius.blogspot.com.br/

    ResponderExcluir
  31. OMG Qee Lindo ameii e vou usar no meu novo layout *-*
    http://biel-teenangels.blogspot.com.br/

    ResponderExcluir
  32. Hey, obrigada pela ajuda Liah!
    Já coloquei o slide no meu próximo lay, e ficou lindo. (claro, com os créditos)

    Beijos

    ResponderExcluir
  33. Fica lindo,adorei!

    revolutionstartshere-oficial.blogspot.com.br

    ResponderExcluir
  34. Liaahh thanks, sempre me salvandooo

    ResponderExcluir
  35. Amore ensina a fazer frames, e tbm posta uns aqui pra gente!! Beijão!

    ResponderExcluir
  36. como faz pra tirar as bolinhas?

    ResponderExcluir
  37. Liahh,
    tudo bem? Primeiramente, quero dizer que tenho apredido muito com seu blog.Obrigada pelas dicas maravilhosas.
    Tentei colocar o slides mas, as fotos ficam pequenas e sobrando um espaço do lado.Me ajuda?quero muito colocar no blog.bjuz

    ResponderExcluir
  38. Adorei mesmo, esse era um dos tutoriais que mais queria, assim que atualizar meu layout vou usar!

    Tô seguindo por aqui!

    Beijos, Amanda.

    http://sonhosdacalifornia.blogspot.com/

    ResponderExcluir
  39. Talvez eu faça isso no próximo layout, amei! ^.^

    Styles Girls / Clica no perfil

    ResponderExcluir
  40. Liah eu não sei se ficou bom mais da uma olhadinha http://docecerejabruninha84.blogspot.com.br/ eu fiz no novo layout do doce cereja

    ResponderExcluir
  41. Tutorial excelente! Já estou usando

    www.futilidadedascinco.com

    ResponderExcluir
  42. EXCELENTE, JA USANDO.
    amei seu blog aproveitei e fiquei lendo os tutu ! :)
    Beijos te seguindo
    http://mundo-teen-da-cereja.blogspot.com.br/

    ResponderExcluir
  43. ADOREI *-* segue meu blog ? ja estou seguindo o seu.

    http://p-coisasdemeninas.blogspot.com.br/


    você sabe aonde tem temas bem legais para o blog??

    ResponderExcluir
  44. Adorei mesmo esse slide e usei no meu blog ^^ eu simplesmente adoro o seu blog já leio ele tem um tempo me sinto muito bem quando estou nele e adoro seus tutoriais.E obrigada por mais esse.beijos

    ResponderExcluir
  45. Como vc faz para colocar os slides cabeçalho? Me explica por e-mail? mitchietorres@hotmail.com.br

    ResponderExcluir
  46. AMEEEEEEEEEEI tá um graça no meu blog :)

    ResponderExcluir
  47. Já estou usando! Ele é divo! Sabe, alguns leitores pediram para eu postar o tutorial, me dá permissão?
    Beijos.

    http://girlsonlineoficial.blogspot.com.br/

    ResponderExcluir
  48. Vou fazer no meu blog! Se eu conseguir! kk

    ResponderExcluir
  49. Como faz para ele só aparecer na pagina principal?
    http://futureofgame.blogspot.com.br/

    ResponderExcluir
  50. Amora, tou criando um, e se eu por esse slide no blog, eu vou creditar assim que terminar o blog! Ok?

    Beijos!

    ResponderExcluir
  51. Liah, tentei postar esse slide mas ficou um espação enorme entre o cabeçalho e as postagens depois. Como faço para ficar assim bonitinho como no seu? me ajuda, por favor?

    http://blog-de-testesylvia6.blogspot.pt/

    ResponderExcluir
  52. Estava há tempos procurando um tuto pra esse tipo de slide. Adorei! Vou pôr no meu blog e nos créditos com certeza!
    Obrigada por dispor pra todos!

    ResponderExcluir
  53. Oi Liah! Estou usando um menu em meu blog que não permite que o código do slider funcione corretamente, você sabe como solucionar isso?
    O Código do menu é longo por isso vou postar o link ok? Se puder me ajudar ficarei imensamente grata!
    http://www.mundoblogger.com.br/2012/05/menu-com-imagem-deslizante-no-topo-do-blog.html
    Beijos!

    ResponderExcluir
  54. flor, coloquei esse tutorial, lá no meu blog porque uma leitora me pediu, mais, é claro que coloquei todos os créditos para o Cherry Bomb :)

    ResponderExcluir
  55. Liah eu amei o tutorial e também gostaria de saber se posso usa-lo em meu blog?

    ResponderExcluir
  56. Olá, Adoro Seu Blog,e estou usando no meu blog esse Slide!! <3

    ResponderExcluir
  57. como altera a posição do slide??????

    ResponderExcluir
  58. Liaah, postei esse Tuto no meu Blog, e eu creditei em todos os lugares que eu pude, ok ? Os creditos pra vs, claro ..

    ResponderExcluir
  59. Heey, seu blog é incrivel! <3
    Eu fiz esse tuto, mas estou tentando coloca-lo junto com o cabeçalho.. Mas exatamente ao lado da foto do cabeçalho, mas não estou conseguindo.. Será que você tem como me ajudar?
    xoxo,
    Carol =D

    ResponderExcluir
  60. Pq a legenda não fica como na foto ? :( , mas amei o tutorial e o blog ;3

    ResponderExcluir
  61. Liah, posso colocar esse tutorial no meu blog?

    http://pariseminhasmaos.blogspot.com.br/

    ResponderExcluir
  62. Liah, postei no meu blog, caso você queira eu retiro de lá ok ?
    Só não pedi permição porque percebi que estava off por algun tempo :)
    candypictures.tk

    ResponderExcluir
  63. Tenho uma dúvida, cada vez que eu quiser que o slide mude de "matéria" se é que me entende, tem que mudar o link do post?

    Bjs!

    ResponderExcluir
  64. adorei o tutorial *-* rs estou usando no meu blog,e obrigado por ajudar com tutoriais perfeitos! *-*
    http://otakusempire.blogspot.com.br/

    ResponderExcluir
  65. Liah,deixa eu te perguntar,tem que deixar um espaço no banner né?

    ResponderExcluir
  66. E mais uma vez está lá o Cherry Bomb pra me salvar nos tutoriais!!
    Obrigada Liah!
    Beeijos
    http://unhaseesmaltesdicas.blogspot.com.br

    ResponderExcluir
  67. Lia eu preciso de uma super iper mega ajuda sua, sabe esse slide eu sempre uso em meus layouts ele é divo hoje estou fazendo meu layout hoje fui usar ele e só mostra a bolilha girando e não as imagens estou desesperada esse meu layout só tem o slide e o nome do blog sem ele vai ficar horrivel eu não sou boa em criar cabeçalhos por isso só coloco efeitos, primeiro quando eu coloquei deu certo mais depois começou a só mostrar a bolinha, não consigo fazer nada melhor que esse layout por isso o preciso de sua ajuda, não me ignore por favor lia, aguardando sua resposta!

    ResponderExcluir
    Respostas
    1. tenta refazer todo o tutorial, isso aconteceu comigo tbm! só porque eu mudei uma coisinha de nada as fotos sumiram (eu metida tentando aprender html sozinha deu nisso rs), mas aí eu refiz e deu certo...

      Excluir
  68. O Slide é realmente lindo. Unico problema que me apareceu, é que quando eu o instalei da maneira que você ensinou. Funcionou perfeitamente, passou as imagens e tudo só que depois começou a aparecer só a bolinha de carregamento, e as fotos não aparecem. Se pude me ajuda querida agradeceria muito!

    ResponderExcluir
  69. Eu tbm usava e o meu parou de funcionar faz dois dias, ajuda a gente vai.

    ResponderExcluir
    Respostas
    1. Amores aqui está a solução:

      http://www.kawaii-world.net/2012/11/meu-slide-parou-de-funcionar-e-agora.html#more

      No blog lindo da Kaoori

      Excluir
  70. Oi Liah, me diz uma coisa, dá pra fazer esse mesmo script só que com postagens recentes, que atualize automaticamente? Se puder responder eu ficarei muito grata!
    Se alguém souber responder eu agradeço!!!

    ResponderExcluir
  71. Nossa amei.. muito lindo vou tentar no meu quem sabe!

    ResponderExcluir
  72. Finalmente um tutorial que funciona, já procurei muito por um slide que funcionasse, e agora consegui, obrigado mesmo, parabéns.

    http://cantinhodoronni.blogspot.com.br/

    ResponderExcluir
  73. Oi querida...infelizmente colei o código mas agora está dando uma mensagem do google repository codes...pedindo usuário e senha pra acessar o widget....acredito que tenha a ver onde vc hospedou o script não?

    O que faço??

    Bjusss

    ResponderExcluir
  74. nossa valeu adorei o tutorial. sempre procurei e nunca achei um tão bom! sem contar nesse desing, voce manja hein!

    ResponderExcluir
  75. Olá querida, coloquei esse slide a um tempinho no meu blo e ele parou de funcionar á um mes mais ou menos então eu tirei :(
    Mais adorei o post, mt boom e o seu blog tbm. Desde a primeira vez q entrei nn conigo mais parar de visitar. Realmente mt boom.
    Se quizer visita meu blog :)
    http://comentariosde1garotaqualquer.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. como vc fez para colocar aquele menu ali em cima ? PS: adorei seu blog :)(( http://vampiremaniacs-tvd.blogspot.com.br/ ))

      Excluir
  76. Putz Liah To Tentando Colocar Ele No Cabeçalho mas Não To consgeuindo Pode me ajudar?

    ResponderExcluir
  77. awnnn ele fica muito lindo... vou tentar fazer agr se der eu aviso daqui a poko ;D

    sweetsecretfantasy.blogspot.com.br

    ResponderExcluir
  78. *o* Obrigado Liah, você salvou minha vidaa *o*
    beiijos
    sweet-miki.(blogspot).com

    ResponderExcluir
  79. Olá eu sou de Angola - Luanda, sou blogger a 2meses e procuro a bastante tempo esse Slide, obrigado mesmo, visite se puder o meu blog ii deixe 1 Oi na caixa de msn se puderes www.rapkuia.blogspot.com

    ResponderExcluir
  80. Ah esse slide é a coisa mais linda!!
    Só um pouco complicado!!
    Primeiro vou colocar o com numeração que você também ensina aqui no blog no meu próximo layout eu vou tentar fazer este porque a última vez não consegui e acabei bagunçando o HTML todinho é sempre bom salvar uma cópia antes de fazer!!
    Beijos Liah

    ResponderExcluir
  81. Liah, to fazendo o layout, e com esse codigo, só que fica um espaço no lugar... vê: http://novidadesdl.blogspot.com/b/html-preview?token=7kXhxjsBAAA.zWBf-LnwIPAYC1LbUKCCRg.Wj5Oc7fekQqcmd-n2VdYRQ --- Espero que me ajude!

    ResponderExcluir
  82. Olá, o slide é muito bacana, vou utiliza-lo em meu blog.
    Obrigado por compartilhar.

    ResponderExcluir
  83. Adorei! Super fácil! Obrigada :)

    Beijo,
    http://infinitoparticular8.blogspot.com.br/

    ResponderExcluir
  84. Oi!Amei o tutorial!Está bem exclarecido e usei no meu blog!
    Obrigada

    ResponderExcluir
  85. poco pegar o tutorial opara meu blog fofa saladmist.blogspot.com

    ResponderExcluir
  86. Olha, os seus tuto são perfect, mais só que tem que ficar ajustando largura altura, e eu não sei, ee creio que várias pessoas também nem sabem oque fazer! Ajude, pf♥

    ResponderExcluir
  87. Como que faz pra colocar as setinhas e bolinhas no slide?

    ResponderExcluir
  88. Ignore o comentário acima, já consegui fazer, rs
    Mas, como que eu faço pra por a legenda do lado de baixo em vez do lado de cima do slide?

    ResponderExcluir
  89. Funcionou que uma beleza! Muito bom, lindo e prático o slide.

    http://garotasederivados.blogspot.com.br/

    ResponderExcluir
  90. nao pegou no meu blog so fica umas barra na lateral como faço me ajuda ??

    ResponderExcluir
  91. OMG! Liah muito obrigada por esse tutorial! Seu blog sempre tem os tutoriais que preciso *-* Funcionou direitinho no meu blog (já creditei *u*)

    Beijos,
    http://minhassinceridades.blogspot.com.br/

    ResponderExcluir
  92. Adorei! Vou tentar no meu blog...
    Parabéns pelo seu trabalho e conhecimento!
    beijos

    ResponderExcluir
  93. No meu blog a legenda so esta aparecendo quando muda de imagem :/, tem como concerta??
    aqui o meu blog www.beyoncenewmusic.blogspot.com

    ResponderExcluir
  94. Hola liah, ameii o tutorial mais tenho quase certeza que não conseguir fazer =/ mais acho super legal eu queria rebloga-lo eu já até escrevi ele e adaptei ao meu blog,agora só falta eu te avisar que eu vou reblogar dando os devidos creditos a um blog maravilho claro "Cherry Bomb" néh?? Tah bom? Thauzim! beijinhos!

    http://cantinhodaslovelys.blogspot.com.br/

    ResponderExcluir
  95. Estava colocando o Nivo no meu blog de teste , ficou otimo .. Mas , como colocar a legenda do SLIDER igual ao que fica no blog da ISABELA FREITAS ? . Se explicar como faz , fico agradecido >.<

    (Joventeens.com)

    ResponderExcluir
  96. como fazer para colocar as setinhas? pq o meu tá um quadrado :// olha:http://vampiremaniacs-tvd.blogspot.com.br/

    ResponderExcluir
  97. adoro o seu blog, sempre me ajuda. e esse foi o único tuto que deu certo *-* , mas quero que meu about fique do lado do slide e não abaixo. como faço? :/ espero que me ajude, orbigada s2

    ResponderExcluir
  98. Oi guria inteligente, olha..fiz esse slide na minha página ficou um efeito bunito só que ele fica piscando antes mesmo de dar o efeito, pensei até que seria o meu plugin do flash no Chrome mas está atualizado e a versão é atualizada.O que tu acha que poderia ser..Obrigado..Vovô design!
    Dá uma olhada lá se puderes é óbvio. www.correiodopovofm.org

    ResponderExcluir
  99. Quee slide liiiindo!Estou usando no meu blog

    http://princesadopanico.blogspot.com.br/

    ResponderExcluir
  100. coloquei no meu blog http://sonhodetodoselenator.blogspot.com.br/

    ResponderExcluir
  101. Eu coloquei no meu blog, mas tem 15 bolinhas ao invés de 4, alguem me ajuda ?

    ResponderExcluir
  102. Liaah sua perfeita, adorei o slider e estou usando ele, vou por os créditos a o seu blog na legenda ta?! >.< bjos e adoro seu blog!

    ResponderExcluir
  103. Adorei!! Irei estou usando e irei ensinar minhas leitoras, ta? Mas fique tranquila, já dei todos os créditos necessários! Beijos!

    loucasporumestilo.blogspot.com.br

    ResponderExcluir
  104. Liahhhh,
    Adorei o Slide, dá um Up no visual do Blog. =)
    Quero deixar ele alinhado a esquerda, você pode me ajudar?
    Já mexi em várias coisinhas no cód, mas não está dando certo.
    Beijão! E parabéns pelo Blog!

    ResponderExcluir
  105. o script e para por no editar html

    ResponderExcluir
  106. Amei a dica flor :D E já estou usando no meu blog, mas é normal o slide demorar a carregar?
    Beeijos :D

    www.queridosdevaneios.com

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

    ResponderExcluir
  108. Oi, estou seguindo...gostei bastante! Uma amiga minha me indicou o seu blog porque eu queria colocar um slide no cabeçalho do meu novo blog. E entrei aqui e estou seguindo o tutorial, mas quero tirar uma dúvida com você: Quais foram as larguras que você usou no seu blog?
    Beijocas, e se puder, me responda por e-mail: juliabitencourt15@gmail.com
    Meu blog >>>> julia-presente-de-deus.blogspot.com

    ResponderExcluir
  109. linda posso fazer esse tuto no meu blog ? vou dar todo os créditos
    Vou fazer se nao gostar eu excluo beijos
    http://gaarotamaania.blogspot.com.br/

    ResponderExcluir
  110. adorei irei acrescentra no meu blog!!!
    siga-me: http://garota-milk-shakechocolate.blogspot.com.br/

    ResponderExcluir
  111. Oii posso colocar um Nivo no meu blog *--*
    Cherry Land

    ResponderExcluir
  112. Funcionou!!!!! Vou linkar no footer do blog. Só falta eu arrumar umas medidas. Valeu.

    ResponderExcluir
  113. Oi liah , deu tudo certinho , mas o problema é que só aparece a primeira imagem e as outras não ;/ , você poderia me ajudar ?

    ResponderExcluir
  114. legal tentei estalar uns 100 tipos de slides apenas esse funciono obrigado

    ResponderExcluir
  115. Perfeito.....muiiito obrigada!!!!

    ResponderExcluir
  116. Peguei o tutorial, como faço pra creditar? Estava a séculos atrás disso! Hahaha

    Beijão!

    ResponderExcluir
  117. Tentei instalar vários e apenas este deu certo!
    Então, deixo meu agradecimento.=^.^=

    ResponderExcluir
  118. haha consegui personalizar e ja esta no blog! uhuh feliz! obrigada!

    sonhos-perdiidos.blogspot.com.br

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

    ResponderExcluir
  120. Oiii, eu fiz tudo direitinho só qua quando eu fui ver n aprecia as imagens!
    http://garotascupcakes2.blogspot.com.br/

    ResponderExcluir
  121. Pessoal não consigo mexer na largura do slide.
    Se alguém puder dar um help.
    manuellascripts@hotmail.com
    Obrigada

    ResponderExcluir
  122. Olá,faz tempo em que eu vejo os seus tutoriais mas nunca comento.Vim comentar para elogia o seu belo trabalho graça a você pude deixar meu blog cada vez mais bonito.

    Continue com o seu trabalho.


    bjs.

    ResponderExcluir
  123. Como faz para deixar o slide acima da area de comentários alinhado com a sidbar?

    ResponderExcluir
  124. Muito obrigada por esse tutorial, me ajudou muito! E deixou meu blog, digamos que, mais moderno! haha

    xoxo

    ResponderExcluir
  125. Muito bom, estou usando no meu blog, esse slide nivo dá aquele ar profissional, nunca pensei que fosse assim, tão "fácil", Tuto Divo!!!

    ResponderExcluir
  126. oi... o tutu foi muito útil... Fiz tudo direito porem as minha imagens não aparecem???? será que tenho q fazer tudo d novo???

    ResponderExcluir
  127. Foi muito útil, funcionou muito bem!

    ResponderExcluir
  128. Annyong!obrigada,muito lindo,coloquei no meu blog.

    ResponderExcluir
  129. Oii muiito obrigada coloquei no meu blog! eu copiei o Script para dar a video aula no meu blog mais dei os créditoos beiijoo! http://winxclubpoderosas.blogspot.com.br/

    ResponderExcluir
  130. Oii, amei!!!!!!! obrigada.......beijus

    Aqui o resultado:

    Kawaii Tutoriais

    ResponderExcluir
  131. Adorei,ajudou e muito! só que nem prestou (do jeito que eu fiz!)

    ResponderExcluir
  132. noossa obrigada vc me ajudou muito mesmo
    http://cupcakescoloridoscc.blogspot.com.br/

    ResponderExcluir
  133. Muito perfeito vlw ajudou muito mesmo http://luablanconossadivalinda.blogspot.com.br/

    ResponderExcluir
  134. Você tem tudo que podemos querer !

    ResponderExcluir
  135. Liah eu to tendo problemas no slide por que quando passa a ultima foto apareçe uma coisa toda branca

    ResponderExcluir
  136. (▒)(▒)_______███✿███
    (▒)(█)(▒)__ ███_✿██████
    _(▒)(▒)___██____████████
    _________██____███▒▒▄▒▒
    __________██____█▒▒▒▒▒▒
    ___________██____ █▒▒▒♥___(▒)(▒)
    ____________██_____▒▒____(▒)(█)(▒)
    __________ __██____▒▒______(▒)(▒)
    _________________ ▓▓▒▒▓▓___█
    ________________ ▓▓▓▒▒▒▓____█
    _(▒)(▒)_________ ▓▓_▓▓▓▓▓___█ (▒)
    (▒)(█)(▒)______ ▓▓__▓▓▓▓▓___█(▒)
    _(▒)(▒)_____ _▓▓__ ▓▓▓▓▓___ █
    ___________ ▓▓___▓▓▓▓_▓___█
    __________ ▓▓___▓▓▓▓__▓▓__█
    _________ ▓▓___███✿█__▓▓_█
    ___♥▒▒♥▒♥▒♥▒♥▒♥▒♥▒♥ __▓▓_█
    ___ ♥▒♥▒▒♥▒♥▒♥▒♥▒▒♥▒♥__▒▒▒
    ____ ♥▒♥▒▒♥▒♥▒♥▒▒♥▒▒♥▒___█
    ______ ♥▒▒♥▒♥▒♥▒♥▒♥▒▒♥▒♥_█
    ________ ♥▒▒♥▒▒♥▒♥▒▒♥▒▒♥▒♥
    ___________♥▒♥▒▒♥▒▒♥▒▒♥▒▒♥▒
    _______________▓▓_▓▓
    _(▒)(▒)_________▓▓_▓▓
    (▒)(█)(▒)_______▓▓_▓▓
    _(▒)(▒)_________▓▓_▓▓
    _______________▓▓_▓▓
    _______________▓▓▓▓
    _______________▓▓▓
    ______█████████
    ________██____██
    ______█✿█____██
    ______█_______██
    ______________█✿█
    ______________██__█▄▄
    Como é bom visitar o teu blog!!!
    Sempre tem coisas incríveis e maravilhosas!
    Obrigado pelos comentários e visitinhas em meu blog!
    Beijos e bom domingo!
    .¸¸.*?*.¸¸.*?*¸.*?*.¸¸.*?*.¸¸.*?*.¸¸.*?*

    ResponderExcluir
  137. Vlw pelo Slide estoou procurando ja faz um tempo e esse foi o unico que funcionou direitinho no meu blog.
    parece que sou o unico homem aki kkkkkkkkkk

    ResponderExcluir
  138. Muito Bom O Código, seu blog tem dicas incríveis. Mas sabe como colocar vídeos no slide?

    ResponderExcluir
  139. oieee, eu coloquei no meu blog, mas a setinha nao ficou certa :/ olha la:https://caroldaros.blogspot.com

    ResponderExcluir
  140. Liah, não consigo por as setas nem as bolinhas!!! Em que parte do HTML eu coloco? Eu pego o link da imagem e aí coloco ali, certo? Mas em que parte? Me ajuda, por favor!

    ResponderExcluir
  141. Eu tava mesmo procurando esse tutorial :3 mas o novo modelo do Blogger em HTML não tem mais alguns códigos e estou perdidinha, tem como me ajudar?

    ResponderExcluir
  142. O meu não tá aparecendo a imagem porque ?

    ResponderExcluir
  143. Oi!
    Uau, só tenho uma palavra para o seu blog. DIVATÁSTICO. - Não use meu divatástico nome para coisas que eu gosto, senão a maldição do faraó te cai em cima (só falando porque tem amigas minhas que usam o divatástico e ele é MEU. *chorando aqui por ser plagiada*) - Pronto, me recompus.
    Me fala só uma coisa, as imagens que a gente usa, elas têm que ter que dimensão?

    ResponderExcluir
  144. consegui *---* ficou lindíssimo.

    www.cantinhodopoderfeminino.blogspot.com.br

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

    ResponderExcluir
  146. oi pessoal! Liah, no meu blog quando eu clico em layout não aparece o html/javascript.. Como eu faço para ativar ele ??

    ResponderExcluir
  147. Oi, encontrei um site plagiando o seu tutorial, achei que seria correto te avisar. O conteúdo é idêntico ao seu, dê uma olhada: http://tonamodacomthay.blogspot.com.br/2013/01/tutorial-como-se-coloca-nivo-slider_27.html

    ResponderExcluir
  148. Não consegui :/
    ele ficou ao lado do cabeçalho, gostaria de vê-lo abaixo das páginas, dentro da coluna principal. :)
    Tem como? Obrigada!!!

    ResponderExcluir
  149. POXA VIDA, MUITO OBRIGADO!!! Esse foi o ÚNICO slider que funcionou no meu blog! Obrigado!!!!

    BBIZARRO

    ResponderExcluir
  150. Agradeço-lhe imensamente! Já procurava há tempos por um bom tutorial do Nivo Slider e só consegui encontrá-lo por aqui.
    diveinthis.blogspot.com

    ResponderExcluir
  151. Não entendi nada,não manjo nisso,qual é o link do slider ?

    ResponderExcluir
  152. O link do slide é para onde você quer que direcione quando clicarem na imagem Milena
    Obrigado Liah.

    ResponderExcluir
  153. Sei que o post já tem algum tempo... Mas estou a tentar descobrir como fazer o slide apenas funcionar quando apenas vão mexer nele. Basicamente, sem estar a passar as imagens automaticamente.

    ResponderExcluir
  154. Muiiiiiiiiito obrigada! slide lindo, funcionou perfeitamente! Era o que eu estava procurando!
    Você é demais!
    Deus te abençoe.

    ResponderExcluir
  155. Obrigada flor ajudou muito

    ResponderExcluir