28/06/2013

MDT #5: Legenda nas imagens do Blog

"Não importam seus defeitos, todos tem um também." - Ariana Grande.
Olá queridos leitores! Bom, essa é a última postagem da Maratona de Tutoriais do Blog. Deixei esse tutorial por último já que é totalmente exclusivo e criado por mim. Amanhã eu já irei postar o tão esperado Layout Free, ele já está pronto há algum tempo, mas queria deixá-lo para esse fim de semana, para fecharmos essa semana de férias com chave de ouro, concordam?
Bom, o tutorial é super fácil, você só precisa de um pouco de atenção para poder aplicá-lo em seu blog. Vamos lá?
No Painel do Blog - Clique no nome do seu Blog - Modelo - Editar HTML e pesquise por: ]]></b:skin> Quando achar, cole o código abaixo antes desse, fazendo as devidas alterações: 
.imagem  {
margin-top:0px; /* margem do topo */
}
.imagem img  {
align:center; /* alinhamento */
margin-top:0px; /*margem do topo */
}
.imagem .legenda  {
-webkit-transition: all 1.0s ease-out;
-moz-transition: all 2.5s ease-out;
width:500px; /* largura da área da legenda */
height:20px; /* altura da área da legenda, não precisa mexer */
margin-top:-23px; /* margem do topo, mexa se precisar */
margin-left: 13px; /* margem da esquerda, mexa se precisar */
color:#COR; /* cor da letra */
background: #COR; /* cor do fundo */
opacity: 0.60; /* não mexa */
text-align: center;
}
.imagem:hover .legenda  {
background: #COR; /* cor do fundo hover */
opacity: 0.99; /* não mexa */
-webkit-transition: all 1.0s ease-out;
-moz-transition: all 2.5s ease-out;
}
Depois de aplicar o código de personalização da legenda, você precisa aplicá-lo nas imagens do Blog, para isso, na área onde escrevemos o conteúdo das postagens, mude para a aba HTML (lado superior esquerdo), e cole o código abaixo, fazendo as devidas Alterações:
<div class="imagem">
<div style="text-align: center;">
<img src="URLDAIMAGEM" /></div>
<div class="legenda">FRASE</div></div>
Caso o código dê erro, acrescente outra </div> no final dele, certo? Se usá-lo uma vez terá que aplicá-lo em todos os Layouts do Blog, mesmo que não vá aplica-lo mas em futuras imagens, para que não dê erro nas que você já tinha aplicado, entende?
Espero que tenham gostado, repito: Esse tutorial é EXCLUSIVO, foi criado por mim, então por favor, se usarem deem os créditos, ok? Bom, por hoje é só mesmo, aguardem o Layout Free amanhã! Até mais õ/

29 comentários:

  1. Eu sou Arianator, eu estou tentando não lê; ou vê coisas da Ariana.
    Estou muito triste com a Infecção pulmonar, e com a Infecção no Crânio dela, mas amei o tutorial.
    Talvez use depois.
    Omg HTML | Blog Novo

    ResponderExcluir
    Respostas
    1. Uma pena, também sou Arianator, mas avaliando os fatos, acho que a Ari já está se recuperando :) Obrigado ^^

      Excluir
  2. Eu estava procurando por esse tutorial esses dias. Fica muito bonito e acho que vou colocar :3 ficou bem explicado também. ^^
    Quando entrei na blogosfera, tentei aplicar esse mas não consegui.
    Se bem que eu era bem tansa na época... KKK
    Beijos

    ResponderExcluir
    Respostas
    1. Eu criei o tutorial pra imagens das postagens, acho que é algo novo... Pelo menos nunca vi nenhum Blog utilizando :) Beijo :*

      Excluir
  3. Que lindo ♥
    O efeito é bem original u.u

    #Dark_Paradise.

    ResponderExcluir
  4. Fica tão fofo essa legendinha! Eu não coloco porque eu mal coloco descrição nas fotos, mas fica muito fofo!

    Passa lá! ♡ www.24balloons.blogspot.com

    ResponderExcluir
  5. Oi Alex! Sei que não fui a única que pediu o tutorial mas ainda assim, obrigada. O efeito é lindo e com certeza usarei no próximo layout.

    Beijos ♡
    World Cutest | Twitter do blog | Twitter pessoal

    ResponderExcluir
  6. Nunca tinha visto esse tutorial o-o
    Gostei.
    pequeena-princesa.blogspot.com.br/

    ResponderExcluir
  7. Adorei o tutorial!! Quanto tempo não vinha aqui, o blog ta lindo, hein? Parabéns <3
    viverserfeliz-renata.blogspot.com

    ResponderExcluir
    Respostas
    1. Obrigado Plum :) Saudades do Famenine Place, passando lá JÁ! KKK

      Excluir
  8. É um efeito lindo, mas dá preguiça por que terei que aplicar em todos os layouts... ><' kkk Mas é muito lindo mesmo! :3
    Bjo, Sel ;*

    Jovens Gordinhas
    Unicórnio com Bigode

    ResponderExcluir
  9. Alex, o código não está funcionando aqui. Já tentei por a tag div novamente mas não apareceu. Você tem ideia do que pode ser?

    ResponderExcluir
    Respostas
    1. Anna, perdoe-me, havia um erro no código, mas já concertei *O*

      Excluir
  10. Acho legal essas legendas nas imagens, mas eu tenho preguiça em pensar em algo para escrever nelas KKKKKK' Gostei daqui moço, será que você não estaria interessado em virar um afiliado do Iced Tea? Espero sua resposta o3o

    Kissu :*

    ResponderExcluir
  11. Essa legenda fica muito fofinha! *--*
    Peraí, você disse semana de férias? Nem sei a cor disto! Se eu tiver férias vai ser só pela 2º ou terceira semana do mês que vem! #Triste

    Kisses <3
    Meu jardim Secreto (ou clique no perfil)

    ResponderExcluir
    Respostas
    1. HEHE, Na verdade na minha escola (federal) foi apenas um recesso sabe? Voltamos amanhã (segunda) já :S
      Obrigado *O*

      Excluir
  12. to curiosa pra ver o layout! e que tuto legal você anda trazendo só tutoriais tops~
    bjos
    rockmoreworld.blogspot.com.br

    ResponderExcluir
  13. Ficou muito lindinha a legenda, mas já tentei colocar e ficar arrumando isso me perturba a paciência. Mesmo assim, o tutorial é bem útil e fofo, ainda mais em blogs "kawaii".

    Six Seconds

    ResponderExcluir
  14. Que tutorial legal, gostei muito :3
    cr4zy-world.blogspot.com

    ResponderExcluir
  15. tutorial otimo,blog lindo o seu,muito criativo,mais um seguidor no blog viu :3

    ResponderExcluir