Como criar um template para blogger – 1º Parte – Ajustes

Imagem por: Trevor Haldenby

Há algum tempo eu já estava programando a nossa primeira série de postagens aqui no Tutoriais Blog. Pois bem, este momento chegou. Apresento á todos a primeira postagem dá série Como criar um template para blogger.

Vou tentar não estender a série em vários posts, pretendo publicar apenas 2 ou 3 artigos no máximo, porém, vou tentar explicar o básico para a criação própria de um template utilizando a plataforma blogger.

Para dar inicio a série vou utilizar o template Mínima (2 colunas), padrão do blogger, o qual vamos fazer todas as devidas modificações.

As primeiras alterações serão feitas através do painel Fontes e Cores (Design/Fontes e cores), por enquanto esta parte fica ao seu dispor. No meu caso vou mudar apenas a cor do plano de fundo para cinza.

UPTATE: O blogger atualizou o recurso fontes e cores, agora você fazer a alteração descrita acima utilizando o Designer do Modelo (Design -> Designer do modelo -> Avançado).

Depois de ter feito todas as alterações no design do modelo, chegou a hora de executar as demais modificações no painel Editar HTML (Design/Editar HTML).

Redimensionando:
Vamos começar a redimensionar a largura do template,para isso vamos alterar a outer-wrapper. 


Para quem não sabe, outer-wrapper é a div que suporta todos os elementos da estrutura do template, tais como: Cabeçalho, campo de postagem e colunas laterais.

Para alterar o valor da largura (widtht) do template procure por (Ctrl+f):

/* Outer-Wrapper
———————————————– */
#outer-wrapper {
  width: 660px;
  margin:0 auto;
  padding:10px;
  text-align:$startSide;
  font: $bodyfont;
  }

Vamos alterar o valor em vermelho para: 700px, e acrescentar um fundo na outer-wrapper (destaque em vermelho), ficando da seguinte forma:

/* Outer-Wrapper
———————————————– */
#outer-wrapper {
  width: 700px;
  margin:0 auto;
  padding:10px;
  text-align:$startSide;
  font: $bodyfont;
  background: #fff;
  }

Ao   visualizar   o template você já pode notar as alterações.

Agora vamos redimensionar (aumentar) também o campo de postagem e a sidebar, para que fique proporcional ao tamanho da outer-wrapper.

Para isso procure pelo trecho em negrito abaixo para localizar o campo de postagem no editor HTML:

#main-wrapper {
  width: 410px;
  float: $startSide;
  word-wrap: break-word;
  overflow: hidden;
  }

Modifique também o valor de width (em vermelho) para 450px.

O mesmo procedimento na sidebar, localize o trecho abaixo (corresponde a sidebar):

#sidebar-wrapper {
  width: 220px;
  float: $endSide;
  word-wrap: break-word;
  overflow: hidden;
}

E modifique o valor de widght para 210px.

O resultado final deve ser semelhante a este:

Concluindo:
Neste post aprendemos apenas como redimensionar elementos do template, aguarde a próxima postagem da série: Como criar um template para blogger. Abraços!