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é!

29 Deixe aqui seu comentário:

Verônica Cobas disse...

Fabi,

Te juro: é a primeira vez que leio essas informações de uma forma didática e fácil. Pra mim, formatar o blog parecia o teorema de Pitágoras,mas você o fez de forma tão fácil e administrável, que vou até tentar brincar um pouco com o meu blog pessoal, o Assim que Sou.
Já te disse que te acho surpreendente? Beijo grande. Vê

Santa Imaginação disse...

Oi Fabi!!Obrigada vou tentar espero conseguir....ahh onde e o que tenho que mudar nos comentários?Bjs e bom finde...
Zu

Fabiana Correia disse...

Fabi, muito didático o seu tutorial.
A parte do cabeçalho até já consegui, mas o fundo tentei uma vez e nada, Vou tentar desse jeito para ver se consigo.
Bjocas!

Rosi disse...

Maravilha
Vou mandar o Queridinho ler teu post, quem sabe ele enfim consiga modificar meu blog que tá muito sem graça. Já tentei uma vez e perdi quase tudo, realmente não levo jeito para a coisa...
Bom final de semana.

Ana Carolina Peixoto disse...

amiga, adorei! Era tudo que eu precisava! rs! Eu não tenho muito tempo para tentar decobrir e achei perfeita as suas orientações. Outro dia falei com a Beta pelo chat no trabalho sobre fazer um post com dicas de configurações simples, tipo: como inserir contador, tradutor, feed... Eu sempre te alugo e aluga a Beta para fazer para mim. Então, fica a dica para quem sabe um dia um outro post esclarecedor como esse. rs!
Bjs,

Fla disse...

Poxa que bacana!
Adorei as dicas.
Super bem elaborado e explicadinho.
Bjs
Fla

Lucia Laureano disse...

Fabi,
Seu post está maravilhoso! Vou tentar colocar em pratica no meu blog na semana que vem, já que por conta da influenza A ficarei de licença até dia 24 (oba!).
Beijos,

disse...

Oi Fabi,

Estou incetivando a minha mãe a contruir um blog e enviei o seu como exemplo. Aí resolvi entrar para dar uma olhada e adorei o que vi!
Está ficando cada vez melhor!
Fico feliz em ver que está dando tudo certo!
Quem sabe vc não serve de inspiração para minha mãe e muitas outras pessoas!?!

Parabéns!!!

Bjocas,

Fábia

Beta Bernardo disse...

Fabi, muito legal o post!!
Eu me entendo bem com html, mas sou uma abnegação pra explicar. As meninas do CRTVS sempre me pedem pra ensinar, mas não sei passar. Eu leio bem o html, mas não sei escrever! srsrsrs então, todas as modificações que faço no CRTVs e no pessoal é vendo e entendendo e mudando e testando...
Carol já me pediu um post desse tipo, tá manga. Quero ver se consigo ser didática assim pra escrever tão bem!
Parabéns!
Bjks, Beta

Super didático o post. Amei!

Santa Imaginação disse...

Fabi !!!Acho que consegui mudar os comentários...obrigada!!!Quando tiver uma folga vou ver se consigo fazer a personalização....rsrsr Bjs
Zu

Eliene Vila Nova disse...

Oi amiga,
adorei a postagem, pois confesso que não tenho muita paciência para fazer cursos, gosto de ler sobre determinado assunto e experimentar, já dei muito bug em computador por causa disso,rsrs...Agora estou num dilema se tuito ou não?
um final de semana abençoado
beijos

Isabela Kastrup disse...

Queridaaaa, ótimas diquinhas. Confesso que sou uma lesa para essas coisas, rs! Então boas explicações são sempre muito bem vindas, rs!
Super beijo e uma maravilhosa semana!
Isa

Aline disse...

Oi Fabi!!!
Você mandou super bem nas explicações!! Com certeza vai ajudar muita gente a dar um toque mais pessoal na cara do blog!
Arrasou!!
Beijão

Rosi disse...

Oiê
Então Fabi, eu sou tosca mesmo, não consigo fazer muita coisa com esse troço de html. Desculpe por eu existir, rsssssssssssss.

Viu o resultado da entrevista lá no blog? Bombou em amiga?! Todo mundo gostou da sua história. Maravilha.

Pois é, tenho tantas questões, são tantas questões femininas...enfim, vamo que vamo, respirando, aprendendo, vencendo os obstáculos, essas coisas.

Enfim, querida. Adoro suas visitas e seus comentários.
Bjs e boa semana.

::| Foto Álbum Exclusivo |:: disse...

além do seu trabalho ser muito legal, adorei este post.. com certeza esta semana darei uma estudadinha nele para ver se meu blog fica mais legal!!! obrigada

Luci Cardinelli disse...

Obrigada pela visita! :)
Cheguei aqui através da sua entrevista no blog da Rosi. Escrevi lá e vim dar uma espiada. Aí dei de cara com esse post e quase caí da cadeira pois acho que é tudo que ando querendo. Como estava corrida nem deixei recadinho. Guardei o link prá ler com calma depois.

