quinta-feira, 17 de junho de 2010

Como trocar a imagem de seu background no Designer de modelo

No Designer de Modelo do Blogger, a imagem do background não está mais no CSS, definida pelo seletor body como era antes nos templates antigos. Agora está nas definições das variáveis que fica abaixo de <b:skin>.

Nos antigos templates do Blogger era assim
A variavel chama-se body.background, e nela ficam definidas a cor, as posições da imagem, a url e os créditos do autor. Use control + F para encontrá-la indo em painel de controle >> Design >> Editar HTML, o código que deve ser encontrado é semelhante à esse abaixo:

<Variable name="body.background" description="Body Background" type="background"
color="$(body.background.color)" default="$(color) none repeat scroll top left" value="#513831 
url(http://themes.googleusercontent.com/image?id=1KH22PlFqsiVYxboQNAoJjYmRbw5M4REHmdJbHT5M2x9zVMGrCqwSjZvaQW_A10KPc6Il) repeat-y scroll top center 
/* Credit: luoman (http://www.istockphoto.com/googleimages.php?id=11394138&platform=blogger) */"/>

As partes em colorido que destaquei é onde se deve alterar:
A parte destacada em vermelho é a url da imagem do background que deve ser trocada pela url da sua imagem hospedada em algum servidor (Picasa, Tinypic, imageshackus, etc.). As imagens que o Blogger utiliza tem uma dimensão aproximada de 1.800×1.103 pixels (Verifiquei isso na imagem que uso no blog Contos e Crônicas.). Recomendo que use uma imagem própria com essas dimensões, senão terá que trocar as propriedades referentes às posições.

Obs.: Às vezes, há duas urls, isso significa que há duas imagens sobrepostas, uma que fica no corpo inteiro do template, e outra que fica localizada no topo. Pode-se apagar as duas, mas cuidado para não apagar as definições de posição da imagem principal (repeat-y scroll top center), pois elas mantém a imagem centralizada e se repetindo na vertical

A parte destacada em verde(começando com /* e terminando em */) é o crédito da imagem, seu autor e url, que pode ser apagada caso a imagem seja sua, mas se você a pegou de um outro site, é recomendável dar o crédito.

Não precisa mexer no resto, deixe como tudo está, dê um preview para ver tudo está normal e depois salve o seu template.

Espero que este post tenha sido útil para a @anamagal e a @mosaicosocial. E um agradecimento especial  a @anakint por ter levemente sugerido esse tutorial.

Artigos recentes

Linkem me:

Related Posts with Thumbnails
Google