Olá pessoas da terra! (não de marte), estou falhando muito aqui no blog, pois acho que muitos de vocês sabem que estou terminando o 3º ano e estou indo para a universidade, então nesses períodos é muita coisa para se fazer: termino do ensino médio, colação, inscrição e tudo mais e por esse motivo ter postado pouco esses dias.
Bem hoje trouxe um tutorial que na minha opinião é bem legal e interessante, fica bem legal no blog, principalmente em blogs de leitura e tal que é a Legenda nas imagens do blog.
Primeiro vá em Modelo >> Editar HTML >> Clique dentro da caixa de códigos e aperte Ctrl+F e procure por:
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.
Espero que tenham gostado!!!
Bem hoje trouxe um tutorial que na minha opinião é bem legal e interessante, fica bem legal no blog, principalmente em blogs de leitura e tal que é a Legenda nas imagens do blog.
Primeiro vá em Modelo >> Editar HTML >> Clique dentro da caixa de códigos e aperte Ctrl+F e procure por:
]]></b:skin>
Acima dessa tag cole o seguinte código:
.imagem {Como podem ver já está tudo explicado no código, então é só ir alterando conforme você queira.
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;
}
OBS.: Coloque o tamanho da legenda do tamanho da sua imagem.Agora para que a legenda apareça na imagem é só ir na área onde se escreve o conteúdo das postagens, logo abaixo do nome do seu blog tem uma barrinha com Escrever/HTML clique em HTML. E cole o seguinte código:
<div class="imagem">É claro que você vai colocar o código na posição que está a imagem. EX: Se quer a imagem no inicio do post, coloque o código no inicio do post e assim sucessivamente.
<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.
Espero que tenham gostado!!!
Créditos: Part Of Me