terça-feira, 17 de julho de 2012

Dica: Personalize o menu do seu blog com efeitos "hover"

clique para ampliar
O menu que irei ensinar é o que está marcado de rosa. Igual a que estou usando aqui no blog  no PH♥. Vale lembrar que não sei se em todos os blogs a formatação é igual ao template que uso. Mas mesmo assim faça o teste :)


Design - Etidar Html - Ctrl+F e procure por:
#header img {
margin-left:auto;
margin-right:auto;
}

abaixo dele cole o seguinte código:
/* Pagelist
-----------------------------------------------*/
#PageList1 {
float:left;
font:12px arial;
margin-top:268px;
margin-left:50px;
width:968px;
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;
}

Algumas observações:

margin-top:268px; - (altura) Com mais número irá abaixar o código
margin-left:50px; - (espaço) Quanto mais números mais a esquerda ele irá

vermelho cores;
roxo tamanho da fonte;
lilás negrito; caso não queira coloque none

Pronto! As demais edições fica com você. Caso sintam muito dificuldade pode me perguntar deixando um comentário :)

Um comentário:

Unknown disse... [Responder comentário]

Teste de comentários♥

PORTFÓLIO PH