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 */
}
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 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:
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 ***/
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
OMG, eu AMEI, já coloquei o meu..rawr!
ResponderExcluirbeijooooooos
kkkk cheguei em casa e eu vou postar maaiiis kkk
Excluir