Como ajustar o template do seu blogspot

	Tweet
domingo, 9 de maio de 2010		Link:

Publicidade Google

Quando começamos a "bloggar" surgem várias dúvidas. Os layouts básicos não são nada bonitos e difícilmente agradam. Veja como melhorar um pouco o aspecto visual do seu blog.

Blogueiro

OBS: Essa postagem está desatualizada e está presente no blog apenas como arquivo. Você ainda poderá ver outras publicações acessando o Mapa do LTI.

Antes de qualquer coisa faça o backup do seu blog. Logue na sua conta no blogger e em 'Layout' clique em 'Editar HTML' e depois clique em 'Baixar modelo completo'. Se qualquer coisa sair errada é só restaurar a partir do modelo salvo. Agora para alterar a aparência, na mesma sessão 'Layout' clique em 'Escolher novo modelo'. No exemplo apresentarei uma alteração feita no layout 'Minima Blue', mas que pode ser aplicada a outro modelos.


A primeira coisa que se nota nesses tipos de layouts é a estreita área de postagem.


Para aumentar isso vá em 'Editar HTML' e marque a checkbox 'Expandir modelos de widgets'. Mesmo que você ache que não é necessário, sempre prefira marcar essa caixa para que todo o código fique visível. Pressione as teclas 'Ctrl+F' para abrir a caixa de pesquisa do seu navegador. Nela você deve digitar:

#main-wrapper

Você verá algo como:

Nesse bloco demarcado, o que interesssa alterar é onde está o "Width". Nesse exemplo ele tem o valor 410px; - Altere para um valor maior e isso almentará também a área da postagem. Vou usar como exemplo um valor 700px.


Realmente a área de postagem ficou maior, mas para onde foi a barra lateral? Ela foi lá para baixo deixando o blog desconfigurado. Vamos resolver isso agora. Procure por:

#outer-wrapper

E veja algo como:


De novo altere o valor "width" que aqui está em 660px. Como exemplo alterei o valor para 960px e veja como ficou:


Agora sim o problema foi corrigido. Antes que você comece a achar que os valores que eu usei são absurdos, saiba que eles são só sugestões. É você quem deve decidir os valores que melhor se ajustem ao seu blog. Eu por exemplo, uso um monitor com uma resolução de 1440x900 e nele ficou ótimo. É claro que você deve pensar nas pessoas que o acessarão e hoje em dia a resolução mais comum é 1024x768. Mas espero que meu blog dure bastante e que assim sendo, devo pensar que a tendência é que as pessoas comecem a usar telas com resoluções cada vez maiores. É por isso que eu prefiro essa cofiguração para blogs. Fica a seu critério.

________________________________________

Mas não acabou aqui não. Vamos ver agora o banner do topo do blog. Crie uma imagem para ser o seu banner. Depois de criado e devidamente hospedado, vamos preparar o local onde ela ficará. Um bom serviço de hospedagem gratuito é o ImageShack que não necessita nem de cadastro e é muito fácil de usar.

Agora em 'Editar HTML' deixe desmarcada a checkbox 'Expandir modelos de Widgets' e procure por:

<div id='header-wrapper'>

Você verá algo como:


Substitua o código que se parecer com:

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Blog (Cabeçalho)' type='Header'/>
</b:section>
</div>

Por este:

<div id='header-wrapper'>
<b:section class='header' id='header' showaddelement='yes'>
</b:section></div>

Seu template ficará com essa aparência:


Percebeu que o sumiu? Salve e irá surgir uma mensagem.


Escolha 'Excluir widgets', depois vá em 'Elementos da página' e clique em 'Adicionar um Gadget'.


Adicione o seguinte código com as devidas alterações:

<div><a href="http://seu.blogspot.com"><img style="border: 0px solid" alt="" src="http://seubanner.jpg" title=""></img></a></div>

Onde está em azul você deve substituir pelo endereço do seu blog e onde está em verde você vai colocar o caminho onde está hospedado o seu banner. Veja na imagem o resultado.


Ainda está ruim, o banner ficou torto em relação ao resto do layout. Vamos ajustar isso. Volte ao modo de edição html do seu blog e procure por:

#header-wrapper {

Você verá algo como:


Você vai mecher no valor do 'margin' dependendo de como ficou o seu template. No meu caso só precisei colocar um valor menos um (-1) para conseguir o ajuste certo. Veja:


Se quiser pode tirar aquela borda que contorna a imagem. É só colocar o valor zero em 'border'. Um pouco mais abaixo no código em '#header {' tem outro 'border'. Coloque valor zero para ele também e as bordas sumirão.


Se você não gosta das bordas seu trabalho termina aqui, mas se faz questão delas então tem mais uma etapa. Ainda em '#header-wrapper {' altere o valor de 'width' para se ajustar ao seu banner. e estará pronto. No meu caso precisei alterar o valor que era 660px para 964px. Veja:


Isso deve esclarecer algumas dúvidas de quem está começando como blogueiro. Os valores que eu coloquei são só exemplos, cada caso é um caso. Faça testes com os valores até achar o mais adequado para você, salve o template e bom proveito.

Veja também como personalizar o favicon do seu blog.