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 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 class="sidenav">
<a href="
URL 1">
LINK 1</a>
<a href="
URL 2">
LINK 2</a>
<a href="
URL 3">
LINK 3</a>
<a href="
URL 4">
LINK 4</a>
<a href="
URL 5">
LINK 5</a>
<a href="URL 6">LINK 6</a>
</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 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 ^^
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
Entãao gente! Estou mara que gostem, podem crer que deu trabalho fazer este post kkk, mais vaale a pena,
Bezos
Bruna
♥ Postado por
