Tutorial : Menus

Yeaa!

Olá gente linda ~~feia haushs~~

Hoje decidi fazer um post bem legal ~~pelo menos eu gostei~~

é postar Menus

Para quem não sabe menu, é onde voce coloca as principais coisas de seu blog pra ficar mais facil de os visitantes acharem o que procuram ~~sou uma desgraça explicando as coisas~~

Tem vários tipos, ~~4 :B~~ pra voces, e daqui a pouco eu vou trocar o meu menu, que tá me dando enjoo :P

Muito bem, os tutoriais precisam de atenção, se voce fazer tudo certindo vai dar certo, porque eu fiz e deu!

Para visualizar os menus que eu vou postar hoje, entre aqui

Que lá vai mostrar os menus que vou estar disponibilizando aqui...

Todos os tais, são editavéis, e precisam de HTML e do Gadget HTML/Java Script

Menu 3D

Vá em Modelo(Design) >> Editar HTML >> CTRL + F

E procure por:

]]></b:skin>

Pra quem é novato no blogger ~~Antes de falarem que eu sou novata eu tinha outro blog, então não, não sou!~~ E vai adicionar alguma coisa acima ou abaixo de ]]></b:skin>

Lembre-se de conferir se há um } entre o codigo de cima, se não tiver adicione e cole o seu codigo...

Quando achar, acima dele voce vai colar este código:

/*---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*/

}

Depois de colar, voce vai editar, e salvar, pra quem não conhece o site de mudar as cores, é este aqui e lá voce vai copiar o codigo, exemplo:

#B0C4DE

E colar onde tem códigos parecidos

...Enfim

Depois de editar e salvar, voce vai em Layout e vai adicionar um Gadget : HTML/Java Script

E vai colar este código

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

Aonde esta roxo vai ser o link da pagina, e aonde esta azul, o nome...

Para adicionar mais paginas voce vai repetir este código...

Salva >>Visualize e pronto

Menu by: Pincelando o céu

Menu Desires

Vá em Modelo(Design) >> Editar HTML >> CTRL + F

E procure por:

]]></b:skin>

Quando achar, acima dele, cole este código:

.sidenav a:link, .sidenav a:active, .sidenav a:visited {
width:200px; /* Tamanho dos links */
color:#bea48f; /* Cor dos links */
display: inline-block; /* Modo de exibição */
text-decoration:none; /* Efeitos do texto. Normalmente está desativado. */
font-family:segoe ui light; /* Fonte */
font-size:12px; /* Tamanho da fonte */
padding:2px; /* Margem interna */
padding-left:10px; /* Margem interna */
border-left:10px solid #bea48f; /* Estilo da borda lateral dos links */
margin-top:2px; /* Margem interna */
-webkit-transition-property:color, text; /* Efeito fade */
-webkit-transition-duration: .4s; /* Efeito fade */
-moz-transition-duration: .4s; /* Efeito fade */
-webkit-transition-timing-function: linear, ease-in; /* Efeito fade */
}

.sidenav a:hover {
background-image:url(http://media.tumblr.com/tumblr_lkl75bsU9n1qfamg6.png); /* Mini gif do hover */
background-repeat:no-repeat; /* Repetição do mini gif. Normalmente está desativado. */
background-position:right; /* Posição do mini gif */
border-left:30px solid #bea48f; /* Estilo da borda lateral em hover */
width:180px; /* Tamanho dos links */
color:#e9b3ff; /* Cor dos links em hover */
padding-left:20px; /* Margem interna */
-webkit-transition-duration: .4s; /* Efeito fade */
-moz-transition-duration: .4s; /* Efeito fade */
}

Voce vai editar e tals...

beleza, quando voce terminar de editar voce vai adicionar o gadget HTML/Java Script e colar este código:

</div>

Conforme for seu menu voce diminui ou aumenta as linhas ( <a href="URL 1">LINK 1</a>) E voce vai adicionar o link das paginas e os nomes, salve e visualize...

Tudo ok?

Que bom.

Menu por: Sweet Poison

Menu Flowers

Vá em Modelo(Design) >> Editar HTML >> CTRL + F

E procure por:

]]></b:skin>

Quando achar, acima dele, cole este código:

