A carregar...



Tab Menu para o cabeçalho do seu blogger


Já viram que acrescentei um "Tab Menu" no cabeçalho do meu blog.
Para quem queira fazer o mesmo vou passar a descrever os passos que deve executar.




1. Abram o Painel >> Esquema >> Editar HTML.

Localizem, na zona do CSS (entre ) e adicionem o código seguinte.
Um bom sítio para o colocarem é depois de terminada a secção do Header da vossa folha de estilo CSS, mas pode ser noutro local da zona CSS:


/*credits : http://blogger-freetemplates.blogspot.com , HariesDesign.com*/
#tabshori {
float:left;
width:100%;
font-size:13px;
border-bottom:1px solid #2763A5;
line-height:normal;
}
#tabshori ul {
margin:0;
padding:10px 10px 0 50px;
list-style:none;
}
#tabshori li {
display:inline;
margin:0;
padding:0;
}
#tabshori a {
float:left;
background:url("LEFT IMAGE") no-repeat left top;
margin:0;
padding:0 0 0 4px;
text-decoration:none;
}
#tabshori a span {
float:left;
display:block;
background:url("RIGHT IMAGE") no-repeat right top;
padding:5px 14px 4px 4px;
color:#24618E;
}
/* Commented Backslash Hack hides rule from IE5-Mac \*/
#tabshori a span {float:none;}
/* End IE5-Mac hack */
#tabshori a:hover {
background-position:0% -42px;
}
#tabshori a:hover span {
background-position:100% -42px;
}


Grave o seu Esquema.

2. Ainda no seu HTML encontre:


maxwidgets='1' showaddelement='no'>
title='your blog title (Header)' type='Header'/>



e substitua-o por:


maxwidgets='2' showaddelement='yes'>
title='your blog title (Header)' type='Header'/>



Grave o seu Esquema.
Abra a página dos seus "Elementos de Página" do seu Esquema.
Constate que agora tem a opção de adicionar um elemento de página na sua secção de Cabeçalho. É mesmo o que se pretende para podermos adicionar o nosso Tab Menu, que depois pode colocar acima ou abaixo do Cabeçalho.

Clique em Adicionar Elemento de Página e ponha o código seguinte na janela de pop-up que abre, substituindo os meus links pelos seus:





Grave.

Quanto ao código estamos conversados. Vamos agora à parte gráfica:


3. Gráficos / Imagens


Vá a Tab Menu Set 1
ou a Tab Menu Set 2

e veja se lhe agrada algum conjunto.
Em caso afirmativo, faça o download do conjunto / set onde se encontra o Tab Menu que mais gostou, aqui:

Conjunto 1
Conjunto 2

Vai precisar de fazer o upload das imagens que mais gostar para o seu servidor ou para um gratuito qualquer.
Depois desse upload é só substituir LEFT IMAGE e RIGHT IMAGE pelos URLs onde colocou as suas imagens, no código acima.

É tudo.

Se houver alguma dificuldade coloquem a questão nos comentários ou enviem-me um email directo, que eu prometo ajudar.

Boa sorte.












                         


Mensagens relacionadas (por Tags)







6 Comentárioa


Credito pessoal disse...

Só descobri este blog hoje e estou felicissimo. Tem aqui montes de informação que os outros blogs prometem dar e não dão nada. Vou ter que ler bastante e se prepara para responder a algumas duvidas.

luisj disse...

Tudo o que eu puder (e souber) ajudar fá-lo-ei na medida das minhas possibilidades.
Obrigado pelo comentário.

RobertaFrontini disse...

Olá...adorei o teu blog...estou super contente de o ter encontrado....mas aqui, no meu blog, no html não encontro nenhum CSS...o que signigica?
obrigada pela atenção

luisj disse...

Olá Roberta.
Obrigado pelo incentivo.
CSS é aquela parte do código que aparece dentro do cabeçalho (header), antes do body, isto é, é aquela parte do código entre as tags <style> e </style>, e que é responsável pela apresentação do seu blog: cores, tipo de letra, formato dos links, etc., ou seja é a forma do blog, por oposição ao conteúdo, que vem dentro das tags <body></body>.
Abraço.

BRUNA disse...

oi amigo eu gostei muito do seu tutorial.. eu gostaria de saber como se faz um menu.. dotipo atraz do cabeçalho... para eu fazer o desenho do cabeçalho de acordo com menu.. e vertical... obrigada!!

luisj disse...

Bruna,
infelizmente não a posso ajudar porque, não sendo especialista, seria uma tarefa que me consumiria muito tempo, que não tenho.
Normalmente, o que faço neste blog é, a partir de posts que vejo noutros blogs, traduzi-los e/ou adaptá-los.

Enviar um comentário