02/02/2017

Legenda nas imagens da postagem [001]


Oi, oi, oi! Bunnie's!!! Já faz bastante tempo que esse tutorial roda pela internet, é bem conhecido, inclusive uso na galeria de Layouts. Apesar disso não tive oportunidade de postar aqui no blog. Então decidi fazer hoje... Existe duas forma de fazer,  hoje vou ensinar uma um pouquinho mais pratica, e a outra vou postar na próxima semana. Certo? Então vamos lá. Créditos no final da postagem!

Postagem atualizada. Caso queira saber como fazer o segundo modo: acesse aqui.


.::Exemplo::.


Você pode personalizar a legenda colocando efeito em hover.

1. Vá no HTML do blog e pesquise por : ]]></b:skin, ao achar cole sobre ela o seguinte código:

Códigos
.legenda {
font-family: Trebuchet MS, sans-serif;
font-size: 11px;
color: #666666;
-webkit-filter: opacity(0.6);
-webkit-transition-duration: .90s;
background: #fff;
text-align: center;
position: absolute;
margin-top: 115px;
padding: 5px 2px 2px 2px;
width: 678px;
height: 14px;
}
.legenda:hover {
-webkit-filter: opacity(0.9);
-webkit-transition: All 1s ease;
-moz-transition: All 1s ease;
-o-transition: All 1s ease;
}

Salve!

2. Vá em Postagens e escolha criar uma nova postagem. Faça upload (envio) de uma imagem normalmente, escolha o tamanho que quer a imagem. No canto esquerdo do blog possui opção "Escrever" e "HTML" clique no HTML. No último div abaixo da imagem cole:
Códigos
<div class="legenda">LEGENDA</div>
Escreva o que quer na legenda, e escolha a opção "Escrever". Prontinho! Agora é só editar o CSS ao seu gosto. Créditos Etc For Me. Qualquer dúvida é só comentar! XoXo.

Nenhum comentário:

Postar um comentário

Bem Vindos
Hi! Meu nome é Andréa Alark, mas conhecida como Wendy dona do blog Bunny Crazy. O blog foi criado em 2010 na intenção de ajudar a criação e desenvolvimento do seu blog. Aqui encontrará tutoriais e dicas de HTML, layouts gratuitos e muito mais.
Friends
Bunny Crazy by Wendy ❀
Bunny Crazy ★
Bunny Crazy ★
12345