Tutorial: Como colocar Slide no Blogger

06:21


Ola meus amores, hoje eu vim compartilhar com vocês essa super dica, que na realidade sempre quis colocar no meu blog, que é o slide com imagens com 4 posts relacionados. Acredito que tenham outros melhores, mas hoje vou compartilhar esse bem simples e fácil.

Bom, antes de mais nada, tenha o link dos 4 posts que você deseja colocar no slide e uma imagem representando cada link. A imagens podem ser "redimensionadas" pelo Photoscape ou pelo "Paint", nas seguintes dimensões: 640 x 300 (largura x altura).

Feito isso, hospede as imagens e obtenham o link, eu geralmente uso esse site aqui TinyPic (ele vai te da 4 opções de link, copie a opção:  Link direto para layouts


Pronto, agora reserve  os links e vamos para os códigos:

  •   Vá em Modelo no seu Blog, e clique em Editar HTML. Aperte Ctrl+F, e procure pela tag </head> e cole esse código abaixo.


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


  • Clique em Visualizar Modelo, e confira se esta tudo em ordem, se estiver normal sem nenhum erro aparentemente na tela, clique em salvar.
  • Agora vamos adcionar o Widget no Blog. Para o slide aparecer basta colar este codigo em um novo Widget. Vá em Layout no seu blog, clique em "adicionar um gadget" e procure pelo gadget "HTML/JavaScript ". 


Dentro dele cole esse código.


<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 IMAGE M 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:
LINK_DO_SLIDE : pelo link do post
URL_DA_IMAGEM: pela url da imagem hospedada
LEGENDA DA IMAGEM: pelo Titulo que aparecera.



  • Logo abaixo terá as imagens para serem utilizadas no Slide. Escolha a imagem da seta, Copia a URL e cole onde tem: ("URL_IMG_SETA")
  • Depois escolha a imagem da bolinha, copie a URL da imagem e substitua onde tem: ("URL_IMG_BULLETS") 
  • Lembrando que tem que ser dentro das "Aspas" 


Imagens das Setas:




Imagens das bolinhas






Espero ter ajudado!!!
Se tiver alguma duvida, deixe nos comentários, que responderei a todos!




Créditos: Cantinho do Ronni

Você pode gostar também

24 comentários

  1. Haaa...Que bacana,acabei de "reformar" meu blog,e não consegui colocar o slide,mas vou tentar,obrigada pela dica...Beijos ♥

    Blog: http://garotarudeduas.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. Oie Lindona!!! Saudades de vocês la do grupo do whats rs
      Tenta sim, espero que funcione, no meu funcionou *-*
      Qualquer duvida é só chamar!!!
      Bjus

      Excluir
  2. Ola! Seguindo, retribui? https://www.facebook.com/LovelyStyleBlog http://alovelystyle.blogspot.co.uk/ Obrigada!

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

    ResponderExcluir
  4. Olá! Estou a tentar fazer o slide, vamos lá ver se consigo (: Obrigada pelo tutorial era mesmo isto que andava à procura! Pode seguir de volta? :)

    ResponderExcluir
  5. Obg pelo tutorial.Amei e já estou usando.bjooo

    ResponderExcluir
    Respostas
    1. que bom que esta sendo ultil!!! Eu que agradeço... estarei sempre trazendo mais novidades para voces ;)

      Excluir
  6. Oi Re!
    Coloquei o slide! Muito, muito muito obrigada! Fazia tempo que eu queria e não conseguia >> www.vivendovivi.blogspot.com.br
    Só tenho uma pergunta, sei que o post é velho, mas talvez vc ainda responda: a faixa preta que fica com os títulos, eu gostaria de removê-la. Qual parte do cod devo apagar?
    Bjss

    ResponderExcluir
    Respostas
    1. Oii vivi,
      na parte onde tem assim:

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



      na opcao onde tem:

      background:#000;

      mude para

      background: transparent;


      Bjus!

      Excluir
  7. Olá, querida. Parabéns pelos seus posts, são excelentes! Tenho 2 dúvidas:
    1) Posso carregar as fotos pelo Flickr? (https://www.flickr.com/photos/143961873@N08/29058706832/)
    2) Posso carregar mais de 4 fotos? Qual o limite de fotos?
    Beijos,
    Su

    ResponderExcluir
    Respostas
    1. Você pode sim, só é você aumentar o número de postagens que você colocou no layout, por exemplo lá ela só deixou para 4 postagens mais se você colocar dentro do código mais coisas assim

      src="URL_DA_IMAGEM_3" title="LEGENDA DA IMAGEM 3"

      e só ir adicionando mais lá dentro você consegue ter quantas você quiser e adicionando o conteúdo dentro

      obs: o codigo não está completo pois não pode postar codigo nos comentarios

      Excluir
  8. Boa Tarde Rê, tudo bem. Uma dúvida, é possível deixar o slide somente na página home? Se sim, como faço?
    Beijos!

    ResponderExcluir
  9. Olá...muito boa sua dica, uma pergunta!? se eu querer colocar 6 slide,em vez de *4*, tem como? se sim qual parte devo copiar.....agradeço desde já!

    ResponderExcluir
  10. eu só não consigo é centralizar ele no blogger.

    ResponderExcluir
  11. se tiver um jeitinho de centralizar, mande ai, uma resposta, ok.

    ResponderExcluir
  12. Muito boa a postagem meu blog funciono perfeitamente parabéns !

    ResponderExcluir
  13. Sabe me dizer como coloco a legenda em baixo?
    Obrigado pelo Post!!

    ResponderExcluir
  14. Muito Obrigado,foi a unico lugar,que consegui.vlw

    ResponderExcluir
  15. Ola renata o slide deu certo no meu blogger. O problema é que quando tento clicar na noticias em destaque no mesmo ele não direcionara para a noticias especifica
    Robert Lopes - Barras/PI

    ResponderExcluir
  16. Bom dia Renata. Se eu quiser colocar dois slider diferentes la mesma página é possível? Seriam formatos diferentes.

    ResponderExcluir
  17. Dica perfeita! Funcionou lindamente no meu site. Obrigada!

    ResponderExcluir
  18. Queria enlarguecer esse slide, mas não tô conseguindo mesmo mexendo no px

    ResponderExcluir

Mande seu comentário, criticas, elogios ou sugestões.
Responderei o mais rápido possivel.
Um forte abraço a todos vocês!

Contrate o Blog

Meu blog faz parte do Modatrade


Renata Massa
Renata Massa
Modatrade | A vitrine dos blogs de moda
Modatrade | A vitrine dos blogs de moda