A última postagem que explica algumas noções básicas que devemos ter para editar um layout. Neste post irá demonstrar como editar o footer do seu blog e tudo o que você precisa saber para que não apareça nenhum erro.

Lembrando que todos os tutoriais postados aqui usam como base o Template Mínima, para baixá-lo basta clicar aqui.

O código do Footer, assim como o Header, fica localizado dentro Outer-Wrapper, sendo assim o tamanho definido será o mesmo que o deste seletor. Por exemplo:


A parte em cinza na imagem representa o Outer-Wrapper do seu layout, se em suas propriedades você irá definir uma largura x, portanto todos os outros elementos dentro da areá cinza não poderão ultrapassar a largura definida. Logo, o Footer ficará no centro do layout ocupando o espaço após a área da postagem e a sidebar.

Se você quiser que o Footer ocupe a largura total da página, você deverá fazer as seguintes alterações:

1. Localize as linhas:

<div id='footer-wrapper'>
      <b:section class='footer' id='footer'/>
 </div>

2. Em seguida, note que logo após aparece a linha:

</div></div><!-- end outer-wrapper -->

Isso identifica o final do código que pertence a área cinza da Imagem, o Outer-Wrapper.

3. Agora basta mudar o local do footer. Copie as linhas do passo 1 e inserir após as linhas do passo 2. Veja:


Feito isso, você poderá alterar a vontade a largura do seu Footer sem depender de outro elemento dentro do layout.

Simples não é? Os próximos tutoriais serão bem mais específicos agora que já foram apresentados a parte básica. Se você quiser ver algum tutorial por aqui entre na página de contato do blog e sugira um tema. :)