World Sweet: Menu Grow + Ask

sábado, 12 de janeiro de 2013

Menu Grow + Ask

Boa Tarde!

Na última postagem fiz uma enquete para vocês, meus leitores, escolher o próximo tema do post, o os mais votado foi tutoriais, então estou aqui para atender os pedidos. Como vocês escolheram tutoriais e uma leitora me pediu para mim trazer um tutorial de menu na horizontal, juntei os dois pedidos em um só.

(No próximo post trarei o segundo mais votado que no caso foi Avatares).

O Menu ficara assim:

Uma novidades, resolvi colocar um Ask aqui no blog, porque assim, vocês podem me mandar suas sugestões de post. Conto com vocês, mandem suas sugestões!

Vá até Modelo

Editar HTML

aperte Ctrl + F e procure por: <head> e cole esse código abaixo.

<link href='http://fonts.googleapis.com/css?family=Oregano' rel='stylesheet' type='text/css'/>

Depois, Procure por: ]]</b:skin>

E logo acima cole o código abaixo:

grow {

font-family: 'Oregano', cursive;

font-size: 30px;

display: inline-block;

color: #fff;

margin-top: 25px;

margin-left: 15px;

text-shadow: 0px 0px 3px #fff;

-webkit-transition: all 1s ease-out;

-moz-transition: all 1s ease-out;

-ms-transition: all 1s ease-out;

-o-transition: all 1s ease-out;

transition: all 1s ease-out;

}

grow:hover {

-moz-transform: scale(1.3) rotate(0deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg);

-webkit-transform: scale(1.3) rotate(0deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg);

-o-transform: scale(1.3) rotate(0deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg);

-ms-transform: scale(1.3) rotate(0deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg);

transform: scale(1.3) rotate(0deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg);

text-shadow: 0px 0px 7px #fff;

-webkit-transition: all 1s ease-out;

-moz-transition: all 1s ease-out;

-ms-transition: all 1s ease-out;

-o-transition: all 1s ease-out;

transition: all 1s ease-out;

}

Agora, para usar o menu é só ir em

Layout

Adicionar um Gadget

adicione o gadget HTML/Jasvascript, e cole o código abaixo:

<center>

<div id="box">

<a href="LINK"><grow>Nome</grow></a>

<a href="LINK"><grow>Nome</grow></a>

<a href="LINK"><grow>Nome</grow></a>

<a href="LINK"><grow>Nome</grow></a>

<a href="LINK"><grow>Nome</grow></a>

<a href="LINK"><grow>Nome</grow></a>

</div>

</center>