quinta-feira, 1 de agosto de 2013

Como colocar slides no blog

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

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


é 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

Beijos

Cibele 

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

Aproveite e leia mais os artigos sobre...

43 comentários:

  1. Amei a dica :)

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

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

    ResponderExcluir
  3. 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. Excelente explicação, adorei, bjs

    http://dicascoisasdemulher.blogspot.com

    ResponderExcluir
  5. Eu uso slides no meu blog,acho lindo :3

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

    ResponderExcluir
  6. 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. 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
  8. legal! vou tentar.. tentar kkkk n sei mexer mto bem nessas coisas
    beijos
    http://www.lynnkumoruna.com.br/

    ResponderExcluir
  9. 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
  10. Adorei!
    Muito boa a dica!
    Beijos!
    islary34.blogspot.com

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

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

    ResponderExcluir
  13. Que legal, acompanho seu blog! Hahah

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

    ResponderExcluir
  14. 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
  15. Olá flor! Que ótimo post eim!
    Muito útil, adorei!
    Te espero lá no blog!
    Bjkinhas...

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

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

    ResponderExcluir
  17. oi eu ti amo muito obrigado ficou uma beleza :*

    ResponderExcluir
  18. Que blog lindo!
    Muito interessante!

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

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

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

    ResponderExcluir
  21. 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
  22. Obrigada amg ! me ajudou muito, faz uma visita la no meu blog: http://estheralmeidamakeup.blogspot.com.br/ beijos ;*

    ResponderExcluir
  23. 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
  24. 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
  25. Oie!Gostei muito do seu blog é super legal!Visitem o meu: http://cris-tinarabelo.blogspot.com.br/

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

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

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

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

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

    ResponderExcluir
    Respostas
    1. 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
  30. Deu super certo no meu blog ! Amei a dica , obrigado :)

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

    ResponderExcluir
  32. 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. Sim terá que trocar os links a cada postagem , assim como as fotos e título do post.

      Excluir
  33. 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

Sejam bem vindas e obrigada por comentar, sempre digo que temos muito o que aprender umas com as outras.Por favor deixem o link do seu blog ou comunidade para que eu possa retribuir a visita.Beijos!!!!!