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.

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.