Pesquisa personalizada

terça-feira, 4 de janeiro de 2011

Como colocar um plano de fundo nas imagens inseridas no Blogger





Sempre quis colocar um fundo nas imagens aqui do blog e isso tornou-se possível a partir do momento em que o Blogger introduziu as legendas (captions) nas imagens. Ao clicar em adicionar legenda (add caption), cria-se no código da imagem um atributo class (classe) denominado de "tr-caption-container" conforme pode ver abaixo:

Add caption

<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="http://3.bp.blogspot.com/_okYQdwGKpvE/Rp-CpnCYAMI/AAAAAAAAADw/7R-PaC82j0w/s1600/S3700149.JPG" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="240" src="http://3.bp.blogspot.com/_okYQdwGKpvE/Rp-CpnCYAMI/AAAAAAAAADw/7R-PaC82j0w/s320/S3700149.JPG" width="320" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Add caption</td></tr>
</tbody></table>
Portanto, pode-se criar alguns estilos com essa class. Eis como estilizei as imagens aqui no blog, aplicando um CSS bem simples colocado antes de ]]></b:skin> no template:

.tr-caption-container {
background: #eee; 
border: 1px solid #CCC;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-goog-ms-border-radius: 10px;
border-radius: 10px;
}

- background: Coloca-se aqui a cor de fundo, no meu caso cinza bem claro(#eee), se quiser outra cor, procure pelo seu código correspondente.
- border: Coloquei uma borda fina (1px), linha sólida e uma cor para realçar (#ccc), um cinza mais escuro. Você pode alterar ao seu gosto.
- border-radius: um atributo do CSS3 para arredondar as bordas. Para que fique compatível com outros navegadores, adicionei também o -moz-border-radius(Firefox), -webkit-border-radius(para navegadores baseados em webkit) e -goog-ms-border-radius (Chrome). Infelimente as bordas arredondadas NÃO funcionam no Internet Explorer, mas quem liga?
Usei um arredondamento da ordem de 10px, você pode tentar outros valores que mais te agrada. Se não quiser bordas arredondadas, é só apagar esses atributos.

Para adicionar esse e qualquer outro CSS no código dos templates antigos, é só ir em painel de controle >> Design >> Editar HTML, procurar (control + F) por ]]></b:skin>, colocar o código CSS acima desta e salvar.
Caso o template seja do Designer de Modelo, vá na aba Avançado (Advanced), role o cursor até adicionar CSS (add CSS), cole o código e clique em Aplicar no Blog (Apply to blog):

Designer de Modelo
Um expert em CSS poderia fazer algo mais interessante, outras estilizações melhores. O que fiz aqui é apenas algo bem simples que qualquer um pode fazer, sem muitas dificuldades.

That's all folks!!!


Permalink:





Sobre o Autor:
Crazyseawolf Para saber mais sobre o autor deste blog, visite o seu perfil no Google+ ou este link . Para enviar uma mensagem, clique aqui . Para outras informações, leia o FAQ .



0 Comentando aqui :

Postar um comentário

Pessoal, comentem, críticas e elogios serão bem aceitos. E eu respondo, posso demorar mas respondo. Esse velho lobo do mar tarda mas não falha!!!!

Leia antes a minha Política de Comentários.

Se quiser deixar o link de uma postagem sua, utilize o código abaixo trocando o que está escrito em letra maiúscula:

<p><abbr><em><strong>SEU NOME</strong> - último post do blog... <a href="<strong>LINK-DA-POSTAGEM</strong>"><strong>TÍTULO DA POSTAGEM</strong></a></em></abbr><p>

Related Posts with Thumbnails
Google
 
 
Template Denim, criado por Darren Delaye, customizado por Crazyseawolf.