Personalizando seu blog no blogger

Acho que cheguei a comentar que no ano passado fiz um curso de Webdesigner na Infnet, não?
Pois bem, apesar não ter muita intimidade com códigos e números, foi uma experiência maravilhosa e muito enriquecedora.
Claro que o que aprendi por lá me ajudou muito a criar um blog personalizado, mas as aulas foram direcionadas para a criação de design de um site, não de um blog, que são um pouco diferentes. Quando fui criar meu blog esbarrei em alguns conceitos que não conhecia, o que me deixou um pouco perdida de início, mas aos poucos, pesquisando aqui, pesquisando ali, lendo os livros e material de apoio que tinha fui me familiarizando com a linguagem utilizada nos blogs, XML, e consegui criar um design bem pessoal, do jeitinho que queria.
Mas o que vou dividir hoje com vocês é bem simples, não exige conhecimentos mais profundos sobre XML nem nenhuma outra linguagem, basta interesse e boa vontade.
Então, vamos dar uma carinha mais sua ao seu blog?
Muito bem, montei dois tutoriais para a plataforma do Blogger, um ensinando como substituir o "header"ou cabeçalho, por uma imagem que vocês tenham , e outro para ensinar a colocar uma imagem de fundo no blog.

I- Substituindo o cabeçalho do blog:

clique na imagem para ampliá-la

1, 2 e 3- Vá em "layout>elementos de página>editar cabeçalho".
4- Na janela que se abrir clique em imagem e escolha o arquivo no seu computador ou link da imagem num banco de imagens na internet, e selecione a imagem que for servir de cabeçalho. Nesta mesma janela você deve escolher se a imagem ficará posicionada por trás do título do blog, ou ocultará o mesmo, substituindo-o. Esta última opção você deverá escolher se já tiver escrito na imagem o título do blog, ou tiver o logotipo. Atente para o que está escrito em letras miúdas logo abaixo destas opções. Lá é informado qual é o tamanho em pixels do espaço reservado para o cabeçalho que foi configurado para o template que está usando. Baseie-se neste tamanho quando for editar a imagem. Existe a possibilidade de reduzir, quando necessário, o tamanho da imagem para se ajustar ao pré-estabelecido, mas não é indicado, pois pode distorcer sua imagem. Caso você deseje alterar também o espaço para o cabeçalho, dando mais flexibilidade para a imagem que escolher, logo após este tutorial explicarei como pode ser feito.
5- Substituída a imagem e feito as devidas correções, clique em salvar.
6- A janela vai se fechar e para que, realmente, sua alteração seja concretizada, clique no salvar que fica no topo do layout de página. Entretanto, se você não estiver segura da alteração que fez e quiser vê-la antes de salvar, clique em visualizar, confira se está do jeito que esperava , se não estiver é só clicar em limpar edições e recomeçar tudo novamente.

II- Configurando o tamanho do cabeçalho:

clique na imagem para ampliá-la

1 e 2- Caso você queira uma cabeçalho maior você terá que fazer algumas alterações no CSS pré-estabelecido pelo template que escolheu. Para isso, vá em "layout>editar HTML".
3- Atenção! Antes de qualquer coisa, salve o código do seu template no seu computador clicando em "baixar modelo completo". Isto te trará mais tranquilidade caso erre alguma coisa durante as alterações que fizer, bastando você fazer o upload do arquivo que salvou do seu computador, salvar e respirar aliviada novamente. :) Vale ressaltar que as alterações que estou ensinando aqui não modificam em nada os widgets que porventura já tenha configurado, ok?
4-Na janela "editar modelo",procure pelo seguinte:

" #header-wrapper {
width:660px;
margin:0 auto 10px;
border:1px solid $bordercolor;
} "

"Header-wrapper" é a caixa que nos interessa alterar o tamanho. Então vá em "width" e modifique o número em pixels pelo que deseja. Aconselho a não passar de 800 pixels, pois algumas pessoas ainda usam monitores com resolução pequena, de 800X600 pixels. É raro, mas ainda existe. O "header"aqui do blog está configurado com 940pixels, mas fiz isso porque queria que ele ficasse do mesmo tamanho da caixa container, onde coloquei uma imagem de background simulando um papel. Se quiser tirar a borda, é só apagar a linha: "border:1px solid $bordercolor;".
5-Clique em "visualizar", confira se está tudo ok, senão clique em "limpar edições" e recomece.
6- Quando tiver certeza que está tudo bem, clique em "salvar".

III- Inserindo uma imagem de fundo:

clique na imagem para ampliá-la

1 e 2- Para inserir uma imagem de fundo bonita e personalizada no seu blog, primeiro você tem que armazenar a imagem que escolheu em algum banco de imagens na internet que lhe forneça um endereço para link. Eu uso o do Picasa, que é onde o Blogger originalmente armazena as imagens que adicionamos por aqui, e a maioria do navegadores lê sem problemas. Depois de feito isso, vá em "layout>editar HTML".
3- Caso ainda não tenha salvado seu código original, faça-o agora, e repita o que eu ensinei no tutorial para cabeçalho.
4-Na janela "editar modelo", encontre o seguinte:

"body {
background:$bgcolor;
margin: 0
color:$textcolor;
font:x-small Georgia Serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
}"

Para inserir a imagem de fundo basta você substituir o código acima por:

"body {
background:$bgcolor;
color:$textcolor;
font:x-small Georgia Serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
background-image: url(http://LINK DA SUA IMAGEM NA INTERNET );
background-attachment: fixed;
margin: 0 auto;
margin-bottom: 20px;
}"

Não inclua as aspas, hein? Só as coloquei para sinalizar que é algo para se copiar,ok? Mas não esqueça de abrir e fechar o "body" com chaves.
Caso você queira modificar alguma outra propriedade de background, ou entender um pouco mais sobre CSS, sugiro que leia mais neste tutorial aqui.
5- Tudo feito, antes de salvar as alterações, vá em "visualizar" e confira se ficou tudo ao seu gosto.
6- Só depois então salve a edição.

Bem, aí estão minhas dicas para você começar a personalizar seu blog.
Caso tenha alguma dúvida do que expliquei hoje aqui, ou queira saber sobre outro assunto referente à design de blogs, ficarei feliz em ajudar.
E aí gostaram? Comentem o que acharam, quem sabe não preparo outros tutoriais sobre o assunto, hein? :)
Até!