Últimos Artigos
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:
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:
DEMO
Caso você queira usar esta dica em seu blog atual, veja um exemplo dos estilos que coloquei no Template Zelia:
É 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;" > |
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;" > < 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
Assinar:
Postagens (Atom)