3 Tipos de Menu

Vou postar 3 tipos de menus para vcs colocar nos seus blogs...Vamos lá?Então vamos lá ;D Vamos aprender o primeiro menu...

Menu Simples:

O resultado desse menu dará isso:

Primeiro vá em Design depois em Modelo e depois em Editar HTML e aperte em Ctrl+F e escreva dentro da caixinha:

]]></b:skin>

E depois de ter achado a cima desse código: ]]></b:skin> cole esse código abaixo:

/*** MENU SIMPLES extras-placefame.tk ***/
.menusimples {
background-color:#FFB6C1; /*** rosa ***/
float:left;
text-shadow: 1px 1px 0#FF69B4; /***rosa***/
color:#fff; /*** branco ***/
font-variant:small-caps;
width:150px; /*** largura da aba ***/
font-size: 10pt; /*** tamanho da fonte ***/
text-align: center;
margin: 3px;
line-height:25px;
margin-bottom: 1px;
-khtml-opacity: .70;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
}


.menusimples:hover {
background-color:#FF99CC; /*** cor do fundo ***/
float:left;
color: #fff; /*** branco ***/
text-shadow: 1px 1px 0 0#FF69B4; /*** rosa***/
-khtml-opacity: .70;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;

}

Onde estar de verde no código coloque a cor que vc quer da tabela de cores!

Depois disso Salve se estiver tudo certo...Para colocar o menu no blog vai em Design depois em Layout e depois em Adicionar um Gadgets e coloque HTML/JavaScript e depois disso cole o seguinte código:

<div class="menusimples"><a href="LINK_AQUI">TÍTULO_DA_PÁGINA</a></div>

<div class="menusimples"><a href="LINK_AQUI">TÍTULO_DA_PÁGINA</a></div>

<div class="menusimples"><a href="LINK_AQUI">TÍTULO_DA_PÁGINA</a></div>

<div class="menusimples"><a href="LINK_AQUI">TÍTULO_DA_PÁGINA</a></div>

Depois preencha o menu e salve e visualize...

                    

Menu Cute

O resultado desse menu dará isso:

Vá nos seu HTML clique em Prosseguir e apert CRTL+F ou F3 e pesquise por ]]></b:skin> , acima cole o seguinte código:

/*---Início do Menu Mudanças themudancas.tk---*/
menumdc {
font-family: tahoma; /* Fonte do Menu */
width: 17%;
float: left;
background:#FF6AB4; /* Cor do fundo do Menu */
padding: 5px;
text-align: center;
margin: 2px;
-webkit-border-radius: 15px;
-webkit-border-top-left-radius: 0;
-moz-border-radius: 15px;
-moz-border-radius-topleft: 0;
border-radius: 15px;
border-top-left-radius: 0;
-webkit-transition-duration: .80s;
font-size: 08pt;
color: #fff;
}
menumdc:hover {
font-family: tahoma; /* Fonte do Menu quando passa o mouse */
width: 17%;
float: left;
background:#B3C6FA; /* Cor do fundo do Menu quando passa o mouse */
padding: 5px;
text-align: center;
margin: 2px;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
-webkit-transition-duration: .80s;
font-size: 08pt;
color: #fff;
}
/*---Fim do Menu Mudanças themudancas.tk---*/

e para escolher a cor do menu onde estar de vermelho coloque o código da cor da tabela de cores e achar a tabela de cores clique aki e depois de ter escolhido as cores e ter colocado no código a cima salve!

Agr para colocar o menu,vá em Design depois em Layout e depois em Adicionar Gadgets e coloque HTML/JavaScript e depois cole esse código abaixo quantos vc quiser que é a quantidade de menu:

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

e depois preencha o endereço da página onde estar escrito link em negrito e onde estar escrito nome que é azul coloque o nome do menu...E depois salve e visualize!
                                                     

 

Menu Bm
O resultado desse Menu dará isso:

NOME - Descrição do link.

NOME - Descrição do link.

NOME - Descrição do link.

NOME - Descrição do link.

1- Vá em Design -> Editar HTML -> Aperte CTRL+ F ou F3 e pesquise por:

]]></b:skin>

2- Acima de ]]></b:skin> cole o seguinde código:

/*--- MENU BM blogdasmeninasblogueiras.blogspot,com ---*/

#menucute {

background: #FFF5EE;

border-left: 3px solid #FF69B4;

color: #FF6EB4;

font-family: tahoma;

font-size: 11px;

text-align : left;

padding-bottom : 2px;

padding-left : 5px;

margin-bottom: 3px;

-webkit-border-radius: 0px 9px 0px 0px; /* Pontinhas da Borda - não modifique se quiser o formato igual ao bockquete acima */

}

#menucute:hover {

background: #FFFFF0;

border-right: 3px solid #E066FF;

color: #E066FF;

font-family: tahoma;

font-size: 11px;

text-align : right;

padding-bottom : 2px;

padding-right : 5px;

margin-bottom: 3px;

-webkit-border-radius: 0px 0px 0px 9px; /* Pontinhas da Borda - não modifique se quiser o formato igual ao bockquete acima */

}
/*---Fim do Menu BM---*/

Para mudar as cores use esta tabela.
Para usar o menu coloque este código onde você quer que apareça:
<div id="menucute">
<a href="Coloque o link aqui" title="Descrição ao passar o mouse">Nome</a>- Descrição do link</div

 

Créditos ao amizadedemenina...