Menu de Páginas Do Blogger Personalizado

Oie Gente hoje vou ensinar como personalizar o menu de páginas do blogger.
Eu tava meio cansada desse menu do blogger ai pesquisando na net achei esse menu...
Veja A imagem (clique para ampliar)
Normal

Hover ( quando passa o mouse)

Então mãos a massa!!!



1º Passo

                                                                                               

A primeira coisa que você tem que fazer é adicionar a gadget de páginas do blogger e colocar  para serem exibidas na lateral.


2º Passo

 Vá em editar Html e cole o seguinte codigo acima da tag ]]></b:skin>

#PageList1 ul {
    list-style: none; /* exclui a bolinha padrão da frente da lista */
    padding: 0;
    margin-left: 70px;
    }
#PageList1 li {
font-family: 'Trebuchet MS', sans-serif;
width: 17%; /* Tamanho do Menu */
float: left;
background: transparent; /* Cor do fundo do Menu */
padding: 8px;
text-align: center;
margin: 2px;
margin-left:10px;
-webkit-border-radius: 0px 0px 0px 0px; /* Pontinhas da Borda - não modifique se quiser o formato igual ao meu */
-webkit-transition-duration: .80s; /* Duração do Efeito - não modifique se quiser o efeito igual ao meu */
font-size: 14pt; /* Tamanho da fonte */
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
transform: rotate(0deg);
}
#PageList1 li:hover {
font-family: 'Trebuchet MS', sans-serif;
width: 17%; /* Tamanho do Menu */
float: left;
background: trasnparent; /* Cor do fundo do Menu */
padding: 8px;
text-align: center;
margin: 2px;
margin-left:10px;
-webkit-transition-duration: .80s; /* Duração do Efeito */
font-size: 14pt; /* Tamanho da fonte */
-webkit-transform: rotate(-30deg);
-moz-transform: rotate(-30deg);
transform: rotate(-30deg);
}

Gostou? Deixe Seu Comentário :)