11 fevereiro 2013

63

Tutorial: Como colocar nivo slider no blogger !

Ooooooooi amooooreees ><
Mais uma tutorial uhul , dessa vez é uma coisa que todo mundo pira, é o nivo slider ( é assim mesmo que se escreve eu não errei viu ? kk) pra quuem não sabe oque é , é esse slide que eu coloquei no meu blog que fica passando imagens , legal né? vários blogs proficionais tem isso, to me sentido chique kkkkk
Créditos: Eu peguei esse tuto, no blog Crerry Bomb, então todos os créditos desse post são pra ela !
Vamos parar de falar e começar logo né ? u.u
Pra começar, você tem que ir em: modelo > editar HTML , como no exemplo abaixo :



Nos códigos que apareceram digite Ctrl F e na caixa de pesquisa que aparecer procure por </head>




Feito isso, 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>

Está destacado em negrito as partes que vocês podem alterar, no fim do post vai ter algumas imagens de setinhas e bolinhas pra vocês trocarem .
Feito isso , clique em visualizar pra ver se não mudou nada, se estivér tudo certo clique em salvar
OBS: o slider não vai aparecer apenas com esse código, então se você visualizar e não tiver nada, não se preocupe porque ta tudo certo ><
Depois vá em Layout e adicione um Gadget de HTML/JavaScript :



Adicionado o gadget, copie e cole o código abaixo para o slider aparecer:


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


Pronto, agora é só preencher com a URL da imagem que você quer que apareça, a legenda e o link da imagem, você pode usar 4 imagens diferentes ><
Para copiar a URL da imagem é só clicar em cima da imagem desejada com o botão direito e clicar em ''copiar URL da imagem'' e depois colar o código no lugar de ''URL da imagem'' no código acima.
Pronto feito isso salve o gadget, e visualize seu blog !




O meu ficou assim , e o de vocês ? hahaha , gostaram meninas ? dá um toque proficional ao blog né ?
Agora vamos ás bolinhas e setinhas que prometi, procurei em vários blogs, pra trazer pra vocês uma variedade, pra não fazer igual todos os blog né ? kkkkk

Setinhas



Bolinhas


É isso gente espero que tenham gostado, se quiser fazer essa tutorial no blog de vocês por favor me pedir primeiro e dar os créditos viu ? até o proximo amores ><


                                                                           

