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:

Home

Livros/Discos
Twitter 
Expansíveis
Artigos
Adsense

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.

Tags: Tab Menu, blogger, blogger hacks, blogger tweaks, recursos blogger

                         

Mensagens relacionadas (por Tags)