Fazendo seu template – Parte 3 – Adicionando um Menu Horizontal

Antes de mais nada, quero pedir desculpas mais uma vez, estou meio ausente do blog e principalmente do Twitter, problemas pessoais e escola. Paciência. =/



Agora vamos continuar com mais uma parte da nossa seria “Fazendo seu Template”. É hora de adicionarmos um menu superior no template, isso ajuda muito na navegação interna de seu blog. Os leitores agradecem...



1º – Entre em “Layout” -> “Editar HTML”.



2º – Procure (Ctrl + f):

<div id='header-wrapper'>

</div>

Adicione logo depois:

<div id='front_menu'>

<li><a class='s' href='URL DO SEU BLOG' title='Início'><span>Início</span></a></li>

<li><a class='s' href='#' title='Sobre'><span>Sobre</span></a></li>

<li><a class='s' href='#' title='Vídeos'><span>Vídeos</span></a></li>

<li><a class='s' href='#' title='Contato'><span>Contato</span></a></li>

</div>

Isso que você acabou de adicionar é o menu, vamos editar o conteúdo do menu e depois aplicar os estilos.



É bem simples configurar, troque URL DO SEU BLOG pelo link do seu blog.

As outras opções é só trocar # pelo link e os nomes (Sobre, Vídeos, Contato...) substitua por aquilo que você quiser nomear.



Se você não quiser alguma das opções é só apagar de <li> a </li>. E para adicionar mais uma opção, é só duplicar uma das opções e editar o conteúdo.



3º – Vamos colocar o estilo do menu. Procure (Ctrl + f): ]]></b:skin>



Adicione ANTES desse código, o seguinte CSS:

#front_menu {

float:left;

overflow:hidden;

position:relative;

text-transform:uppercase;

width: 100%;

background: #c1c1c1;

}

#front_menu li {

float:left;

padding: 5px;

list-style-image:none;

list-style-position:outside;

list-style-type:none;

margin-right:4px;

}

* html #front_menu li {

display:inline;

}

#front_menu li a {

background:transparent;

color:#0960a3;

cursor:pointer;

display:block;

font-family:Arial,Helvetica,sans-serif;

font-size: 12px;

font-size-adjust:none;

font-stretch:normal;

font-style:normal;

font-variant:normal;

font-weight:700;

line-height:26px;

padding-left:15px;

text-decoration:none;

}

#front_menu li a span {

background:transparent ;

display:block;

line-height:24px;

padding-right:15px;

}

#front_menu a {}

#front_menu a:hover{

color: #489ddf;

background-position:left bottom;

}

#front_menu li a.s {

background-position:left bottom;

}

#front_menu li a:hover span, #front_menu li a.s span {

background-position:right bottom;

}

No estilo: #front_menu { você vai editar o fundo do menu, no lugar de background adicione o código da cor desejada, ou adicione uma imagem. Para substituir a cor por uma imagem use:

background: CÓDIGO COR url() no-repeat;

ou

background: url() repeat;

Leia mais sobre como colocar uma imagem com CSS clicando aqui.



No estilo: #front_menu li a { faça as mudanças nas letras, cores, tudo sobre a parte escrita do menu.

Lembrando:

color:#0960a3; é a cor da letra.



As outras mudanças depende do gosto de cada um, seja curioso, apague, modifique e aprenda o que cada coisa significa.



Apos fazer as modificações, teste e salve.



Obs.: Você pode adicionar outro tipo de menu, existe vários e vários sites que trabalham só com menu CSS, procure no Google por "Menu CSS". Se quiser uma dica: CSS Menu Maker, um ótimo gerador de menu. Lembre-se de hospedar as imagens do menu e substituir onde necessário no CSS do menu.