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á..
 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.

13 comentários

Postar um comentário

© eJhonas - 2012. Todos os direitos reservados.
Design Jhonas Balsas.
Tecnologia do Blogger.
imagem-logo