bejão e obrigada pelo carinho.

Ah além do blog de artes tenho outro, pessoal.
http://reencontrandoaspalavras.blogspot.com/

mais beijos prá vcs!

BRANCA FUSCO disse...

FABI, FAZ TEMPO QUE ESTOU "ME MATANDO" PRA PERSONALIZAR MEU BLOG...MAS COMO É DIFÍCIL!
ADOREI SUA EXPLICAÇÃO!
A PRIMEIRA VEZ EU FIZ E CONSEGUI POSTAR OS DOIS...MAS NA SEGUNDA TENTATIVA, NÃO ENTRA NADA...FICA A PÁGINA EM BRANCO...PORQUE SERÁ?
NÃO PODE USAR A MESMA FOTO? ESTOU LINKANDO DO ORKUT...TBÉM NÃO SEI PUBLICAR NO PICASA...ME AJUDA? RS,RS
OBRIGADA E PARABÉNS...SEU TRABALHO É LINDO!

Verônica Masson disse...

Oi!
Adorei este post!!!!!!!!
Muiiiiiiiiiiiitttttttoooo...muiiiitoooooooo!!!!
Veja o meu blog como ficou. Parabéns pela explicação!
Beijos

Verônica Masson disse...

Oi Fabiana!
Fico feliz por você ter gostado do meu blog. Obrigada pelos comentários, são sempre bem vindos!
Agora...rsrsrs, quanto a sua dica,a-do-rei!!! estou tentando mudar, mas não estou conseguindo. Consegui ver a parte da janela pop up, rsrs que é fácil, mas não consegui tirar o número que indica quantidade de comentários que fica acima da postagem.:(
Vamos combinar que isso é complicadinho?!
Que tal você montar um tutorial sobre o assunto?
Obrigada,
Beijos
Verônica

Claudia disse...

Olá Fabi,

Queria saber como coloco o tradutor do blog com as bandeiras?
Meu email é blognovamente@gamail.com
Obrigada!

Anônimo disse...

Predilection casinos? wrench this advanced [url=http://www.realcazinoz.com]casino[/url] means steer clear of and imagine online casino games like slots, blackjack, roulette, baccarat and more at www.realcazinoz.com .
you can also into our untrained [url=http://freecasinogames2010.webs.com]casino[/url] secure at http://freecasinogames2010.webs.com and lace-work basic to memoirs spondulix !
another lone [url=http://www.ttittancasino.com]casino spiele[/url] aim is www.ttittancasino.com , in lieu of of german gamblers, line of work up unrestrained online casino bonus.

Anônimo disse...

barricade in rate all to hold this without obtain or stipulation [url=http://www.casinoapart.com]casino[/url] perk at the weighty [url=http://www.casinoapart.com]online casino[/url] shepherd with 10's of reborn [url=http://www.casinoapart.com]online casinos[/url]. healthy part in [url=http://www.casinoapart.com/articles/play-roulette.html]roulette[/url], [url=http://www.casinoapart.com/articles/play-slots.html]slots[/url] and [url=http://www.casinoapart.com/articles/play-baccarat.html]baccarat[/url] at this [url=http://www.casinoapart.com/articles/no-deposit-casinos.html]no transmit casino[/url] , www.casinoapart.com
the finest [url=http://de.casinoapart.com]casino[/url] with a point of view UK, german and all exceptional the world. so in search the treatment of the peak [url=http://es.casinoapart.com]casino en linea[/url] corroborate us now.

Anônimo disse...

Tudo bem?, dei uma espreitadela a tua pagina e amei tanto, estás a escrever bem!
Vai em frente com o bom trabalho!
Cumps

Anônimo disse...

Como estás?, dei uma espreitadela o teu espaço online e amei mesmo muito,acho que tás a escrever bem!
Continua com o o blog!
Cumps

Anônimo disse...

olá, vi ao teu blog para desejar a todos um belo ano novo!
Bom ano

Anderson Brendo disse...

Gostei muito das dicas.. Mas meu blog tá com problema... Eu coloco a imagem pra substituir o cabeçalho e ela fica com uma resolução horrivel. Aguem sabe oq devo fzer?
Qum souber aqui está meu email: andersonharry_22@hotmail.com
Link do blog: http://fcpercypi.blogspot.com
Grato
Anderson Brendo

Anônimo disse...

Espectacular blogue, embora não estou de acordo com umas coisas que aqui disseste embora no global uma boa argumentação!

Anônimo disse...

Interpretação estonteneante neste blogue, postagens como aqui vemos dignificam aos que visitar neste blogue !!!
Faz muito mais deste espaço, aos teus leitores.

Anônimo disse...

Bom dia!, chamo-me Fernanda estudo Fisioterapia e gostei imenso da tua página! Muito bonita muito bem!
Adequa-se exactamente em tudo aquilo que aqui observei.Hoje sempre há muito para expressar nos blogues!Nada nada mais desafiante do que por a nossa escrita na net!
Bye Bye :)