Como colocar slides no blog

by - quinta-feira, agosto 01, 2013

Oi gente!


Meu nome é Cibele Lima e sou do blog Viva verde, Viva bem! A Vivian me disse que muitas pessoas estão querendo saber como se faz para colocar slides no blog, como esses que tem qui...então, venho ensinar para vocês como colocar...é um pouco difícil, mas com atenção, cuidado e paciência você aprende...rs

Os slides ficarão como esse do blog.


Os créditos são do blog Cherry Bomb.

Então, vamos lá:

Para começar, acesse o painel do seu blog www.blogger.com.

Depois disso, vá na aba modelo e clique em html.

Aí, vai aparecer uma tela cheia de códigos...clique dentro dessa tela e aperte control + f e procure por 

</head>

Depois disso, abaixo disso cole esse código:

<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/AVvXsEhJOCDQJC2nlbHoE0T1RBJ4batwcmXfv2YPaqWVTFl84Ua2LMe-1ibWSU2CgQ3o90326botlz4jutn9cwI3p9YkPaytBjv9Kqg6z0jIKzCM9AwzITtX-T8_z1y7GwD6dcYaPQkWB2tYPeXi/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>

Agora salve. Não mude nada no código!!! tome bastante cuidado ao fazer isso para não atrapalhar nada!

Agora para os slides aparecerem, vá em layout e clique em adicionar novo gadget:

Depois clique em html javascript e cole o código abaixo dentro da caixa que vai 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>


Agora será necessário fazer as modificações. 

Onde tem "LINK_DO_SLIDE_1" coloque o link da sua postagem que quer que apareça no  slide. Entre as aspas.
Onde tem  "URL_DA_IMAGEM_1"coloque o link da imagem que quer que apareça no slide. Entre as aspas.
Onde tem "LEGENDA DA IMAGEM 1" . coloque o nome que quer que apareça no slide, o título da postagem, por exemplo

A imagem deve ter o tamanho 640 x 315 para caber direitinho dentro do slide. Então você deve salvar a imagem no seu computador e formatar o tamanho em um programa de imagens...

Antes de colocar a imagem, para ter o link dela, você pode hospedar a imagem desejada aqui

https://www.tumblr.com/login?redirect_to=%2Fthemes%2Fupload_static_file

é preciso criar um login para utilizar. 

O site vai gerar o link da imagem e aí você copia e cola no espaço que indiquei, entre as aspas.

Ou então use outro site de hospedar que conheça ou que use com frequência.

Depois de ter feito isso nos 4 lugares, salve o gadget. E depois posicione abaixo do menu do seu blog. Aí é só arrastar o gadget para a posição desejada e salvar alterações depois!!!

Prontinho!

Qualquer dúvida podem falar comigo!

cibelelima1982@gmail.com
www.vivaverdevivabem.blogspot.com

Beijos

Cibele 

Já agradeço a amiga Cibele pela gentileza de dividir seus conhecimentos conosco,espero que tenham gostado , bjs fiquem com Deus!!!!

Share
Tweet
Pin
Marcadores :

Confira também

