Menu no Cabeçalho do Blog 2

Image Detail
Foto: [http://images.search.yahoo.com/]

Esse tutorial é para você que quer um menu igual ao nosso (sobre o cabeçalho) com efeito hover. É muito fácil e eu aprendi ele lá no Trechy Teen!



TUTORIAL


Vá em Design > Editar HTML

Ctrl + F:

.Header .description {
font-size: 130%;
}
Depois dessa chave (}) você adiciona esse código:


/* Pagelist
-----------------------------------------------*/
#PageList1 {
float:left;
font:14px arial;
margin-top:268px;
margin-left:200px;
width:700px;
color:#FF8C00;
}
.PageList li a {
color:#ffffff;
font-weight:bold;
padding:10px 10px;
text-shadow:0 1px 0 ;
}
.PageList li a:hover{
color:#8B5C8E;
font-weight:bold;
text-shadow:0 1px 0 ;
text-decoration:none;
}
.crosscol .PageList li, .footer .PageList li {
background:none repeat scroll 0 0 transparent;
float:left;
list-style:none outside none;
margin:0;
padding:10px 0;
}
.PageList li.selected a {
color:#C71585;
font-weight:bold;
text-decoration:none;
}
.PageList li.selected a:hover {
color:#FFF8DC;
font-weight:bold;
text-decoration:none;
}


EDITANDO:



margin-top: 268px; (Margem do topo. Coloque números negativos para subir)
margin-left: 200px; (Margem lateral. Aumente ou diminua)
width:700px; (Tamanho do menu. Aumente se possuir muitas páginas)
#CORES: Edite suas cores de acordo com os tópicos (a:hover= Cor com o mouse por cima; selected a= Texto selecionado;)

Por último, vá em Design do Modelo e em Plano De Fundo Das Guias. Deixe tudo transparente. Gostou? Créditos: Trechy Teen.