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.

6 comentários:

  1. É por isso que eu amo esse homiiii (haha).

    Valeuzão! Eu, ontem mesmo descobri a tal imagem. Aquelas que eu falei que tinha mais de uma URLs são das transparências, então se alguém usa o template com transparência não tire as URLs extras... hehe... Tire só a que tem a palavra THEMES, as outras deixe =D Pois são as transparências do blog =D

    A minha irei mudar só no fim de semana!

    Valeu Cidão!!!! =P *Quer casar comigo =P? hahahaha

    ResponderExcluir
  2. Olá Crazy

    Valeu pela lembrança, sugeri o tutotial porque adoro tutorial, adoro quando vem tudo explicadinho assim, para mim que não entende muito de html ajuda muito. rs

    Um Abraço :)

    ResponderExcluir
  3. @Ana Magal
    Casar comigo? Agora??? :)
    Fico feliz em saber que pude te ajudar!

    ResponderExcluir

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>

Artigos recentes

Linkem me:

Related Posts with Thumbnails
Google