63 comentários:

  1. aaaaaaaaa muuuito obrigada, ajudou muuuito , adoreeeeeeeeeeeeeeeei *-*

    http://epidemiamakeup.blogspot.com.br

    ResponderExcluir
  2. ótima dica, com certeza num futuro próximo irei precisar dessa dica lá no blog.Obrigada por compartilhar.
    Super bjs

    http://princessgloss1.blogspot.com.br/

    ResponderExcluir
  3. adorei a dica, vou ver se consigo colocar no meu também, haha
    lindo o blog, parabéns

    ResponderExcluir
    Respostas
    1. faaz lá você consegue kk ><
      Obrigada *-*

      Excluir
  4. Obrigada pela visitinha no meu blog flor volte sempre viiu *__*
    noossa você me ajudou muito nisso obrigada mesmoo voo correr lá no meu pra tentar fazer tbm seguindo seu blog beijooooos
    http://maquiagembiialopes.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. de nada linda, com certeza você consegue *-*
      Beijos

      Excluir
  5. Que legal esse tutorial minha linda.
    Super beijo!

    http://tarcilacolaco.blogspot.com

    ResponderExcluir
  6. Adoreii a dica :)
    Vou aproveitá-la
    bjoo!

    ResponderExcluir
  7. Adorei esse tutorial.
    Amei seu blog e já estou seguindo, se gostar segue o meu.
    Beijos...

    Unhas da Ju

    ResponderExcluir
  8. super dica depois vou por no meu um beijao!

    cherrycharming2.blogspot.com.br

    ResponderExcluir
  9. Oi!
    Caraca heim!
    Legal a bessa! Fica super profissional mesmO!!!
    rsrsrs
    Obrigada pela visitinha! Também sigo!
    beijocaa
    http://momentosdemodaebeleza.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. oooi , num falei ? kkkkkk
      de nada linda obrigada por seguir beijos

      Excluir
  10. Tem tag pra você lá no meu blog! Dá uma confeirida? bjjs ;*
    http://tonamodacomthay.blogspot.com.br/2013/02/video-sobre-o-carnaval.html

    ResponderExcluir
  11. Adorei a dica e o visual do blog :)

    beijos
    http://meninasnotaveis.blogspot.com.br/

    ResponderExcluir
  12. Noossa, de todos os blogs que já vi ese tutorial o seu é o melhor!
    Ótimo Post!
    Beijos da Nath
    Clica-->Mundo Fantástico Feminino-Participe do Sorteio!

    ResponderExcluir
    Respostas
    1. awwwwwwwwwwwwwwwwwwwwwwwwn obrigada ><
      Beijos

      Excluir
  13. Oláaaaaaaa gatissima !
    A do rei seu blog também ;)
    Obrigado por passar lá no meu, e claro volte sempre que puder !
    Estou seguindo também com toda certeza!
    Um beeeijo ;)

    http://seer-feminina.blogspot.com.br

    ResponderExcluir
  14. Ótimo tutorial,gostei
    http://dezapaixao.blogspot.com.br/

    ResponderExcluir
  15. Nossa, adorei o tuto! To querendo trocar meu layout e vou ver se faço um com slide.

    http://cindereladementira.blogspot.com.br/
    https://www.facebook.com/CinderelaDeMentira

    ResponderExcluir
  16. Adorei seu blog muito lindoo! aqui fiz meu blog com muito carinho, faça uma visitinha e segue lá. Estarei acompanhando sempre seu blog pois gostei muito http://tokcharm.blogspot.com.br/

    ResponderExcluir
  17. Oi, anjo. Tudo bem?
    Passando só pra avisar que tem tag pra você lá no meu blog.
    http://meupequenocamafeu.blogspot.com.br/2013/02/tag11perguntas.html
    Beijos!

    ResponderExcluir
  18. Oi linda, adorei o seu aqui!!! Visita o meu blog?
    maluquicedegarota.blogspot.com
    se quiser que eu divulgue o seu cantinho te convido a conhecer o PHOTO BY GIRL:
    http://maluquicedegarota.blogspot.com.br/p/photo-by-girl.html
    beijossss

    ResponderExcluir
  19. Muito interessante seu blog!!! gostei... e ja estou participando aqui ta!!!
    espero sua visita no meu tbm ...me segue tbm!!? eu tenho um blog de moda espero que vc goste tdos os dias eu coloco um look diferente! um bju de sua nova amiga

    http://fashionbloggerandreiajakeline.blogspot.com.es/

    ResponderExcluir
    Respostas
    1. obriiigada ><
      Vou visitar sim e vou seguir com certeza *-*

      Excluir
  20. Adorei tudo por aqui, e já estou seguindo, visita o meu e se gostar siga tb tá !! bjss
    http://www.mahmaquiagens.blogspot.com.br/

    ♥*´¨)*
    ¸.•*¸.•*´¨).•*¨)
    (¸.•´*(¸.•´*(.¸. • By Mah Dantas

    ResponderExcluir
  21. óla querida adorei seu post ,seu blog é lindo .Já estou seguindo aqui ,te convido a conhecer meu blog e seguir também .Tenha um ótimo dia beijoss !!
    http://www.barbien.blogspot.com

    ResponderExcluir
  22. Amei o Tutorial !!! Tava louca por um tutorial assim . Obrigadaaa *----*

    lilianebeauty.blogspot.com.br/

    Beijos

    ResponderExcluir

  23. Me ajudou bastante, mas eu queria saber tipo a largura do slide que você usou, a altura, a fonte.... e tals tudo sabe, pq eu consegui por e eu aprendi tbm mudar isso mas nao sei o que por no lugar, queria que você detalhasse.
    Beijoos http://glamourabrilho.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. vou responder lá no seu blog *-* beijos

      Excluir
  24. Adoreiii,ainda mais pra mim que to começando hehe bjs

    http://unhascaseirass.blogspot.com.br/

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

    ResponderExcluir
  26. oi amei o post vc me ajudou muito obg.
    convido vc a visitar meu blog
    http://vaidosaarosa.blogspot.com.br/
    seguindo retribui? bjjokas

    ResponderExcluir
  27. Olá,
    Eu amei o seu tutorial, mas queria que você me mandasse uma lista com nomes (ou códigos) dos slides.
    Desde já, obrigada *-*

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

    ResponderExcluir
  29. Adorei o post! Amei de verdade. Eu estava procurando um blog que explicasse direitinho e finalmente achei, gostei bastante também dos conteúdos do seu blog! Você ganhou mais uma seguidora!!!
    Se você puder de uma olhadinha lá no meu blog para ver como ficou o Slide !!!
    http://papogarotaa.blogspot.com.br/
    ♥♥♥♥♥♥♥♥
    Mau conheço seu blog e já me apaixonei por ele!
    Parabéns pelo blog e continue criativa que você vai longe !
    Beijo Flor! ♥

    ResponderExcluir
  30. gostei do post mas infelizmente no meu não deu certo :´(

    ResponderExcluir
  31. de vários que tendei coloca o seu foi o primeiro que deu certo parabéns

    ResponderExcluir
  32. Muito obrigada pelo post, ajudou muito mesmo!!! Só estou tentando tirar um barra na parte superior do slide que ultrapassa o tamanho do slide, por acaso tu sabe como resolver isso? Bjs e parabéns pelo blog!

    ResponderExcluir
  33. Gostei do teu blog, e agradeço muito por tudo, pois os códigos que copiei deram certo e só falta ajustar as animações. Muito obrigado mesmo. Ola se podes me ajudar agradeceria bastante. tenho dificuldade em criar menu no blog. Por favor me ajude. Tem aqui o meu email: flemyantonio88@gmail.com

    ResponderExcluir
  34. Entao gostei de mais, so que o meu a imagem ta ficando muito grande eu nao sei como diminuir, sera que pode me ajudar??? Beijooos!

    ResponderExcluir
  35. Entao gostei de mais, so que o meu a imagem ta ficando muito grande eu nao sei como diminuir, sera que pode me ajudar??? Beijooos!

    ResponderExcluir
  36. Valeu pela dica! Já estou usando no meu blog. Bjs

    ResponderExcluir
  37. Parabéns pelo artigo elaborado de maneira prática e genial. Obrigado pela ajuda! Deus continue de dando sabedoria e inteligência e saúde tanto física como espiritual.

    blog: http://christiannewsbrasil.blogspot.com

    ResponderExcluir
  38. Oii, não entendi como coloca as bolinhas.. ):

    ResponderExcluir

Ebaaaaaaaaaaaaaa ! vai comentar né ? u.u

- Comentários como '' oi flor amei seu blog to seguindo me segue?'' são ignorados !
- Comente alguma coisa sobre o post !
- não precisa pedir pra mim seguir, se eu ver que você realmente seguiu, eu vou seguir de volta, é só deixar o link do blog
- Não fale palavão por favor
- Criticas construtivas são sempre bem vindas para melhorar o blog

Obriigada, fico muito feliz com cada comentáro fofo de vocês ! Voltem sempre !

LinkWithin

Related Posts Plugin for WordPress, Blogger...