Pedido: Menu hover no blog!

~Quem quer?

Oi pessoas! : )

Hoje, entrei no meu computador sem esperanças de que este blog seria legal e útil a vocês. Mas, de repente, quando abro a NOSSA ASK, me deparo com elogios, sugestões de tutoriais, muita coisa. Não tive tempo de responder todas as perguntas, mas vou responder sim! *--*

Se você também quer um tutorial que a gente faça, pode pedir na nossa ask! E se você tem um tutorial pronto, e quer e a gente te divulgue aqui, pode também pedir sem medo!

Me pediram por lá, para postar um menu hover, para ser utilizado no blog. A pessoa não especificou direito, o tipo de menu, se era de navegação, de tag, para links... Então postarei um menu de navegação, tipo "Home, About, Links", essas coisas.

Veja o menu: PREVIEW

Lindo né? Quer aprender? Clica no botãozinho mágico aí em baixo!

O nome deste menu, é Menu Bubbles. Se você visualizou, deve saber o porquê.

Para você que não sabe nada de HTML, ou CSS, leia:

CSS é estilo que você deve aplicar, para que as coisas do seu blog/site funcione. É como a "base da maquiagem", a massa do bolo, o Wafer do biscoito. Entenderam? É uma parte que dá funcionalidade a tudo do blog.

HTML, é a onde você deve aplicar estes estilos em CSS. É como "sombra" da maquiagem, o recheio do bolo, e o recheio do biscoito! É simples. Estou dando estes exemplos ridículos, para que vocês realmente vejam, que os dois trabalham juntos! 

Bom. o CSS do blogger, se encontra nitidamente acima da tag ]]></b:skin>.

Acima dela é TODO o seu código CSS, ou seja, todo seus estilos.

Depois de ]]></b:skin>,vem todo seu HTML.

Pronto! Agora você já sabe onde aplicar seus códigos.

Então quando eu dizer pra por o seu código no CSS, você vai por acima de ]]></b:skin>, e no HTML, vou te dar as instruções de onde por.

Bom, então, coloquem o código a seguir, NO SEU CSS!

*Não se assustem com o tamanho, são pequenas coisas que você vai mudar.

.button{
font:15px Calibri, Arial, sans-serif;
/* Sombra semi-transparente do texto */
text-shadow:1px 1px 0 rgba(255,255,255,0.4);
text-decoration:none !important;
white-space:nowrap;
display:inline-block;
vertical-align:baseline;
position:relative;
cursor:pointer;
padding:10px 20px;
background-repeat:no-repeat;
/* Configurações de background */
background-position:bottom left;
background-image:url('http://static.tumblr.com/amm1lw6/PAOmhhsr7/button_bg.png');
background-position:bottom left, top right, 0 0, 0 0;
background-clip:border-box;
/* Borda */
-moz-border-radius:8px;
-webkit-border-radius:8px;
border-radius:8px;
/* sombra do menu */
-moz-box-shadow:0 0 1px #fff inset;
-webkit-box-shadow:0 0 1px #fff inset;
box-shadow:0 0 1px #fff inset;
/* efeito do background */
-webkit-transition:background-position 1s;
-moz-transition:background-position 1s;
transition:background-position 1s;
}
.button:hover{
background-position:top left;
background-position:top left, bottom right, 0 0, 0 0;
}
.button:active{
bottom:-1px;
}
/* tamanhos dos botoões, assim como na preview tem 3 tamanhos, configure como quiser */
.button.grande { font-size:30px;}
.button.medio { font-size:18px;}
.button.pequeno { font-size:13px;}
/* botão arredondado */
.button.rounded{
-moz-border-radius:4em;
-webkit-border-radius:4em;
border-radius:4em;
}
/* agora configuramos a cor dos botoões */
/* exemplo azul */
.blue.button{
color:#4470ae !important; /*cor do link do botão*/
border:1px solid #a5c3ed !important;
/* cor do fundo */
background-color: #a5c3ed;
/* para funcionar em todos os navegadores, fundo de bolinhas antesde passar o mouse */
background-image:url('http://static.tumblr.com/amm1lw6/PAOmhhsr7/button_bg.png'), url('http://static.tumblr.com/amm1lw6/PAOmhhsr7/button_bg.png'),
-moz-radial-gradient( center bottom, circle,rgba(165,195,237,1) 0,rgba(165,195,237,0) 100px), /* troque aqui a cor do centro do botão, em RGB*/
-moz-linear-gradient(#b1cdf4, #a5c3ed); /*troque a cor do gradient das bordas aqui*/
background-image: url('http://static.tumblr.com/amm1lw6/PAOmhhsr7/button_bg.png'), url('http://static.tumblr.com/amm1lw6/PAOmhhsr7/button_bg.png'),
-webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, from(rgba(165,195,237,1)), to(rgba(165,195,237,0))), /* troque aqui a cor do centro do botão (hover), em RGB*/
-webkit-gradient(linear, 0% 0%, 0% 100%, from(#b1cdf4), to(#a5c3ed)); /*troque a cor do gradient aqui, coloque o mesmo do acima*/
}
/* hover do botão */
.blue.button:hover{
background-color:#a5c3ed;
background-image: url('http://static.tumblr.com/amm1lw6/PAOmhhsr7/button_bg.png'), url('http://static.tumblr.com/amm1lw6/PAOmhhsr7/button_bg.png'),
-moz-radial-gradient( center bottom, circle, rgba(165,195,237,1) 0,rgba(165,195,237,0) 100px), /* troque aqui a cor do centro do botão (hover), em RGB*/
-moz-linear-gradient(#b1cdf4, #a5c3ed); /*troque a cor do gradient das bordas aqui*/
background-image: url('http://static.tumblr.com/amm1lw6/PAOmhhsr7/button_bg.png'), url('http://static.tumblr.com/amm1lw6/PAOmhhsr7/button_bg.png'),
-webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100,from(rgba(165,195,237,1)), to(rgba(165,195,237,0))), /* troque aqui a cor do centro do botão (hover), em RGB*/
-webkit-gradient(linear, 0% 0%, 0% 100%, from(#b1cdf4), to(#a5c3ed)); /*troque a cor do gradient das bordas aqui*/
}

Bom, repare nos códigos em negrito. Clique neles. Viram a imagem? Vá até seu Photoshop(photofilte ou outro editor de imagem de sua preferência) e escolha sua cor. Repare na imagem onde ficam as definições de RGB. Copie estes numeros, são suas cores. Mude de acordo com seu gosto. É fácil, não tenha preguiça.

Agora, para adicionar seu botão, faça assim:

Se você quiser o botão grande, adicione o código abaixo num gadget HTML/Javacript:

<div style=”width: largurapx; height: alturapx”><a href=”#LINK” class=”button grande blue”>Titulo</a>

Se você quiser o botão médio, adicione este:

<div style=”width: largurapx; height: alturapx”><a href=”#LINK” class=”button blue medio”>Titulo</a>

Se você quer o botão pequeno, adicione este:

<div style=”width: largurapx; height: alturapx”><a href=”#LINK” class=”button pequeno blue”>Titulo</a>

 Se você quer o botão redondinho, adicione este:

<div style=”width: largurapx; height: alturapx”><a href=”#LINK” class=”button pequeno blue rounded”>Titulo</a> 

UFA!! Demorou mas o resultado é lindo! O Código é realmente extenso, mas é pouquíssimas coisas que você precisa mudar. Para adicionar mais menus, multiplique o último código!

É ''só'' isso! 

Espero que gostem! Não deixem de seguir o blog!

Beijos. 

Thank's 

Quantity : Por no Carrinho