Afiliados com Legenda

Como é bom ter uma "férias" de seis dias, não acham? k , mais enfim, andei passando por alguns blog's, como eu tinha ficado sem bloggar por algum tempinho, não soube de alguns tutoriais tão bons.. na minha ida neles, acabei achando alguns muito bons.. pelo que vi ele é super simples, então vamos lá..

Prévia

Vá no Blogger

Designer

Editar HTML

Expandir Modelo de Widgets

Ctrl + F (Procure por:)

]]></b:skin>

Logo acima desta tag, cole este código:

figure {
display: block;
position: relative;
float: left;
overflow: hidden;
margin: 0 10px 10px 0;
-moz-transition: all 0.6s ease;
}
figcaption {
position: absolute;
margin-bottom: 10px;
background: #000000;
color: #FFFFFF;
padding: 3px 3px;
opacity: 0;
-webkit-transition: all 0.8s ease;
-moz-transition: all 0.8s ease;
-o-transition: all 0.8s ease;
}
figure:hover figcaption {
opacity: 0.9;
}
figure:before {
content: "?";
position: absolute;
font-weight: 800;
background: #ff55a9;
text-shadow: 0 0 5px white;
color: #FFF;
width: 24px;
height: 24px;
-webkit-border-radius: 12px;
-moz-border-radius: 12px;
border-radius: 12px;
text-align: center;
font-size: 14px;
line-height: 24px;
-moz-transition: all 0.6s ease;
opacity: 0.75; }
figure:hover:before {
opacity: 0;
}
.cap-left:before { bottom: 10px; left: 10px; }
.cap-left figcaption { bottom: 0; left: -30%; }
.cap-left:hover figcaption { left: 0; }

Agora Salve, e Feche! Porém não acabou por ai não, agora vá em Layout

Adicionar Gadgets

HTML/Javascript

Cole este código:

<figure class="cap-left">
<img src="URL da Imagem" alt="" />
<figcaption>Palavra</figcaption>

Modificando e entendendo um pouquinho mais:
background: #000000; Você deverá colocar o código da cor dos fundos em que a legenda aparecerá, como podem ver na imagem de ilustração desse tutorial aparece a legenda preta, ou seja, se você colocar um código de cor rosa, e colocar nessa área do código, aparecerá com o fundo da legenda rosa..
color: #FFFFFF; Esta será a cor da legenda.
content: "?"; Será a palavra que aparecerá antes da legenda.
background: #ff55a9; Será o fundo do "?".
color: #FFF; Este será a cor do "?".
URL da Imagem: Você deverá colocar o endereço da imagem em que está a imagem que você deseja que apareça a legenda.
Palavra: Coloque a palavra em que quer que apareça na hora final.
Este tutorial aprendi com o Space Tutorials.