título

Papo de Blogueira: Slide no Blog

16/04/2013


O começo na blogosfera é muito difícil: você não conhece o território, não sabe as manhas e não tem a mínima ideia de "como o jogo funciona". O fato é que, com o passar do tempo, você vai adquirindo experiência e seu blog vai evoluindo. Uma coisa que aprendi, nesses três anos em contato com a blogosfera, é que um bom conteúdo é a chave para o sucesso, mas você tem que saber como apresentá-lo e foi assim que começou a minha busca pelo tutorial do slide. 

O slide serve como uma "divulgação de posts" dentro do seu próprio blog. Com o tempo, percebi que ir passando, página por página, é muito cansativo. Se você coloca um slide, com as postagens "em destaque no momento" as pessoas que quiserem saber sobre o assunto não terão que fuçar o blog inteiro atrás do conteúdo. É uma boa dica para aumentar as visualização dentro do próprio blog, divulgar os posts e, é claro, manter tudo organizado. Bora conferir o tutorial? 


Antes, apenas uma constatação: HTML não é bicho de sete cabeças! Prestando atenção e tomando cuidado você consegue o resultado esperado. Fique ligada!

Primeira coisa: 
Vá até Layout > Adicionar um Gadget > HTML/Javascript e cole este 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 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>
Depois é só salvar e colocar onde você deseja que o slide apareça (mudar o gadget de lugar). Parte fácil devidamente pronta, agora vamos personalizar o seu slide:

Abra o painel do seu blog, vá até Modelo > Editar HTML. Procure (CTRL+F) por </head> e cole este código logo 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_BOLINHAS") 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>
O que está em negrito são as partes que podem ser alteradas. Por exemplo: a fonte da legenda, o tamanho do slide e estes detalhes. Você irá colocar o URL das imagens de navegação (setas e bolinhas que mudam de imagem no slide) onde está escrito: URL_IMG_BOLINHAS OU SETA. Vá visualizando e alterando valores de acordo com a necessidade. Assim que estiver tudo ok, salve e pronto!  

Esta é a minha versão adaptada do tutorial postado pela Liah, no blog Cherry Bomb (um dos melhores quando o assunto é HTML e códigos). Eu faço dessa maneira pois acho mais fácil. Você pode ir visualizando enquanto edita, o que torna tudo mais simples. Dica: Edite sempre as imagens antes de colocar no gadget do slide e hospede em algum site (eu uso o Tinypic), assim você pode fazer a montagem com as dimensões do seu slide e evitar problemas. 




Esse post foi um pedido da Amanda. Espero ter ajudado ao invés de complicar, como sempre faço. Se você tiver qualquer dúvida ou tiver algum problema com o tutorial, só deixar um comentário que ficarei super feliz e farei o máximo para tentar ajudar. Tirante o código, o restante foi feito por mim (até as bolinhas/setas). Eaí, curtiu o tutorial? 

