Novo Estilo do Blog - Faça Também no seu

 

Bom, não teve como reparar a mudança no visual do Dicas Plugins & Templates. Até bem pouco tempo eu tinha uma pequena curiosidade sobre como personalizar o cabeçalho do blog para ficar de um lado ao outro do navegador. Eu, realmente, achava que era muito difícil criar esse efeito.

Até que um dia, apareceu o senador..., ou melhor, o Firefox. Diferentemente do Explorer, no Firefox, quando você clica com o botão direito do mause no blog e escolhe "visualizar código-fonte", o código do blog aparece, quase da mesma forma em que aparece no Blogger. Assim, você pode facilmente ver como vários blogueiros personalizaram o visual e estilo dos seus blog.

Bom, mas indo direto ao assunto, resolvi postar aqui essa dica sobre como personalizar o cabeçalho(header), o corpo (body) e o rodapé(footer) do blog nesse novo estilo, que você encontra também no Usuário Complusivo, no Ferramentas Blog, e no próprio Baixaki.

<--- Esperimente fazer no seu: clique com o botão direito do mouse sobre uma área qualquer do seu blog e clique em "visualizar código fonte"; feito isso compare alguns elementos do código fonte que apareceu e o código HTML do sue blog. Viu? Muito parecidos, excetos por algumas personalizações da web, e etc... --->

Fácil! Vamos lá:

Atenção: essa é uma dica para usuários avançados ou que estão migrando para esse nível. Faça os testes em um blog de teste e vá visualizando para deixar ao seu gosto. Depois, sim, implante no seu blog original.

Procure no CSS do seu blog por body e altere o valor que estiver em width por 100% (porcentagem em relação a largura do seu navegador/monitor). Faça o mesmo em wrap, se tiver no seu template.

* Não é necessário expandir modelos de widgets

body {
background: #ffffff;
width: 100%;
color: #333;
font-size: 12px;
font-family: Arial, Tahoma, Verdana;
margin: 0 auto 0;
padding: 0;
}
#wrap {
background: #ffffff;
width: 100%;
padding: 0;
position: relative;
border: 0px solid #333;
}

Veja na imagem abaixo como deverá ficar:

Se seu template tiver a barra de navegação (nav ou navbar), faça o mesmo com ela:

#topnavbar {
background: #ddd;

width: 100%;
height: 60px;
color: #FFF;
margin: 0;
padding: 0;
}

Agora, personalize também, a header:

#header {
background: #000000;
width: 100%;
height: 100px;
color: #FFF;
font-size: 11px;
margin: 0;
padding: 0;
overflow: hidden;
}

Observe como ficou o cabeçalho e a barra de navegação no navegador:

* Aqui deve-se ajustar (no meu caso) a padding da navbar para que os links da barra de navegação começassem num ponto alinhado com a coluna do post.

Continuando: Faça o mesmo com o rodapé (footer):

#footer-wrapper {
color: #FFF;
background-color:#31363E;
text-align: center;
margin:0;
width:100%;
position:relative
}

Se houver Lowersection e Lowerads (que são sidebars no rodapé do blog; aquela com três colunas lá em baixo) no seu blog, faça o mesmo:

#lower-wrapper {
margin: 0;
padding: 0;
width: 100%;
font: normal normal 90% Trebuchet, Trebuchet MS, Arial, sans-serif;
color: #ffffff;
background: #666666;
border-top: 4px solid #cc0000;
}

#lowerads-wrapper {
margin: 0px 0px 0px 0px;
padding: 0px 0px 15px 0px;
width: 100%px;
text-align: center;
background: #666666;
}

Se tiver creditos, faça de igual modo:

#credits {
background: #000000
width: 100%;
height: 30px;
margin: 0;
padding: 0;
text-align: center;
}

Veja como ficou o footer do Dicas Plugins extendido de um lado ao outro do navegador:

Pronto, essas foram as formatações básicas que eu fiz no templates do meu blog. Outras formatações específicas são ajustando paddings para que a barra de ferramentas fique alinhada com a coluna do post, por exemplo.

Vai lá! Divirta-se, e qualquer dúvida pergunte nos comentários.

Posted in: Avançado,Dicas,Dicas Plugins,Tutorial