11/02/2017

Tutorial: Legenda na imagem do blog ²

||

Olá meus bunnie's, lembram que prometi trazer um segundo modo de por legenda nas imagens das postagens? Na verdade elas não são exatamente diferente, o outro modo só possuía menos códigos, mas apesar de ser mais pratico sempre gostei desse segundo modo. Esse também é bem simples e fácil de aplicar. Deixarei os créditos no final da postagem
.
Se quiser saber como é o primeiro modo: acesse aqui.

.::Exemplo::.


Você pode personalizar a legenda colocando efeito em hover.


1) Navege até o HTML do seu blog e procure por ]]></b:skin>, acima dele cole: 

.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;
}

Salve!

2) Vá até a área das postagens. Abra uma nova postagem e faça o upload (envio) da imagem normalmente. Dentro da postagem cole:

<div class="imagem">
<div style="text-align: center;">
<img src="URLDAIMAGEM" /></div>
<div class="legenda">FRASE</div></div>

Agora selecione a imagem que enviou, sobre ela clique no segundo botão do mouse e escolha a opção"Copiar endereço da imagem..." Agora onde esta marcado em vermelho substitua pelo link da imagem que copiou. Onde está marcado em azul coloque uma frase de sua preferencia, Salve e veja o resultado, Não se esqueça de voltar ao HTML para personalizar ao seu gosto. Dúvidas? Deixe um comentário. Créditos vão para Part Of Me.

OBS: Se ao postar entrar um aviso dê erro, acrescente outra </div> no final dele, tudo bem? Se usá-lo uma vez terá que aplicá-lo em todos os layouts que usar futuramente, mesmo que não vá aplica-lo mas em futuras imagens, para que não dê erro nas que você já tinha aplicado.

8 comentários:

  1. OOOI <3 Meu fim de semana está tipo meio corrido hasuhsuah todo fds é assim, aqui no meu estado teve greve de professores e pra recuperar nós só vamos parar de estudar no dia 23 de dezembro :/
    Pois bem, isso me coloca agora num periodo doido de provas e afins kkk mas tirando isso tudo ok <3
    Eu acho esse tuto muito legal, acho que muitas blogueiras devem postar ele, mas eu só vi ele aqui, eu usei um tuto pra personalizar a legenda, mas o que eu usei era um pouquinho diferente, nele não usavamos ja direto, era iserido no html do blog mesmo, mas gostei mais dessa opção <3

    beijo

    http://umagarotanadaencantada.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. Oieee. Greve de professores é um saco, agente que tem que estudar feito loucos depois. =/
      Ah, que bom fico contente por isso. É um dos meus favoritos apesar de raramente usar. Mesmo como ele era? Beijinhos!

      Excluir
  2. Holis Dolls disculpen el spam^^ pero quisiera invitarlas a seguir mi blog :http://entraenestemaravillosoblog.blogspot.com/ porfa si no es de mucha molestia ^^ ahy hare muchos sorteos u entre otras cosillas ñ.ñ bueno las espero!♥♪

    ResponderExcluir
    Respostas
    1. Gracias, bienvenida . Sí , voy a visitar su sitio, gracias por visitar mi sitio

      Excluir
  3. Nosssa me ajudou ><
    Queria pedir um layout do RaP monster please <3

    ResponderExcluir
    Respostas
    1. Obrigada. Irei procurar imagens expiradoras para fazer. ^^

      Excluir
  4. Oi, desculpa por te perturbar mas eu procurei: ]]> e não apareceu nada. Fiz algo errado? Poderia me ajudar por favor?

    Se puder,agradeço. Beijinhos!!!

    ResponderExcluir
    Respostas
    1. Oi Jujuh experimenta procurar por somente por ]]

      Excluir

Hi guys!!!!
Hey aqui é Wendy, blogueira desde 2010! Viciada em animes, amante de livros e adora ver séries! Criei esse cantinho na intenção de ajudar na criação e personalização de blogs e sites.
Wattpad Facebook Tumblr Instagram