35 comentários:

  1. Ahhh super obrigada! Vc é um amor!
    Depois, eu vou tentar fazer! =D
    Beijos!
    superamandablog.blogspot.com

    ResponderExcluir
    Respostas
    1. Disponha, querida :3
      Tente e depois me avise, vou adorar ver o resultado. haha

      Beijos, beijos <3

      Excluir
  2. Estou a muito tempo tentando achar um tutorial ,e o seu é tudo o que precisava
    adorei querida , vou tentar mexer ainda hoje , mesmo sendo um desastre com html ;(
    www.facebook.com/Derepentenaotemidade
    um grande beijo
    Adorei o blog <3
    http://www.derepentenaotemidade.com/

    ResponderExcluir
    Respostas
    1. Que bom que você gostou!!! Pra mim também foi bem difícil encontrar, na hora de aprender. hahah Qualquer coisa é só pedir ajuda, ok?

      Fico muitíssimo feliz que tenha gostado do blog *-*
      Beijos, beijos <33

      Excluir
  3. Adorei o tutorial!!
    Em breve quero colocar os slides no blog :)

    Tecido_Doce

    ResponderExcluir
    Respostas
    1. Faça isso, faça isso!! Fico feliz que tenha gostado.. Qualquer dúvida, estamos aí :p

      Beijos, beijos

      Excluir
  4. deu certo mas como faço pra por as postagens no slide?

    ResponderExcluir
    Respostas
    1. Que bom que deu certo!!! Para "colocar as postagens" no slide, você só precisa substituir as coisas no primeiro código, por exemplo:

      LINK DO SLIDE - É o link que leva até a postagem; o link da postagem.
      URL DA IMAGEM - É o URL da imagem que você hospedou.
      LEGENDA DA IMAGEM - É a legenda que você quer que apareça (deixe em branco se não quiser legenda).

      Se você quiser "adicionar" mais de 4 imagens/links ao seu slide, basta ir copiando e colando os códigos e ir substituindo o URL, o LINK e a LEGENDA.

      Espero ter ajudado! haha
      Beijos, beijos

      Excluir
  5. Amei o blog tudo perfeito Design,Conteudo ♥.

    Adorei as Dicas e concordo Slide é essencial Hoje em Dia, e todos Blogs deveriam colocar eles alem de dar uma aparecia boa ao blog ajuda a divulgar os Post.

    Beijos - Nicolas - Nick F.

    http://www.thepurpleblood.com/
    https://www.facebook.com/thepurpleblood

    ResponderExcluir
    Respostas
    1. Awnt, que bom que você curtiu o blog *-* <3

      Concordo totalmente, todo blog deveria ter ao menos um slide. Deixa as postagens mais "visíveis" e é mais fácil de se identificar do que através de tags. hahah

      Beijos, beijos

      Excluir
  6. Ótimo tutorial.
    Com certeza os slides são uma ótima forma de divulgação de posts.
    Depois vou colocar um no meu blog, só tenho que escolher qual o melhor lugar.
    Beijos ♥
    sweetasodile.blogspot.com

    ResponderExcluir
    Respostas
    1. Que bom que você gostou :)
      Sim, escolher o lugar é muito importante!! Eu, particularmente, prefiro ou no final do blog ou logo abaixo do cabeçalho, fica mais visível.

      Beijos, beijos <33

      Excluir
  7. Adorei o tutorial! Mas NUNCA slides no meu blog dão certo! Ficam todos embaralhados , imagem fica em cima do texto,e vira uma bagunça e eu nem tento mais! Mas,vou pensar se coloco esse,tomara que fique bom!
    Beijos!

    aneldelacinho.blogspot.com.br

    ResponderExcluir
    Respostas
    1. A primeira vez que eu testei o tutorial desse slide, deu problema... As imagens ficavam se embaralhando e tals. Mas eu conferi o código e resolvi o problema. Quanto á legendas: eu evito. Escrevo o que tem que ser escrito na imagem, direto no photoshop, pra evitar dor de cabeça depois. hahah

      Boa sorte, tomara que dê certo!
      Beijos, beijos

      Excluir
  8. Eu queria saber se tem algum tutorial ensinando como editar a imagem para ficar com as dimensões do slide sem haver distorção =/ Iria me ajudar muito, beijos!

    www.centraldaleiturablog.blogspot.com

    ResponderExcluir
    Respostas
    1. Só se você estiver disposta a cortar a imagem, Vanessa...
      Você abre a foto que quer que fique dentro do slide, vá em image > image size (confere se o resample image e constrain proportions estão marcados) e coloca o tamanho que você quer.
      Provavelmente ela não vai ficar do tamanho do slide, daí você cria um documento com o tamanho da foto do slide e cola ela lá.

      Parece mais difícil, mas é o que eu sempre faço..
      Se você precisar de mais ajuda, me procura no facebook ou pelo e-mail do blog. Posso te dar um help mais detalho. hahah

      Beijos, beijos

      Excluir
  9. como eu amumento a largura e a altura da imagem

    ResponderExcluir
    Respostas
    1. Hey Thiago,

      Se você está falando de aumentar a largura e a altura do slide é só alterar os valores nesta parte do código: width:640px !important; /*largura do slide*/height:300px !important; /*Altura do slide*/

      Agora, se você está falando em aumenta-las no Photoshop.. É só abrir a foto que deseja editar, ir em image (imagem) > image size (tamanho da imagem)e alterar os valores ali. :)

      Espero ter ajudado,
      beijos beijos

      Excluir
  10. deu tudo certo, só não mostra as imagens, rsrsrs, tem o devido espaço no devido local e até a legenda aparece, mas as imagens que é bom, nada.

    ResponderExcluir
    Respostas
    1. Nossa, que estranho! Você já viu se em outro computador/navegador aparece?

      Excluir
    2. ah, agora apareceu (depois de dias), obrigado!

      Excluir
    3. Que bom que deu certo! De nada, ás ordens :) haha

      Excluir
  11. Oi, eu gostaria de saber se tem como colocar a legenda na parte de baixo do slide..?

    ResponderExcluir
    Respostas
    1. Hey Bruno! Creio que tenha como colocar sim, mas eu não sei como. Vou pesquisar ver se encontro como :)

      Excluir
    2. Muito Obrigado, bom eu consegui colocar...

      Excluir
  12. ADOREI *_* Obrigada você salvou o dia

    ResponderExcluir
  13. como faço pra acrescentar o slide em um post?

    ResponderExcluir
    Respostas
    1. Vish, sei não. Mas vou tentar encontrar um tutorial. :)

      Excluir
  14. Deu erro, infelizmente. Mas já encontrei noutro blog e funcionou! muito obrigado!

    ResponderExcluir
    Respostas
    1. Que triste. Mas que bom que você encontrou a solução. Disponha :)

      Excluir
  15. Serio, valeu , me ajudou muito!
    PS: também sou gaúcho e.e

    livrode-sonhos.blogspot.com.br

    ResponderExcluir
    Respostas
    1. Que bommm poder te ajudar! :D
      Sério? De onde?

      Beijos, beijos.

      Excluir

Related Posts Plugin for WordPress, Blogger...