Nivo Slider

15/08/2013

Tumblr_lxtnma0oqe1qkscwbo1_500_large_large
Sim gente, resolvi tomar vergonha na cara e aparecer por aqui. Foi sacanagem da minha parte sumir assim sem dar explicações, eu sei. Mas agora estamos no último semestre e as provas finais começam a chegar, como sou por natureza uma aberração em matemática, física e exatas em geral, vocês devem imaginar como é. Fora os trabalhos, pra vocês terem uma noção tenho até um curta metragem pra fazer. E isso dá trabalho hein? Confesso também que ando bem desanimada para postar. Sobre o 8 on 8 não sei o que vou fazer. Aquela semana choveu muito e não consegui tirar as fotos. "Mas Anny, dentro de casa não chove!". Eu sei, mas chuva traz preguiça que por sua vez traz desânimo e vontade de não fazer nada além de ficar deitadinha na cama com o notebook. Alguém me entende?  Mas... Ball forward!
Quem estava com saudades de tutoriais se manifeste! haha Como estou super sem criatividade ultimamente (culpa da chuva e do frio, j-u-r-o!) e sei que vocês sentem falta dos tutoriais, é isso que vamos ter pra hoje!

Esse tutorial aprendi num blog que para meu desespero descobri hoje ter sido excluído. Sorte a minha ter o slide no blog e poder compartilhar com vocês o código. #MeAmem!

O slide vai ficar mais ou menos assim (dependendo das suas configurações):


Não vou ensinar especificamente um lugar para colocar, mas você pode por no cabeçalho (como o meu) ou mesmo no topo das postagens em tamanho grande. Se você quiser colocar no cabeçalho recomendo ler com atenção este post do falecido Cherry Bomb #TodosChoram.

Os códigos são grandes, então clique em "leia mais"!


Procure por }]]></b:skin> (Ctrl + F) e acima dele cole o seguinte código:

