Como fazer um layout Parte 4- Menus

Oi Gente!
Agora vamos para uma parte que da um toque com glitter no blog, que é o menu, vou postar aqui três tipos de menus que se chamam: Menu Houver, Menu 3D e o Menu Slow, que é o que eu uso aqui no blog.
Vamos lá?

Menu Houver

Vá em Modelo > Editar HTML > Aperte CTRL+F do seu teclado e procure por ]]></b:skin>, acima dele cole:

bxsg {background: #COR DO FUNDO;width: 20%;text-align: center;font-size: 8px;font-family: FONTE DA SUA LETRA;color: #COR DA LETRA;letter-spacing:1px;padding: 4px;margin: 2px;float: left;-webkit-transition-duration: .90s;}bxsg:hover {background:#COR DO FUNDO EM HOVER;width: 20%;text-align: center;font-size: 8px;font-family: FONTE DA SUA LETRA;color: #COR DA LETRA EM HOVER;letter-spacing:1px;padding: 4px;margin: 2px;float: left;-moz-border-radius: 10px 10px / 10px 10px;border-radius: 10px 10px / 10px 10px;-webkit-transition-duration: .90s;}

Faça as modificações destacadas em vermelho usando a tabela de cores (X).

Salve!

Agora vá em Design>Layout>Adicionar um Gadget>HTML/JavaScript >E cole o código abaixo fazendo as devidas modificações destacadas em vermelho.

                                                              <a href="LINKAQUI"><bxsg>TITULO</bxsg></a>

                                                                                        
                                                                                  Espero que tenham gostado  #Abraços

Esse Tutorial leva Créditos totais ao Barbie Seu Mundo Pink

________________________________________________________________________

Menu 3D

Vá em Desing > Editar HTML > Dê um Crtl+F e pesquise por:

]]></b:skin>

Acima desse código,cole este outro:

/*---Menu de bordas---*/menu {Font-family: verdana; /*Fonte do menu*/float: left;background:#B0C4DE; /* Cor do fundo do Menu */padding: 5px;text-align: center;margin: 2px;width: 22%; /*Tamanho do menu*/-webkit-transition-duration: .90s; /*Quando tempo dura o efeito*/border-bottom: 3px solid #9370DB; /*Borda do menu*/font-size: 11px; /*Tamanho da fonte do menu*/Color: #9370DB; /*Cor da fonte*/-webkit-border-radius: 8px /*Bordas arredondadas*/}menu:hover {Font-family: verdana; /*Fonte do menu quando passa o mouse*/float: left;margin: 2px;background:#9370DB; /* Cor do fundo do Menu quando passa o mouse*/padding: 5px;text-align: center;width: 22%; /*Tamanho do menu quando passa o mouse*/-webkit-transition-duration: .90s; /*Quando tempo dura o efeito quando passa o mouse*/border-bottom: 3px solid #B0C4DE; /*Borda do menu quando passa o mouse*/font-size: 11px; /*Tamanho da fonte do menu quando passa o mouse*/Color: #ffffff; /*Cor da fonte quando passa o mouse*/-webkit-border-radius: 8px /*Bordas arredondadas ao passar o mouse*/}

Lindas,se vocês seguirem as coordenadas dadas ao lado de cada parte do 

código,não tem erro!!Podem usar como dica minha,cores dessa tabela

aqui.

Para colocar o Menu,vá em Layout > Add um Gadget > HTML JavaScript e cole:

<a href="Link"><menu>Nome</menu></a>

Mega fácil né?

Gente,por hoje é só,um beijo bem grande no ♥ de vocês.Fui;]

Créditos: Pincelando o Céu

_____________________________________________________________________________________________

Menu Slow (Aqui do blog!)

1. Vá em Modelo >  Editar HTML e procure por ]]></b:skin>. Acima da tag, cole:

.Slowly {width:210px;}Título {background:#eaeaea;color: #e2c1d2;float:left;padding:5px;text-align:center;width:200px;-webkit-transition-duration: .95s;font: bold 14px tahoma;letter-spacing:3px;border-radius:3px 3px 0px 0px;}Back {background:#eaeaea;float:left;padding:4px;width:202px;-webkit-transition-duration: .95s;border-radius:0px 0px 3px 3px;}Slow {background:#fad0de;color: #ffffff;float:left;width:206px;padding:2px;letter-spacing:2px;text-align:center;-webkit-transition-duration: .45s;font: bold 11px georgia;text-shadow: 2px 1px 2px #909090;}Slow:hover {background:#e2e2e2;-webkit-transition-duration: .50s;text-shadow: 2px 1px 2px #bfabab;}

- Entendendo o código:

Título { refere-se as configurações do título, aquela partezinha cinza do começo.

Back { refere-se aparte cinza de baixo.

Slow { refere-se ao menu em si.

Slow:hover { refere-se ao menu quando passa o mouse.

<center><div class="Slowly"><título>Navegue</título><a href="LINK"><slow>HOME</slow></a><a href="LINK"><slow>TUTORIAL</slow></a><a href="LINK"><slow>SOBRE</slow></a><a href="LINK"><slow>EXTRAS</slow></a><a href="LINK"><slow>QUEM SOMOS</slow></a><a href="LINK"><slow>AGRADECIMENTOS</slow></a><back><p></p></back></div></center>

Após configurar da forma que deseja, adicione um gadget de HTM/JavaScript e nele, cole:

Edite as partes em negrito de acordo com as páginas de seu blog e salve.

Prontinho ! Espero que tenham gostado ^.^

Kisses ♥

Créditos: Death Land