Os tutoriais e templates aqui apresentados são voltados para os Modelos de layout (lançados em 2006). A eficácia das dicas aqui apresentadas não foram testadas nos novos modelos de templates do Blogger (2010).

06 setembro 2008

Como fazer um template para o Blogger IV

Quando eu comecei a utilizar o Blogger, imediatamente desejei alterar o template padrão e fui logo xeretando os códigos e tentando modificar alguma coisa. De imediato não percebí muita coisa mas, ao invés de sair perguntando por aí, à torto e à direito 'comofas', descobrí o que era CSS na marra. Uma maneira que encontrei para estabelecer uma ligação com os nomes dos seletores e suas divs ou classes foi colocar cor em tudo. Colorindo minha página,eu tive uma noção clara da localização e dimensão de cada elemento e sugiro que você faça o mesmo.


Aula Template_1220747783735

Mesmo que você tenha entrado aqui só com o intuito de aprender como colocar mais uma coluna no seu template, é importante conhecer todos os elementos que compõem a sua página para diminuir consideravelmente os erros na hora de mudar alguns detalhes.

Coloque em todos os seletores que encontrar a propriedade Background e estabeleça cores diferentes para cada um. Faça isso para #body, #header-wrapper, #header-inner, #header, #header h1, #header .description, #main-wrapper, #sidebar-wrapper, h2.date-header,.post, .post h3,.post-body , .post-footer, #footer e acrescente além disso os seletores .sidebar h2 (que já ensinei como criar no post anterior), #wrap2, #content-wrapper, #crosscol-wrapper, #Blog1 e .hfeed.

Conforme for adicionando cores para os fundos destes elementos, visualize, para perceber a localização e dimensão de cada um.

Para content-wrapper, acrescente, além do background:

word-wrap: break-word; overflow: hidden;

ou a cor (ou imagem) não tomará todo o espaço da div. O código deve ficar assim:

#content-wrapper{
background:#BBCCFF;
word-wrap: break-word; overflow: hidden;}

com croscoll-wrapper é preciso primeiro encontrar este trecho(use Ctrl+F):

<div id='crosscol-wrapper' style='text-align:center'>
<b:section class='crosscol' id='crosscol' showaddelement='no'>
</b:section>
</div>


onde está no coloque yes, depois vá para o painel Layout e insira no novo elemento que aparecrá sob o cabeçalho um gadget qualquer. Eu coloquei uma linha de links do adsense.

Com este método, além de perceber a localização e dimensão dos elementos, ficará claro que algumas divs contém outras divs e por isso as dimensões devem ser respeitadas. Por exemplo, na imagem do meu blog de testes, o que está em cinza é Body, que contém tudo. O que está em preto é Outer-wrapper, que contém todos os outros elementos. Assim, se outer-wrapper tem uma largura de 700px, por exemplo, a soma dos outros elementos não pode exceder esta largura, ou o template ficará desfigurado. Este é o erro mais comum ao tentar colocar uma nova coluna no blog: não respeitar as dimensões. A soma para o acréscimo de qualquer elemento tem que conter os espaços de margin e padding, que já foram explicados aqui além da largura das colunas. Então, a primeira coisa mais importante quando for alterar o seu template é Outer-Wrapper, a div que contém todas as outras.

Como lição de casa :-) faça este colorido no seu blog de testes e vá visualizando, para compreender (e decorar!) a posição dos elementos do template. Você pode ir além e alterar a largura deles também, onde está width. Se no seu blog de testes outer-wrapper tem uma largura width: 660px, aumente para 900px e vá aumentando também a largura ds colunas, para ir se familiarizando.

Artigos Relacionados

17 comentários:

Administrador do blog (brasfoot) disse...

oi Ariane, tudo jóia?
ficou legal esse tutorial 4
quero saber se posso colocar esse tutorial no meu blog, com todos os direitos autorais que vc quiser... Tô precisando dar uma inovada no meu blog.
e vc naum me respondeu uma perguntinha...
como faço para divulgar mais o meu blog assim como o seu.
me ajuda por favor, ok?
se voce deixar eu publicar esse tutorial no meu blog, pode conferir se está com seu nome e o endereço do seu blog.

meu blog é ''bloggertools2.blogspot.com''
pode dar uma conferida lá e me diz com tá meu blog. (Meu blog ainda não tem os links, tá em fase de testes)

Danimar Lazaretti disse...

Ariane, não é pra aceitar esse comentário, já que tem pouco a ver com o post...

eu estou "reformando" um blog, troquei o template, arrumei tudo, deixei do jeito que eu queria, mas não tem como tirar o título do blog, que atrapalha o banner...se colocar o banner do jeito "normal", ele fica perdido na página, ou seja, só pelo código HTML... tem como arrumar isso? fiquei o dia fuçando o código e não achei jeito, e como vc conhece bem esse assunto...

