Como criar um template no blogger – 2º Parte – Aparência

No artigo passado vimos como redimensionar todo o template, neste post você vai aprender a dar cor e estilo aos elementos que constitui o template.

Retirando a Navbar:
Ao construir meus templates sempre costumo retirar a navbar padrão do blogger, particularmente eu não acho muito legal, se você pensa assim também e quer retirar a navbar, basta seguir este tutorial.

Criando um novo cabeçalho:
Vamos começar modificando o cabeçalho do blog, o que vamos fazer é apenas acrescentar uma imagem no lugar do texto (título); Para isso procure por:  #header-inner – apague-o e delete também os trechos abaixo até: #header img

Como você pode notar sobrou apenas o header-wrapper o trecho principal, vamos acrescentar a ele altura (height), e alterar a largura (width) e fundo (imagem do header). Crie uma imagem em qualquer editor de imagens e veja qual o tamanho da largura e altura, logo após vamos adicionar os tamanhos ao header-wrapper:

#header-wrapper {
  width:700px;
  height: 120px;
  margin:0 auto 10px;
  background: url(link_da_imagem) no-repeat; 

  border:1px solid $bordercolor; – APAGUE ESTA PARTE

  }

width: –  Modifique o valor em width para o mesmo valor da largura da outer-wrapper (largura total do template).
height: acrescente a altura que a imagem possuir, no meu caso foi de 120px;
background: substitua o link_da_imagem pela URL do cabeçalho hospedado

Seu template deve estar parecido com a imagem abaixo:

(clique para ampliar)

Você pode perceber que ainda restou o título e a descrição, já que só retiramos o CSS, para resolver isto procure por:

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

E delete todo o trecho em vermelho. Seu header está pronto, faça suas alterações próprias para chegar a um resultado desejado.

Alterando a coluna (sidebar):
Você já deve ter alterado o título e as cores no fontes e cores certo? Vamos apenas adicionar alguns elementos para organizar melhor os marcadores e links.

Procure no template Mínima por: /* Sidebar Content
Todas as linhas contidas nesta parte é referente a textos e links na sidebar, portanto, vamos adicionar um pequeno ícone a frente dos marcadores (conhecido como bullets) e linhas abaixo dos links.

Localize logo abaixo da sidebar content o trecho abaixo:

.sidebar li {
  margin:0;
  padding-top:0;
  padding-$endSide:0;
  padding-bottom:.25em;
  padding-$startSide:15px;
  text-indent:-15px;
  line-height:1.5em;
  }

Substitua a parte destacada em vermelho acima por:

.sidebar li {
line-height:1.4em;
border-bottom:1px solid #e9e9e9;
padding:0 0 0 20px;
background:url(http://2.bp.blogspot.com/_kRiGysx6lag/S42fJhoPW7I/AAAAAAAAAqM/8iMlpRwzUE0/s1600/bullet_go.png) no-repeat;
  }

Resultado:

(clique para ampliar)

Então é basicamente este o principio para criação de temas para o blogger, não há segredo nenhum, basta ter muita criatividade e o seu projeto vai sair do jeitinho que você imaginou.