/* The Nivo Slider styles */
#slider {position:relative;}
#slider img {position:absolute; top:0px; left:0px;
display:none;}
#slider a {border:0; display:block;}
.nivoSlider {position:relative; width: 556px; /* largura */ height: 440px; /* altura */ } .nivoSlider img {position:absolute; top:0px; left:0px;}
/* If an image is wrapped in a link */
.nivoSlider a.nivo-imageLink {position:absolute; top:0px;
left:0px; width:100%; height:100%; border:0;
padding:0;margin:0; z-index:6; display:none;}
/* The slices and boxes in the Slider */
.nivo-slice
{display:block;position:absolute;z-index:5;height:100%;}
.nivo-box {display:block;position:absolute;z-index:5;}
/* Caption styles */
.nivo-caption {position:absolute;left:0px; bottom:0px;
background: #ccc/* Cor de fundo do título */  color: #fff/* Cor do título */  text-transform: uppercase; width: 100%; z-index:50; border-right: 5px solid #;padding: 5px 0;}
.nivo-caption p {padding:0 20px;margin:0;font-size:14px;}
.nivo-caption a {display:inline !important;}
.nivo-html-caption {display:none;}
.nivo-directionNav a
{position:absolute;top:45%;z-index:99;cursor:pointer;}
.nivo-prevNav {left:0px;}
.nivo-nextNav {right:0px;}
/*============================*/
/*=== Custom Slider Styles ===*/
/*============================*/
.slider {width:100%;}
.slider img
{position:absolute;top:0px;left:0px;display:none;}
.slider a {border:0;display:block;}
.nivo-controlNav {display:none;}
.nivo-directionNav a
{display:block;width:31px;height:34px;background:url(http://3.bp.blogspot.com/-jHZ1kB65wgQ/UDp__7gnPwI/AAAAAAAACck/y3X8PV6EFuQ/s1600/s-12.png)
no-repeat; /* imagem das setinhas */ text-indent:-9999px;border:0; }
a.nivo-nextNav {background-position:-30px 0;right:15px;}
a.nivo-prevNav { left:15px;}
.nivo-caption {font-family:"Trebuchet MS", Arial,
Helvetica, sans-serif;}
.nivo-caption a {color:#efe9d1; text-decoration:underline;}

As únicas coisas que você precisa alterar são as negritadas. Principalmente o tamanho (width e height).

Agora procure por </head> e acima dele cole:

   <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js' type='text/javascript'/>
<script src='http://static.tumblr.com/ifqwhnb/GBsm20q7d/jquery.nivo.slider.pack.js' type='text/javascript'/>
<script type='text/javascript'>
var $nv4wp = jQuery.noConflict();
$nv4wp(window).load(function() {
$nv4wp(&#39;#slider&#39;).nivoSlider({
effect:&#39;random&#39;,
slices:15, // For slice animations
boxCols: 4, // For box animations
boxRows: 2, // For box animations
animSpeed:500, // Slide transition speed
pauseTime:3000, // How long each slide will show
startSlide:0, // Set starting Slide (0 index)
directionNav:true, //Next and Prev
directionNavHide:true, //Only show on hover
controlNav:true, // 1,2,3... navigation
controlNavThumbs:false, // Use thumbnails for Control Nav
controlNavThumbsFromRel:false, // Use image rel for thumbs
controlNavThumbsSearch: &#39;.jpg&#39;, // Replace this with...
controlNavThumbsReplace: &#39;_thumb.jpg&#39;, // ...this in thumb Image src
keyboardNav:true, //Use left and right arrows
pauseOnHover:true, //Stop animation while hovering
manualAdvance:false, //Force manual transitions
captionOpacity:0.8, //Universal caption opacity
prevText: &#39;Prev&#39;, // Prev directionNav text
nextText: &#39;Next&#39;, // Next directionNav text
beforeChange: function(){}, // Triggers before a slide transition
afterChange: function(){}, // Triggers after a slide transition
slideshowEnd: function(){}, // Triggers after all slides have been shown
lastSlide: function(){}, // Triggers when last slide is shown
afterLoad: function(){} // Triggers when slider has loaded
});
});
</script>

Visualize e se estiver tudo ok salve. 
O slide ainda não irá aparecer. Para mostrá-lo vá até Layout e adicione em um lugar estratégico um gadget de HTML/JavaScript. Dentro dele cole:

<div id="slide"><div id="slider">
<a href="Link do Post" target="_blank"><img src="Link da Imagem" title="Título do Post" width="350" height="210" /></a>
<a href="Link do Post" target="_blank"><img src="Link da Imagem" title="Título do Post" width="350" height="210" /></a>
<a href="Link do Post" target="_blank"><img src="Link da Imagem" title="Título do Post" width="350" height="210" /></a>
<a href="Link do Post" target="_blank"><img src="Link da Imagem" title="Título do Post" width="350" height="210" /></a>
</div></div>

Altere o que se pede e seja feliz!
Lembrando que você deve alterar height e width conforme o tamanho que estipulou lá no primeiro código!

Espero que consigam e tenham gostado! 

66 comentários:

  1. que lindo, Anny, e quanto tempo, né? >.< amei o tutorial, beijos

    Lara I querida-imperfeicao.blogspot.com

    ResponderExcluir
    Respostas
    1. Muito tempo haha Que bom que gostou flor! Beijos :*

      Excluir
  2. Awn adoreiii, estava querendo muito saber como frazer!!!
    Quanto tempo! Estava com saudade de você e de seus tutoriais!
    http://psjackeline.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. Awn, também senti saudade de vocês todas haha
      Que bom que gostou xuxu!

      Excluir
  3. Ótimo tutorial!! Quem não chora pelo CB? Ashishiu

    www.soytiago.blogspot.com

    ResponderExcluir
  4. Quanto tempoo, tava com saudades das suas postagens e dos seus tutoriais :3
    Ainda não acredito que o We Heart HTML foi removido :( Adorava os tutos de lá.
    Acho que no próximo layout vou usar esse slide..

    perfectcalifornia.blogspot.com

    ResponderExcluir
    Respostas
    1. E põe tempo nisso haha
      Também adorava aquele blog :/

      Excluir
  5. Hy, leitora novaaa , adorei seus postes, seu blog é bem legal ,a tutorial ajudou bastante , estava atrás a um bom tempo!

    http://detudoumpoucohaha.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. Olá, que bom que gostou! Volte sempre :3

      Excluir
  6. Adoro slides o blog, e acho o nivo um dos melhores e já uso rs. Anny, vc poderia fazer um tuto de como deixar uma imagem em todo o rodapé (onde ficam os gadgets da page, twitter e insta? Nunca consigo! Obrigada, adoro seu espaço ♥

    ResponderExcluir
  7. Ha, até que enfim! Eu estava com saudade dos posts. Sempre quis colocar um desse no meu blog, mas não combina com o novo layout, então vou deixar pro próximo... De qualquer forma, o tutorial foi muito útil.

    que-a-mais.blogspost.com.br

    ResponderExcluir
    Respostas
    1. Vou visitar seu blo :33 tem Twitter? se tiver segue: @JoyceRain . Bjiin! :*

      Excluir
  8. Muito bom !!! Tinha dado um problema quando fiz mas, era a URL de uma imagem que tava errada, me assustei até!

    BlogueiroNerd

    ResponderExcluir
  9. Oi querida tudo bem recomendei seu blog lá no meu blog!

    http://strawaberry-kawaii.blogspot.com.br

    ResponderExcluir
  10. Eu simplismente amo muiito seu blog,ele é um dos meus preferidos :3 ele é muito perfeito!
    Beijoss

    ResponderExcluir
  11. A séculos procuro esse tuto, obrigada, coloquei nos favoritos <3
    bem vinda de volta :33

    http://welcome-to-kawaii-land.blogspot.com.br/

    ResponderExcluir
  12. Finalmente deu as caras néh,achei que nem iria mais postar nada aqui. Quase perdia uma leitora héin... Esse tuto eu fiz no meu blog,mas exclui o blog por falta de tempo,mas,acredito que ajudou bastante para aqueles que procuram... Então,mudando um pouquinho de assunto. Não acha que ja deveria ter comprado o domínio do blog? é importante,pena se eu quiser chegar la num lugar e resolver comprar esse blog. O blog seria meu e não mais seu. Mais,como sou sua fã,não vou fazer isso. Mais se ficar mais de um século sem postar eu te mato meniina,se é que até la vc não ja tiver morta '-'

    ResponderExcluir
    Respostas
    1. HAHAHA desculpa ><
      Já devia ter comprado sim, mas não quis comprar porque pensava em mudar o nome do blog. Mas acho que vou deixar assim mesmo. Mas como assim querer comprar esse blog? Não tem como, só o domínio... Que aliás já existe #xatiada. Nossa que medo de você hahahaha Mas é verdade, tenho que postar mais!

      Excluir
  13. Oi linda amo teu blog, aceita fazer parceria?
    http://www.kajoeib.blogspot.com.br/

    ResponderExcluir
  14. Nyon, que fofinho * - *
    Talvez eu use quando for trocar de layout ^^
    Beijinhos
    http://its-a-str4ngeworld.blogspot.com

    ResponderExcluir
  15. Você leu meus pensamentos, eu tava procurando como por o slider haha!
    Pena que não consigo fazer o tutorial de como por o gadget no cabeçalho, quando eu pesquiso o nome do meu blog no html não aparece exatamente como esta no tuto :/ Se puder fazer um tutorial, acho que vai ajudar bastante gente! Adorei seu blog!
    cantinholiteral.blogspot.com

    ResponderExcluir
  16. Sem ofenças ( eu gosto do seu blog e tal.. )mas quando eu fiz isso meu blog ficou com um certo "probleminha" www.showsty.blogspot.com
    Mudou as letras e os links e eu n consigo colocar pro que era novamente

    ResponderExcluir
    Respostas
    1. O código funciona perfeitamente, tanto é que uso ele aqui e usei em várias encomendas :D Você não se confundiu com algo?

      Excluir
  17. eu gosto desse tipo de slide, acho que fica bacana com um design tipo revista. Penso em usa-lo em algum próximo layout, não sei pois ficou bem explicado e não é difícil de entender. Enfim, o PM voltou, e te espero lá (=

    Um Beijo, Paloma.
    www.momamoraes.blogspot.com

    ResponderExcluir
  18. Amei o post, você é muito om com tutoriais e html, enquanto eu :p.....
    Faz um tempo que acompanho seu blog, mas esse é meu primeiro comentário, tenho uma pergunta pra você, como você faz wishlist (que site, editor)?
    Ainda não achei nenhum lugar que faça uma decente./
    Beijinhos


    http://unhasmakeecia.blogspot.com.br/

    ResponderExcluir
  19. Olá linda Amei seu blog otimas dicas.
    Me diz uma coisa como vc faz para colocar no final das suas postagens sua foto amei esse efeito vc poderia fazer um tutorial?Obg Passa lá ne meu blog depois bjs
    http://malukinhasfashion.blogspot.com.br/

    ResponderExcluir
  20. Eu adoro este slide, sempre usava no meu blog =)
    Beijocas, Lili ;3
    Clique aqui, e vá para o blog / Princesa Teen - Sorteio! Participa? ♥

    ResponderExcluir
  21. Obrigada pelo tuto, já estou usando no meu blog ;) Anny, ensina como você fez o footer do blog, eu não consigo de jeito nenhum! Beijos, adorei o post!

    ResponderExcluir
  22. Oi... queria entender um pouco disso, mas acho tão difícil...
    Adorei o seu blog e já estou seguindo e curtindo...
    Faça uma visita no meu blog, ele é novo e todos os dias tem novidades!!! Se gostar, siga também!

    Espero sua visitinha!

    Bjos
    Andreza

    http://blogdremattos.blogspot.com.br

    ResponderExcluir
  23. Eu estou tentando fazer isso já varias vezes e ñ consigo afff acho que vou desistir...toda vez que tento nunca dar certo.
    http://malukinhasfashion.blogspot.com.br/
    Passa lá no blog to te seguindo viu lina!

    ResponderExcluir
  24. Anala, gostaria de saber como fazer para personalizar o quem sou eu igual ao seu e remover aquele do blog quero uma foto grande tipo esse seu do início mas não achei e nem sei como fazer estou começando agora pode me ajudar ou fazer um tutorial ? OBg

    ResponderExcluir
  25. Faz um tempão que não apareço mais por aqui, poxa está lindo o layout, não deve ser novo, mais para mim é pois não tinha o visto ainda uhau'

    Esse tutorial é muito útil, quase sempre uso. E que bom que voltou

    Adolescente Nerd

    ResponderExcluir
  26. Amei o tutorial, fica lindo, espero colocar no próximo layout, se eu conseguir... Também pensei que você não iria mais postar aqui, mas agora tô relaxada.

    http://mundoda-rachel.blogspot.com.br/

    ResponderExcluir
  27. oii sou uma leitora nova ameii seu blog mas eu n entendi como começa eu tenho q tar no lugar pra configurar o blog pra fazer isso ou no seu blog msm n entendii

    ResponderExcluir
  28. Adorei o tutorial,seu blog é lindo parabéns *-*

    http://blogdasamela.blogspot.com.br/

    ResponderExcluir
  29. Ensina como deixar o titulo das postagens desse jeito que você colocou no seu templante, por favor.

    ResponderExcluir
  30. Sempre quis ter um blog com slide... Mas não sou muito boa com essas coisa :P
    http://juliabottoni.blogspot.com.br/
    http://brazilian-butterfly.tumblr.com/

    ResponderExcluir
  31. A um tempo estive a procura de um tutorial com uma explicação clara, a sua tem isso! haha Sem contar que sempre dou uma passadinha aqui!
    O blog é simplesmente incrível.. Enfim.. Beijos!

    ResponderExcluir
  32. Eu uso outro tipo de slide mais esse é bom também, gostei bastante! Seguindo flor!

    http://webs-com-luan-santana.blogspot.com/

    ResponderExcluir
  33. Adorei as dicas em seu blog...
    seguindo
    Bjos http://belezatoquefeminino.blogspot.com.br/

    ResponderExcluir
  34. Oi Anny, adorei esse tutorial, ajudou bastante viiu! Alias,seu blog por inteiro sempre me ajudou muito, e foi graças a ele que consegui montar meu próprio layout sozinha,quer dizer, eu e com a ajuda do Go Imagine rsrs, amo seu blog e acho ele muito inspirador , pena que não está postando todos os dias, daí fico aqui,lendo os textos e posts mais antigos, poxa Anny, dá uma passadinha lá no meu blog,por favor, sonho de vida!

    simples-garotaa.blogspot.com

    ResponderExcluir
  35. Que ótimo esse tuto *--*

    ResponderExcluir
  36. Adorei esse post,mas o meu HTML não tem esse código }]]> . Sera que voc~e sabe onde adiciona-lo?

    ResponderExcluir
  37. Amei todos os Tutoriais..
    Meu blog: http://shy-confident.blogspot.com.br/

    ResponderExcluir
  38. Estou ficando doida. Já tentei fazer, mas não consigo e estou ficando agoniada. Parece tão simples! Mas ele fica mudando de forma, com números em cima e sem a imagem da seta... :/
    Me ajuda? O que eu devo ter feito errado? Eu ajustei os tamanhos...
    Agora tirei e estou editando as outras coisas no blog de teste.
    Adoro o seu blog. Muito sucesso!

    Beijos.

    http://vivianpitanca.blogspot.com.br/

    ResponderExcluir
  39. Comecei a olhar o teu blog hoje e ja amei. So queria pedir, se você puder é claro, fazer um tuto sobre como fazer um template para blogger porque ja procurei em todo lugar e ainda não encontrei um tuto que fale sobre isso.

    ResponderExcluir
  40. oque eu coloco no ''Link do post '' ?

    ResponderExcluir
  41. Ensina como coloca slide como esse que você em cima do post onde tem escrito (anuncie aqui saiba como)

    >> http://eternamentepoderosas.blogspot.com.br/

    ResponderExcluir
  42. Ensina como colocar um slide como esse que vc tem em cima do post onde tem escrito ( anuncie aqui saiba como )

    >>http://eternamentepoderosas.blogspot.com.br/

    ResponderExcluir
  43. Sinceramente, esse blog é mt perfeitoo! maei.. tem todos os tutoriais que eu esstava procurando! :D

    ResponderExcluir
  44. Any, conheci seu blog agora e ja estou amando, só que estou com um probleminha, agora os códigos do blogger esta todo modificado, não consigo encontrar nenhum dos códigos que vc passou, vc poderia me passar tipo um código base pra eu poder fazer as modificações? Please amei todos os tutoriais, vc vai me fazer a pessoa mais feliz do mundo se conseguir esse código para mim *-*

    Bjuhhh

    ResponderExcluir
  45. Por favor me ajuda, eu fiz tudo o que pedia mas infelizmente não deu certo... :/

    ResponderExcluir
  46. Adorei o blog, mas você poderia fazer um tuto com print ou vídeo, pois não entendi muito bem, e parabéns pelo blog, é demais.

    ResponderExcluir
  47. Gente, segui o tutorial direitinho e conseguir por o slide no meu blog, AMEI! Ficou lindo, e varias coisas la são graças aos seus tutos maravilhosos, sou sua mais nova fã kkkk

    http://szcasa.blogspot.com.br/

    ResponderExcluir
  48. Anny, eu queria saber como que ajusta a posição certinha dele ? Poderia me explicar ? Obg linda.

    ResponderExcluir
  49. Flor, eu segui passo a passo e deu certinho, daí depois fiz como no post do Cherry, mas a única coisa que não consegui foi deixar ele no mesmo lugar que o teu fica, no caso o meu fica no lado que tá o título do teu blog, entendeu? rs...
    Como faço para mudar para o mesmo ado que o teu? já tentei tudo...
    Aguardo resposta.
    Um beijo!

    ResponderExcluir
  50. Adoreiiiii! vou tentar fazer no meu!!!
    www.mininamulher.com

    ResponderExcluir
  51. Adorei *-*
    Seguir
    http://descobrindoavida14.blogspot.com.br/

    ResponderExcluir
  52. Anny, tem como fazer ele dentro de um post? :c

    ResponderExcluir
  53. Olá, estou construindo meu blog e tentando usar esse tutorial divo, porém não consigo adicionar o Gadget :(

    ResponderExcluir
  54. Finalmente consegui colocar slide no meu blog.. Amo o Go Imagine, parabéns !

    http://mdiariosecreto.blogspot.com.br/

    ResponderExcluir
  55. Amei seu blog.. ta de parabéns.
    Tenho um blog de imagines, se puderem dar uma olhadinha. Obrigada http://momentsimagine.blogspot.com.br/

    ResponderExcluir
  56. Estou percebendo que só comigo não dá nada certo... acho que é o terrivél modelo qual é o seu modelo aqui eu juro por tudo de mais sagrado que não irei copiar seu template nem nada mas por favor qual é ?

    ResponderExcluir
  57. Gente, como não conheci esse blog antes? ahahaha amei amei o post e todo o seu blog. Estou atrás de um slide bom e bem explicadinho há tempos, e este é lindo! Parabens linda!

    Ah, quando der, dá uma passadinha lá no blog, vou adorar ter você por lá! Beijo grande! (www.fashionworldbykaren.com)

    ResponderExcluir

- Comentários do tipo "seguindo, segue de volta" "lindo o blog, seguindo, retribui?" Serão ignorados se não tiverem uma opinião sobre o post em si.
- Não aceitamos mais selinhos e tags, sorry!
- Leia a página "FAQ" e outras páginas internas antes de perguntar qualquer coisa.
- Sua opinião é sempre bem vinda. Mas seja educado!

© Go Imagine - 2014. Todos os direitos reservados.