o blog é esse:
http://aimplayer.blogspot.com/

pode responder via email:
danimar.lazaretti@hotmail.com

MUITOOOO Obrigado!

;]

Victor Aguiar disse...

Olá!
Eu não sabia aonde tirar essa dúvida, então decidi escrever aqui mesmo.
Eu queria saber como eu coloco o 'Buscar' no cabeçalho.
Já procurei um monte e não achei nada. :/
Se der para me ajuadr, agradeço!

Ariane disse...

Administrador, sinceramente prefiro que não coloque nenhum tutorial na íntegra em outro blog. Você pode indicar o tutorial, fazer algumas considerações sobre, mas copiar e colar, mesmo com os créditos, não. Para divulgar seu blog existe muitas alternativas, comece com redes sociais. Se inscreva no BlogBlogs, Technorati, MyBlogLog, etc.

Victor, seu cabeçalho precisa estar dividido em duas colunas e aí vc acrescenta o widget de busca. No Blog a La Carte explica como fazer isso.

Administrador do blog (brasfoot) disse...

AHH, TUDO BEM ENTAÕ
VOU FAZER COMO VC DISSE... Fazer uma apresentação sobre como criar um template para blog e colocar um link indicando o seu.
Já que foi vc a primeira que teve essa idéia.
Mais mesmo assim obrigado pela atenção.

até mais

cozinhamasculina disse...

Recebi um selo do premio dardos e o estou repassando para os blogs que gosto, o templates para novo blogger foi um dos meus escolhidos.
Visite meu blog e faça parte desta campanha.
Deixei a mensagem aqui pois não encontrei outro campo de contato.

Arte é Ato disse...

Ariane,

Ontem eu um comentário, mas houve um problema de conexão, então não sei se você recebeu ou não o comentário.

O que eu falei foi que essa sua dica irá me ajudar muito, porque estou tentando entender o processo do CSS. Com isso, com certeza devo ter uma visão melhor dos elementos do template. Estou usando um blog teste para aprender melhor como customizar um blog a partir do Simples do Blogger.

De novo, obrigada.

Rô Maia

Alicia Mirabilis disse...

Estou desenvolvendo meu blog mas não consigo envia-lo (fazer upload) a mensagem sempre é...

Não foi possível analisar o seu modelo, pois sua formatação é inadequada. Certifique-se de que todos os elementos XML estão fechados adequadamente

Não sei mais o que fechar...

Poderia me ajudar? Gostaria de enviar o código acho que o problema são as divs...

Ariane disse...

Alicia, se puder, me envie o código para que eu possa dar uma olhada: ariane1673[arroba]gmail.com

Alicia Mirabilis disse...

Olá Ariane

Passei o dia inteiro tentando corrigir o template que eu baixei de um site. Mas, realmente não consigo. Se puder me ajudar agradeço.


Vou enviar o email para você. Um grande abraço.

Alicia Mirabilis disse...

Olá Ariane

Muito obbrigada pela atenção vou te enviar o email. Um abraço.

... disse...

ola...eu só queria saber onde posso achar uma tabela de cores para HTML
obrigado!!!
André

KENTY disse...

O Ariane
Muitooo prazer em te encontrar!!
Seu blog é demais
Vc fez um trabalho fantastico aqui.
Tenho aprendido muito com vc.
Valeu pelas dicas.
Alexandre..

Becαh =* disse...

Olá Ariane,
sabe, eu gostaria de aprender como fazer um template com uma foto que eu gosto (PeroPero), e não sei como faz. Você poderia ensinar? :)
Por favorzãaaao *_*
Ah, ótimo trabalho você faz, parabéeeens :**
beijão .

Joseph disse...

É.... vou ficar por aqui... parece muito agradavel e apetitoso o aprendisado aqui.

Agradeço muito a sua pessoa... mas não sou sempre formal assim não tá?! Não assute hauhau

See you

daufen bach. disse...

Ariane, segui a sugestao do tutorial...beleza, a certinho, perfeito isso. Mas, como eu li no teu blog, eu sou você em 2006. iniciando e apanhando igual cachorro sem dono..rs
ei modifiquei as cores. outer-wrapper uma cor, main wrapper, outra cor, sidebar outra cor e por aí vai, mas eu quero conseguir achar onde eu consigo deixar a as postagens da main wrapper separadas, como quadros, igual na template março...é cores também que separam?

beijin a ti e desculpa essa insitencia...

daufen abch.

Batatazz disse...

Porcurei e nao achei , si puder me ajuda queria mudar a fonte do texto e a cor dos comentarios mas nao acho a opção , to ficando maluco ja .. obrigado e seu blog é otimo me ajudo bastante

Postar um comentário

Os comentários são moderados.