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

6 de dezembro de 2008

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

10 comentários:

Sylvio Carlos Galvão disse...

Amigo, não entendo nada disso, ams certamente seu texto vai me ajudar muito. Vlw..abraço

Marcelo R. Souza disse...

@Sylvio Carlos...
Escrevi de forma bem simples para isso mesmo, pessoas que não entendem nada do assunto possam mexer em seus blogs de forma mais apurada e detalhista. Fico feliz que tenha ajudado.
Abraços!

Darcy Mendes disse...

Olá Marcelo,
No meu template anterior eu coloquei um menu horizontal. Mas depois que troque de template não consegui colocar outro menu. Você tem alguma sugestão de menu horizontal?

Abraços

Marcelo R. Souza disse...

Geralmente quando trocamos de templates isso acontece, pois o novo template não está com um menu horizontal configurado.

Anônimo disse...

Marcelo, estou adorando suas explicações, claras e objetivas.
Entendo quase nada de Blog e com o que encontrei aqui, dá pra ter uma idéia legal.
Obrigada :)

Margot

Marcelo R. Souza disse...

Margot...
Fico feliz que esteja apreciado e aprendendo, pois minha intenção sempre foi essa.

Obrigado!

Misto-X disse...

Marcelo,
criei o menu e deu quase tudo certo: nao sei porque os links estao com sublinhado, tentei tirar no css (text-decoration none) mas nao consegui[o estranho é q no IE 6 nao aparece o sublinhado] e a imagem de fundo está ficando sobreposta ao texto do menu.
como é muito difícil pra mim criar um template a partir do zero, eu tinha usado um modelo pronto do blog (Stretch denin)e lá nao tem o outer-wraper no css. será q é isso?
Alguma ideia?
se quiser visitar o blog de teste: jieteste.blogspot.com

Marcelo R. Souza disse...

@Misto-X
Adoraria te ajudar mas no momento estou escrevendo esta resposta de uma lan house pois estou mudando de casa. Sim, consegui a casa própria e sabe como é... pintura, parede aqui, pinta portão e o mais importante a mudança de endereço para o speed é um grande problema. Pedi a transferência da conexão faz 2 semanas e até agora nada.
Espero poder semana que vem voltar a atividade.

santos disse...

ola marcelo

excente post ajudou-me imenso, obrigado

Seu nome publicou um post sobre.. o que verificar no carro antes de comprar

۩۞۩ ₢.®.J۩۞۩ ☻ ۩۞۩®od®igo۩۞۩ disse...

Ola marcelo.

o logotipo do meu blog encontrasse no topo à esquerda, e estou querendo colocar ele no meio, mas quando tento usar seus codigos ateh que funciona, mas a imagem do templast fica reduzida somente no tamanho da figura.
Posso mandar o link do meu blog:
http://adolecert.blogspot.com/
E o link do blog cobaia (onde testei seu códigos):
http://downecomentall.blogspot.com/

No blog cobaia esta sendo usado seu código, tentei ajeitar, mas nada adiantou e resolvi deixar com seus codigos para poder resposder com mais claresa.

Seria possivel responder esse comentario atravez do e-mail: adolecert@gmail.com??

Obrigado desde já!!!

Postar um comentário

Faça seu comentário ou sua pergunta. Quando for possível postarei a resposta.
Obrigado!
Para deixar o link da sua última postagem coloque este código:

<em><strong>Seu nome</strong> publicou um post sobre.. <a href="seu link do último post">Título do Post</a></em>

Ficará assim:
Marcelo publicou um post sobre.. Alguma coisa