/* Menu Flowers feito por The Lovers */
uno{
background: #f0f8ff; /* Cor de Fundo */
color: #000000; /* Cor da Fonte */
border-left: 1px solid #6495ed; /* Cor da linha esquerda */
border-top-right-radius: 50px;
border-bottom-right-radius: 50px;
-webkit-transition-duration: .30s;
padding: 6px;
margin: 2px;
font-size: 11px; /* Tamanho da fonte */
text-align: center;
width: 25%; /* Tamanho da fonte */
float: left;
font-family: century gothic; /* Nome da fonte do menu */
}
uno:hover{
background: #fffafa; /* Cor de Fundo ao passar o mouse /*
color: #000000; /* Cor da Fonte ao passar o mouse */
border-left: 1px solid #ffc1c1; /* Cor da linha esquerda ao passar o mouse */
border-top-left-radius: 50px;
border-bottom-left-radius: 50px;
-webkit-transition-duration: .30s;
padding: 6px;
margin: 2px;
font-size: 11px; /* Tamanho da fonte do menu ao passar o mouse */
text-align: center;
width: 25%; /* Tamanho do menu ao passar o mouse */
float: left;
font-family: century gothic; /* Nome da fonte do menu ao passar o mouse */
}

Vá em layout >> Adicionar um gadget >> HTML / Java Script
e cole:

<a href="LINK DA PÁGINA"><uno>NOME DA PÁGINA</uno></a>

Dai voces já sabem... Dependendo o numero de paginas, almenta a repetição
Edita tudo e etc...
Salvar >> fechar >> e VISUALIZAAR *O*

Menu Simple

Vá em Modelo(Design) >> Editar HTML >> CTRL + F

E procure por:

]]></b:skin>

Quando achar, acima dele, cole este código:

   /*---Início do Menu com Efeito by Bomba de Glitter---*/

    bdg {

    font-family: tahoma; /* Fonte do Menu */
    width: 17%; /* Tamanho do Menu */
    float: left;
    background:#8EE5EE; /* Cor do fundo do Menu */
    padding: 5px;
    text-align: center;
    margin: 2px;
    -webkit-border-radius: 9px 0px 9px 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: 08pt; /* Tamanho da fonte */
    color: #fff; /* Cor da fonte */
    }
    bdg:hover {
    font-family: tahoma; /* Fonte do Menu quando passa o mouse */
    width: 17%; /* Tamanho do Menu quando passa o mouse */
    float: left;
    background:#FF69B4; /* Cor do fundo do Menu quando passa o mouse */
    padding: 5px;
    text-align: center;
    margin: 2px;
    -webkit-border-radius: 0px 9px 0px 9px; /* 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: 08pt; /* Tamanho da fonte do Menu quando passa o mouse */
    color: #fff; /* Cor da fonte do Menu quando passa o mouse */
    }
    /*---Fim do Menu com Efeito by Bomba de Glitter---*/

Edite e salve

Vá em Layout>> adicionar um gadget >> HTML /Java Script

E cole:

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

Dai conforme o numero de menu voce aumenta o numero de linhas ^^

Menu by: Bomba de Glitter

Crazy Menu

Pra compensa a demora vou postar mais um menu

Vá em Modelo(Design) >> Editar HTML >> CTRL + F

E procure por:

body {

depois da chave assim } você cola o seguinte código embaixo dela: (embaixo da chave } )

/*** Início Crazy Menu por Bomba De Glitter ***/

sunny { font-family: verdana; width: 23%; text-transform: uppercase; float:left; background-color:#Cor do Fundo; border-left:4px solid #Cor da borda; padding:5px; text-align:center;
-webkit-transition-duration: .90s; font-size: 10px; Color: #Cor da fonte; margin:2px; }
sunny:hover { border-left:1px solid transparent; border-right: 4px solid #Cor da borda; }

/*** Fim Crazy Menu por Bomba de Glitter ***/

Esse já é mais complicado pra edita :/

Se voce não edita aonde esta negrito não dá certo,

Voce vai na tabela de cores, vai pegar o codigo da cor que voce quer e substituir por onde esta escrito em negrito...

Salvar modelo >> Layout >> Adicionar um gadget >> HTML/Java Script

E cole:

<a href="Link"><sunny>Nome do Link</sunny></a>

Não fica legal voce escrever palavras muito grandes, tipo TUTORIAIS num dá pra escreve então substitua por palavras menores tipo, TUTO

Menu by: Bomba de Glitter

Entãao gente! Estou mara que gostem, podem crer que deu trabalho fazer este post kkk, mais vaale a pena,

Bezos

Bruna