Tweet Personalizar o Novo “Design Blogger” – Parte 1 -Background

 ATENÇÃO! Em 31/07/2010 o Blogger lançou um novo recurso para o Designer do Modelo (Background). Leia AQUI para informações detalhadas. Este post será mantido como documento de arquivo. Obrigada!

Existem milhares de templates prontos para download na rede e mais alguns tantos oferecidos pelo Blogger. No entanto, queremos ter um layout único, com nossa impressão digital (rs) e nem sempre temos dinheiro disponível para pagar um designer. Porém, com um pouco de paciência e boa vontade, conseguimos mudar o aspecto da nossa com sucesso. Com o novo “Designer de Páginas” do Blogger, essa tarefa ficou ainda mais fácil e prazerosa. Vamos aprender a mudar alguns detalhes que fazem toda a diferença em um template, começando pelo background.


Se você ainda não sabe sobre esse recurso do Blogger, leia ESTE tutorial.

Para esse exemplo, usei o modelo Awesome.Inc



Escolhi o estilo de layout com uma coluna lateral esquerda



E o estilo de footer com uma coluna horizontal


Podemos colocar uma imagem de fundo (background) de várias maneiras, mas aqui vou ensinar duas, bem fáceis de entender.
No primeiro exemplo, escolhi uma imagem bem grande, com 1600 px de largura por 1.200 px de altura. Ela toma todo o fundo do template. #Dica: Você pode usar um wallpaper.

Primeiro exemplo. Veja DEMO.

Escolha a imagem que quer como back e hospede no próprio Blogger ou em seu site de preferência, tipo Photobucket ou Tinypic.

Faça login no Blogger in Draft crie um blog para testes, escolha um modelo “Mínima” do Blogger e crie um ou dois posts com imagens, e faça um comentário.

Depois clique em “Layout” e “Designer do Modelo” e escolha o modelo que eu indiquei e cliqu em “Aplicar modelo”

Escolha o estilo do layout e do rodapé clicando sempre em Adicionar Modelo.
Agora clique na aba “Editar HTML” e localize o código que será alterado.
Use as teclas Ctr+F e encontre o seguinte trecho:

<Variable name="body.background" description="Body Background" type="background"
       color="$(body.background.color)"
       default="$(color) none repeat scroll top left" value="$(color) none repeat scroll top left"/>

Substitua tudo pelo seguinte:

<Variable name="body.background" description="Body Background" type="background"
color="$(body.background.color)" default="#111111 url(http://themes.googleusercontent.com/image?id=1OACCYOE0-eoTRTfsBuX1NMN9nz599ufI1Jh0CggPFA_sK80AGkIr8pLtYRpNUKPmwtEa) repeat-x fixed top center" value="#111111 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOZEu_9zzhYEs5k1Kx2I0U-LEg0N9dow8t_H94QyKnOTzH_xxXRcjub_OvhpOiaF3YYJNYXu5ud7JeXeh05ke3XLSWqdBdKs-jQ_ztoW1a3pFsjenbSu80cONY5_vEs3VGunbTc6xNJLQx/s1600/fullscreen.jpg) repeat-x fixed top center"/>

O trecho em vermelho é o endereço da imagem que você hospedou.
O trecho em azul, determina ajusta a posição da imagem.

Segundo exemplo. Clique  na imagem abaixo para ampliar



Aqui a imagem usada é pequena e se repete para dar o efeito desejado. A vantagem é que facilitará a abertura da página. Veja o tamanho da imagem : 80px X 80 px:



Para esse modo, vamos mudar pouca coisa veja:

<Variable name="body.background" description="Body Background" type="background"
color="$(body.background.color)" default="#111111 url(http://themes.googleusercontent.com/image?id=1OACCYOE0-eoTRTfsBuX1NMN9nz599ufI1Jh0CggPFA_sK80AGkIr8pLtYRpNUKPmwtEa) repeat-x fixed top center" value="#111111 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-AaOmtQKG2F-qbTW_3C6OQEklH9xrXZVuqDqJHQHx8SNcJ8_MwFAO88E2K6X6XmJ__9-o9WTuovq5j-bv-6Mew5zIUXepTYmnFu03uVpeoqUb6DoZ336-n2fGol6gVKYrP0rjvJia5Lgf/s1600/blgr067.gif) repeat fixed top center"/>

O trecho em vermelho é o endereço da imagem.Veja que o trecho em azul muda um pouquinho e é isso que faz toda a diferença.
Depois de fazer as mudanças, volte ao Designer do modelo e ajuste as cores do título, texto, bordas etc., para que fique tudo bem bonito.


Dica: Crie backgrounds com texturas esclusivas lendo ESTE post.

Vou deixar algumas imagens de “lambuja” para vocês mas o ideal é fazer uma busca por patterns e backgounds no Google. Salve com o botão direito do mouse.

............................................................................................................

           ..............................................................................................................

Se quiser, leia um tutorial em inglês: Blogger Stop.net

É isso crianças! Qualquer coisa, grita que eu acudo!
Beijo da Mama