Últimos Artigos

asass

Estas instruções servem para os templates que possuem estilos para legendas (caption) nas imagens.

É necessário usar o novo editor de posts do Blogger para o hack funcionar perfeitamente.



Adicione sua imagem normalmente. Coloque o tamanho e o alinhamento que preferir. Após adicionar a imagem, mude para a aba "Editar Html" da janela de postagem. Você verá um código semelhante ao seguinte:

?
1
2
3
<div class="separator" style="clear: both; text-align: center;">
<a href="http://endereço-da-imagem-original.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;">
<img border="0" src="http://endereço-da-imagem-do-post.jpg" /></a></div>

A esse código iremos acrescentar uma classe para o bloco e uma tag span para o texto da legenda.


Veja no código abaixo como deve ficar:

?
1
2
3
4
5
<div class="separator caption" style="clear: both; text-align: center;">
<a href="http://endereço-da-imagem-original.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;">
<img border="0" src="http://endereço-da-imagem-do-post.jpg" />
<span>COLOQUE AQUI O TEXTO DA LEGENDA</span></a>
</div>

DEMO

Caso você queira usar esta dica em seu blog atual, veja um exemplo dos estilos que coloquei no Template Zelia:

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
.post-body .separator{
padding-bottom:10px}
.post-body .caption a:link,
.post-body .caption a:visited,
.post-body .caption a:hover{
color:#666;
text-decoration:none;}
.post-body .caption a{
background-color:#eee;
border:1px solid #ccc;
color:#666;
display:inline-block;
font-size:80%;
font-weight:bold;
line-height:1.5em;
padding:5px;
-moz-border-radius:3px;
-khtml-border-radius:3px;
-webkit-border-radius:3px;
border-radius:3px;}
.post-body .caption img {
background:#fff;
border:1px solid #fff;
-moz-border-radius:3px;
-khtml-border-radius:3px;
-webkit-border-radius:3px;
border-radius:3px;
margin:4px 2px 8px 2px !important;
padding:2px;}
.post-body .caption span{
display:block}

1 comentário
asasass

Seja o Primeiro a Comentar!
swswswsws

Imagem do Tema
Baixar Template G1 Filmes Online
Download Template G1 Filmes Online
Template G1 Filmes Online

1 comentário
Assinar: Comentários (Atom)