41 comments

  1. Camila Lima1 de agosto de 2013 às 10:13

    Amei a dica :)

    Beijos
    http://segredosdacahlima.blogspot.com.br/

    ResponderExcluir
  2. Cibele Lima1 de agosto de 2013 às 10:18

    Amiga, ficou ótimo, espero que ajude as meninas! bjo

    ResponderExcluir
  3. Unknown1 de agosto de 2013 às 12:17

    Muito bom esse tutorial. A Cibele realmente é uma querida e sempre disposta a ajudar. Eu gostei, já tenho um painel no meu blogger, mas não fui eu que coloquei, então é sempre bom saber como se coloca.

    Confira a resenha do Creme de Tratamento-12 Ativos em 1-NOVEX que ajudou a recuperar meu cabelo =)

    Beijinhos de luz =***

    Cllara Maranhão ʚɞ
    http://cllaramaranhao.blogspot.com.br

    ResponderExcluir
  4. Rose1 de agosto de 2013 às 13:28

    Excelente explicação, adorei, bjs

    http://dicascoisasdemulher.blogspot.com

    ResponderExcluir
  5. Unknown1 de agosto de 2013 às 14:03

    Eu uso slides no meu blog,acho lindo :3

    http://dienyladyy.blogspot.com.br/

    ResponderExcluir
  6. Unknown1 de agosto de 2013 às 14:16

    Meninas eu achei ótima a dica, mas realmente é um pouco complicado, o layout do meu blog é para mim uma sopa de letrinhas gregas, Cibele Lima Help-me!!! Rsss...

    BjokaS
    Leca
    Comunidade da Beleza

    ResponderExcluir
  7. Lulu on the sky1 de agosto de 2013 às 14:23

    Adorei o tutorial.
    Big Beijos
    Lulu on the sky

    ResponderExcluir
  8. Unknown1 de agosto de 2013 às 14:31

    Bem interessante esse assunto, pois acho legar poder ajudar outras pessoas que não sabem como fazer esse tipo trabalho no blog, amei!!
    Beijos!!
    http://belezaemsintonia.com/

    ResponderExcluir
  9. Lynn1 de agosto de 2013 às 15:33

    legal! vou tentar.. tentar kkkk n sei mexer mto bem nessas coisas
    beijos
    http://www.lynnkumoruna.com.br/

    ResponderExcluir
  10. Unknown1 de agosto de 2013 às 15:53

    Nossa.! Que legal ... sempre quis saber como fazer isso :] Vou tentar agora mesmo :]

    Háh Tá tendo um sorteio muito legal lá no blog. Se puder passa lá ... vou ficar te esperando :]
    http://soubibliofila.blogspot.com.br/2013/07/promocao-las-vegas.html

    ResponderExcluir
  11. Unknown1 de agosto de 2013 às 16:28

    Adorei!
    Muito boa a dica!
    Beijos!
    islary34.blogspot.com

    ResponderExcluir
  12. Janaína Santos1 de agosto de 2013 às 17:46

    Gostei muito da dica!
    Bjs
    janamakesesmaltesecia.blogspot.com.br

    ResponderExcluir
  13. sabrina1 de agosto de 2013 às 18:55

    Adorei mais não consegui colocar,,,muito complicado
    Beijinhos com carinho..
    http://sabrinielo.blogspot.com/
    https://www.facebook.com/pages/Sempre-bela/194374084049206

    ResponderExcluir
  14. Unknown1 de agosto de 2013 às 21:07

    Que legal, acompanho seu blog! Hahah

    Blog: www.kaahmenezes.com
    Fã page: www.facebook.com/kaahmenezes1

    ResponderExcluir
  15. Vaidade e Auto Estima2 de agosto de 2013 às 00:21

    Oi amiga, tava com saudades do seu blog...
    Pois então, é uma excelente dica viu, eu no começo do blog passei um aperreio kkkkk

    *Vem participar do SORTEIO DE UM KIT DE MAQUIAGEM lá no meu blog, vc e suas leitoras estão convidadas... serão mt bem vindas!
    www.vaidadeeautoestima.com

    Bjs

    ResponderExcluir
  16. Toninha Borges2 de agosto de 2013 às 10:13

    Vai ajudar a muita gente.
    Jóia.
    Bju

    ResponderExcluir
  17. Anônimo2 de agosto de 2013 às 14:02

    Olá flor! Que ótimo post eim!
    Muito útil, adorei!
    Te espero lá no blog!
    Bjkinhas...

    http://artedepintarunhas.blogspot.com.br/

    ResponderExcluir
  18. Jô Neroni28 de agosto de 2013 às 16:36

    Eu queria colocar tdas as fotos das receitas do meu blog na apresentação no slides...

    ResponderExcluir
  19. marco28 de janeiro de 2014 às 19:08

    oi eu ti amo muito obrigado ficou uma beleza :*

    ResponderExcluir
  20. Karina Silva31 de janeiro de 2014 às 12:55

    Que blog lindo!
    Muito interessante!

    Já estou inscrita, segui-me também!
    Que tal afiliar-se?
    http://contatudosobrekarinasilva.blogspot.com.br/

    ResponderExcluir
  21. NSN9 de fevereiro de 2014 às 15:14

    Infelizmente no meu não deu nada, apenas fica rodando aqui mais nenhuma imagem

    ResponderExcluir
  22. Unknown20 de fevereiro de 2014 às 20:29

    adorei o blog e as dicas! ;) Um abraço de www.cantomaebebe.com.br

    ResponderExcluir
  23. NSN1 de março de 2014 às 13:42

    Conseguir obrigada.

    ResponderExcluir
  24. Unknown25 de março de 2014 às 02:30

    oi, eu fiz tudo direitinho mais quando vou ver as imagem no blog não vejo nada so o quadradinho espero a sua resposta ta http://flaviamariavieira.blogspot.com.br/

    ResponderExcluir
  25. Teka Almeida3 de maio de 2014 às 05:21

    Obrigada amg ! me ajudou muito, faz uma visita la no meu blog: http://estheralmeidamakeup.blogspot.com.br/ beijos ;*

    ResponderExcluir
  26. AMVALE-ASSOCIAÇÃO DE MÚSICOS DO VALE DO ARINOS11 de maio de 2014 às 05:43

    Então, sobre hospedar a imagem para o slide eu sugiro o seguinte: salve a imagem de seu PC como rascunho no seu blog daí copia apenas o link (dentro do html gerado) e pronto. Hospede a foto ou imagem em seu próprio blog. Abs

    ResponderExcluir
  27. Anônimo11 de maio de 2014 às 05:44

    Então, sobre hospedar a imagem para o slide eu sugiro o seguinte: salve a imagem de seu PC como rascunho no seu blog daí copia apenas o link (dentro do html gerado) e pronto. Hospede a foto ou imagem em seu próprio blog. Abs

    ResponderExcluir
  28. Cristininha!28 de maio de 2014 às 21:02

    Oie!Gostei muito do seu blog é super legal!Visitem o meu: http://cris-tinarabelo.blogspot.com.br/

    ResponderExcluir
  29. LETÍCIA K. OLIVEIRA14 de junho de 2014 às 14:00

    Adorei o tutorial, me ajudou muito, obrigada *-*
    http://www.leticiakoliveira.com/

    ResponderExcluir
  30. Renata25 de junho de 2014 às 22:52

    Muito bom o post!
    Amei seu blog flor!
    Vem me visitar ....
    Bjkas
    http://www.renataarpini.com/

    ResponderExcluir
  31. Gaby Cortez14 de julho de 2014 às 16:52

    Olá :)
    Amei essa dica *--* Obrigada!
    bjus...

    http://my-stories-wonderful-books.blogspot.com.br/

    ResponderExcluir
  32. Unknown17 de julho de 2014 às 21:40

    fiz tdo direitinho mas só fica um quadrado sem aparecer imagem nenhuma dentro
    oq aconteceu de errado??

    ResponderExcluir
    Respostas
    1. Vivian Carvalho18 de julho de 2014 às 07:45

      Evellyn ,Provavelmente você separou alguma palavra no html, aconteceu comigo quando fui colocar no meu outro blog, aí refiz de novo e deu certo, tente refazer de novo o passo a passo para ver se dá certo.Qualquer outra dúvida pode perguntar que respondo.Bjs

      Excluir
  33. Unknown24 de julho de 2014 às 15:11

    Deu super certo no meu blog ! Amei a dica , obrigado :)

    ResponderExcluir
  34. Maria Rodrigues31 de julho de 2014 às 09:51

    Fiz e deu super certo. Valeu a dica!
    Bjos!!!!

    ResponderExcluir
  35. Thammy Souza2 de setembro de 2014 às 12:58

    Ameeei a dicaaaaa

    ResponderExcluir
  36. Patty12 de setembro de 2014 às 22:23

    Pelo que eu entendi eu vou ter que a cada postagem trocar os links das imagens. Esse código não é automático o aparecimento das postagens.? Por favor tire minha dúvida

    ResponderExcluir
    Respostas
    1. Vivian Carvalho12 de setembro de 2014 às 23:30

      Sim terá que trocar os links a cada postagem , assim como as fotos e título do post.

      Excluir
  37. Unknown15 de setembro de 2014 às 23:12

    Muito útil, me ajudou muito!

    ResponderExcluir
  38. Inklys Araújo4 de outubro de 2014 às 12:34

    Esse site gera automaticamente um slide pra você em poucos minutos http://yoututorialonline.com.br/como-colocar-um-slide-ou-galeria-de-fotos-no-blog/

    ResponderExcluir
  39. ROGÉRIO SILVA MAIS5 de maio de 2017 às 18:49

    Muito bom

    ResponderExcluir

Olá! Sejam bem vindos ao nosso blog! Deixe seu comentário, dúvidas, perguntas, sugestões que responderemos a cada um de vocês! obrigada