Criando um cabeçalho de várias formas para seu Blogger

Existem várias maneiras de se criar o cabeçalho de seu Blog ( Header). Você pode usar o próprio sistema do Blogger, que é o mais fácil, e colocar uma imagem no Header, pode fazer um totalmente com flutuações e pode fazer um com posicionamento Relativo e Absoluto.
Qual o melhor? Depende do que você quer ter no seu cabeçalho. No meu caso eu quiz apenas o meu logo, então usei a funcionalidade nativo do Blogger. Simplesmente criei uma imagem de 650px por 100px e coloquei, dei uma mexida no CSS para estilização e pronto.

Onde você vê escrito na imagem, CSS Padrões - CSS Desvendado, está a imagem do meu logo. Caso eu queira muda-la clico em Editar e simplesmente acho a nova imagem no meu micro e está resolvido. Simples assim. A imagem do logotipo é está:

Veja que existe um menu com imagens em cima do meu logotipo, então se quiser um menu com imagens as crie agora, caso queira somente texto também o faça agora e defina que itens irão compor o menu.

Uma coisa que deve ser estudada em menus é se realmente você precisa utilizar uma lista simples para este fim. Você tem que entender o que são elementos de blocos e elementos inline.
Uma breve explicação sobre isso é:

Elementos de blocos são como uma caixa que se expandem tanto na vertical como na horizontal e seu fluxo no documento sempre será na vertical. Exemplo: uma div é criada na página e logo em seguida outra div. No documento uma vai estar em cima e outra abaixo dela. Caso queira que fiquem uma ao lado da outra, terá que flutua-la com o comando float da CSS.

Elementos inline são como linhas que se expandem somente na horizontal e seu fluxo no documento sempre será na horizontal. Exemplo: links criados na página. Se criar vários links, sem estar dentro de uma lista, eles vão aparecer um ao lado do outro porque sua expansão é horizontal. Caso queira que os links fiquem um embaixo do outro, terá que usar uma lista simples ou incluir o comando XHTML de quebra de linha na frente de cada link.

É uma explicação bem simplória, mas de fácil entendimento para continuação do tema.

Então vamos ao que interessa. Se escolheu a minha opção de cabeçalho faça o procedimento inicial citado. Vá no seu editor do blogger em Layout/Elementos de Página na guia Cabeçalho clique em Editar, procure sua imagem de logo no seu micro e Salve.

Agora vá em Layout/Editar HTML e procure o trecho:

#header-wrapper (iremos mexer no CSS do cabeçalho)

Defina o tamanho que foi estipulado do seu cabeçalho exemplo:

#header-wrapper {
width:650px;
margin:0 auto 1px; }

Em margin eu defini que na parte de cima a margem será 0 do lado esquerdo e direito ele deve centralizar automaticamente e embaixo quero uma distância de 1 px.
Os seguintes códigos definem todo o Cabeçalho para meu exemplo caso o usuário desative os estilos via navegador:

#header-inner {
background-position: center; (centraliza a imagem do logo)
margin-left: auto; (margens automaticas)
margin-right: auto;
}

#header {
margin:0; (Zera as margem do elemento pai)
text-align: center; (alinha tudo no centro, usado para corrigir o IE6)
}

#header h1 {
margin:5px 5px 0; (pegua o texto e posiciona no header)
padding:15px 20px .25em; (mesma função de margin)
line-height:1.2em; (Estipula tamanho da linha)
text-transform:uppercase; (Deixa o texto todo em maiúscula)
letter-spacing:.2em; (Cria espaço em cada letra do texto)
}

#header a {
text-decoration:none; (tira o sublinhado do link)
}

#header a:hover {
color:blue; (quando o mouse está sobre o link, muda cor)
}

#header .description {
margin:0 5px 5px;
padding:0 20px 15px;
max-width:660px;
text-transform:uppercase;
letter-spacing:.2em;
line-height: 1.4em;
}

Ufa! Está seria a configuração para meu exemplo, cabe a você agora ir testando qual será a melhor para seu caso.

Bom este cabeçalho está pronto agora só falta colocar o menu acima dele como no meu caso. Para isso teremos que criar uma marcação XHTML no documento e acrescentar uma CSS para estilização deste novo elemento. Isto é simples e fácil. Localize em seu código o trecho:


<div id="header-wrapper">

e crie logo acima dele este código:

<div id='navmenu'>
<a href='http://csspadroes.blogspot.com' rel='nofollow'><img alt='Home' src='http://seubotão.jpg'/></a>
<a href='#'><img alt='Sobre o Autor' src='http://seubotão'/></a>
<a href='#'><img alt='Perguntas e respostas' src='http://seubotão.jpg'/></a>
<a href='http://www.feedburner.com/fb/a/emailverifySubmit?feedId=2216647&amp;loc=en_US' rel='nofollow'><img alt='Feed/RSS' src='http://seubotão.jpg'/></a>
<a href='http://csspadroes.blogspot.com/2008/07/contato.html' rel='nofollow'><img alt='Contato' src='http://seubotão.jpg'/></a>
</div>

Veja que nao criei nenhuma lista simples, apenas criei os links e referenciei as imagens a cada item do menu. Agora preciso apenas dar um estilo ao menu para isso vou no CSS e escrevo este código:

#navmenu {

width:650px;
height:34px;
margin:48px auto 1px auto;
background: url(http://i37.tinypic.com/e654oz.jpg) repeat-x;
}

Defini o tamanho total do menu em 650px por 34px, ajustei as margens e coloquei uma imagem de fundo para dar constraste.
#navmenu img {
margin:3px 1px 0 2px;
}

Aqui neste trecho do código ajustei as margens de cada botão.

Bom para este artigo, acho que temos já bastante coisa para estudar, no próximo faremos uma Header com flutuação.

Até a próxima!
Subscreva o CSS-Desvendado completo!
Subscreva CSS - Desvendado por Email