sexta-feira, 29 de junho de 2012

Tutoriais Blogger - Elementos de Cabeçalho




Elementos de cabeçalho


            O cabeçalho corresponde ao topo do blog. É onde costuma aparecer o título, além de outros elementos, como gadget redes sociais, tradutor, caixa de busca, banner de anúncio e tantos quantos a criatividade do administrador permitir.
            Para podermos manipular esta área não menos importante do blog, devemos nos familiarizar com os elementos que fazem ou podem fazer parte do cabeçalho.
            São eles:


#HEADER – corresponde ao cabeçalho propriamente dito, onde vão o título, banner, caixa de busca etc.
Exemplo de Código:

#header{
     width:970px;
     margin:0 auto;
     overflow:hidden;
     min-height:115px;
     height: auto !important; /* IE6 Min height hack */
     height: 115px; 
}

Acima temos as definições da largura (width) e altura (height) do nosso cabeçalho. Vale ressaltar o atributo overflow:hidden. Ele define que o conteúdo interno (título, banner etc.) que ultrapassar a área especificada (115x970 pixels) ficará “escondido”.
Para entender melhor o funcionamento do atributo, observe as ilustrações abaixo:


#HEADER-RIGHT – corresponde a coluna direita, no caso de dividirmos o cabeçalho em colunas.
Exemplo de Código:

<div id='header-right' style='width:50%;
height:50px;float: right; margin:0;’>
<ul>
<b:section class='header-right' id='header-right' preferred='yes' style='float:right;'>
<b:widget id='PageList1' locked='false' title='Pages' type='PageList'>
<b:includable id='main'>
<b:loop values='data:links' var='link'>
<li><a expr:href='data:link.href'><data:link.title/></a></li>
</b:loop>
</b:includable>
</b:widget>
</b:section>
</ul>
</div>
<div style='clear:both;'/>
</div>

O exemplo acima consta do código deste blog. Dividi o cabeçalho em duas colunas, para que o menu de páginas estáticas (PageList1) fosse exibido no canto superior direito.
Vale ressaltar que, na plataforma do Blogger – não sei em relação às outras – cada elemento tem de estar numa seção (section) determinada. Caso você adicionar mais de um elemento numa mesma seção e for salvar o código, o Blogger retornará uma mensagem de erro.


#HEADER-WRAPPER – corresponde a toda a área do cabeçalho. Geralmente é utilizado quando a área do cabeçalho é sobreposta a um plano de fundo, como é o caso do blog Canto da Guita [link].

Exemplo de Código:

TRECHO EM CSS
#header-wrapper{
width:980px;
margin:0px auto 0px;
height:200px;
margin-top:0px;
overflow:hidden;
}

TRECHO EM HTML
<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true'
title='Canto da Guita (Cabeçalho)' type='Header'>
<b:includable id='title'>
<a expr:href='data:blog.homepageUrl'><data:title/></a>
</b:includable>
<b:includable id='description'>
<div class='descriptionwrapper'>
<p class='description'><span><data:description/></span></p>  </div>

#HEADER-INNER – mesma função de header-wrapper.

#HEADER.DESCRIPTION – corresponde à descrição do blog. Geralmente fica abaixo do título.
Exemplo de Código:

#header.description{
padding-left:10px;
color:#F4DEC7;
font-size:12px;
padding-top:0px;
margin-top:0px;
text-shadow:1px 1px 0 #000000;
}

Aqui observamos o uso do atributo text-shadow, que aplica o efeito de sombreado no texto. A sintaxe é a mesma de box-shadow, este aplicado sobre bordas e imagens.

#HEADER H1 – corresponde ao título do blog, que aparece no topo do cabeçalho.
Exemplo de Código:

#header h1 a,#header h1 a:visited{
color:#fff;
text-decoration:none
}

O atributo text-decoration:none desabilita o sublinhado do link. Para exibir o link com sublinhado, usamos text-decoration:underline.
O link é ativado pelo atributo <a>(âncora), colocado após h1 no código acima.

Podemos ainda especificar elementos header para as demais tags de cabeçalho (h2,h3,h4,h5 e h6), conforme o exemplo abaixo:

#header h2{
padding-left:15px;
color:#F4DEC7;
font:12px Arial,Helvetica,Sans-serif
}

O exemplo acima foi utilizado para definir o estilo dos títulos de gadgets da barra lateral do blog Canto da Guita.

Bom, por enquanto é isso, galera. Espero que as informações postadas aqui possam te esclarecer um pouco mais sobre o assunto.

Um abraço e até mais!


Related Posts Plugin for WordPress, Blogger...

Nenhum comentário:

Postar um comentário

Se você gostou deste artigo poste um comentário!

Observações:
1º) Somente usuários com conta no Google poderão publicar seus comentários aqui no Blog do SM@rtiN.
2º) Todos os comentários serão avaliados pelo administrador do blog para posterior publicação.
3º) Os textos com conteúdo impróprio, ofensas e palavrões serão automaticamente excluídos. Se houver reincidência, o acesso do usuário ao blog será bloqueado.

Obrigado!