25.11.12

Como colocar 'Novo Slide' no seu blog


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("http://4.bp.blogspot.com/-TBMTXcO0VxM/T7dSfCUe9dI/AAAAAAAABgY/dmbkzgOPQI0/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
 

fonte: http://cherry-liah.blogspot.com.br/2012/08/nivo-slider.html

15 comentários:

  1. oi adorei o post e estou usando seu modelo no meu blog, mas tenho algumas dúvidas, qual o tamanho que a imagem deve ter para ficar perfeita no slide?
    onde acho molduras para o slide?
    Muito Obrigada!

    ResponderExcluir
    Respostas
    1. Olha, o tamanho da imagem depende muito da largura do seu blog, por exemplo aqui no MB estou usando a largura total de 1060 pixés, é meu slide é do mesmo tamanho que está no tutorial (meu slide desta logo abaixo dos comentários) confira o tamanho e veja se é apropriado para o seu blog também, se não basta você alterar o tamanho nesta linha aqui que no slide é a 7° linha (não coloque os parenteses como mostra aqui em baixo, copie igual ao do tutorial altere só os números)

      ( width:640px !important; /*largura do slide*/height:300px )

      Neste slide não é necessário molduras, ele já vem completo, basta você alterar as cores, fonte e tamanho como deseja...
      Entendeu Flor? Qualquer dúvida é só mandar! Obrigado pelo comentário, espero ter ajudado, beijos MB!

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

    ResponderExcluir
    Respostas
    1. Olá Fc Mundo Interior, vai em LAYOUT >> ADICIONAR UM GADGET >> HTML/JavaScript ... e depois é só colar os códigos, entendeu? Qual quer coisa me avise!
      Obrigada pelo elogio =)
      Beijão

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

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

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

    ResponderExcluir
    Respostas
    1. Bom, se você confiar eu faço pra você, ai você salva em rascunho as 3 fotos que você quer no slide, você pode trocar a senha sei lá, não vou mexer em nada além do slide, prometo, qual quer coisa você pode me denunciar rsrs'
      Você é quem sabe, beijos ;*

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

    ResponderExcluir
    Respostas
    1. O MB não possui nenhum tipo de rede social, tenho apenas o blog, desculpa, mas só posso ajuda-la aqui no blog MB mesmo! Obrigada pela confiança, mas espero que não desista dos slides, se precisar estarei aqui, tá? Beijos MB ♡

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

    ResponderExcluir
  8. Depois de muito esforço! Consegui amore, muito obrigado pelas dicas, amei teu blog, em breve nosso blog voltará ao ar, e claro não esquecerei de passar aqui para deixar o link para vc dar uma olhadinha! Milhares de beijos! ;*

    ResponderExcluir
    Respostas
    1. Okay, de nada =)
      Estarei aguardando o link
      Beijos

      Excluir
  9. Como se completa as partes em negrito, to boiando aqui!!!

    Beijúh

    ResponderExcluir
    Respostas
    1. Na caixinhade códigos do seu blogger, vá em Modelo >> editar HTML >> Ctrl + F >> "Precise pelo código que se pede e depois copie e cole esse código enorme do slide, a parte em negrito são as alterações e fontes e cor do texto do slide, e onde pedo o URL, são os códigos das bolinhas e setinhas, leia todo o tutorial direitinho primeiro, que é pra você entender, depois comece a fazer o tuto no seu blog, porque vai dar certinho". Boa sorte Flor, espero ter ajudado, qualquer coisa é só avisar!
      Beijão

      Excluir

- Se tive alguma dica, diga! =)
- Alguma dúvida ou algum pedido? Comente!
- Sim, visito o seu blog, mande o link! =D
-Favor não ofender ninguém, elogios e criticas são bem vindos, mas mantem o respeito!
Obrigada, MB!

Copyright © 2016 | Design e Código: Mistério do Brilho e Sanyt Design | Tema: Viagem - Blogger | Uso pessoal • voltar ao topo