Tutorial: Menu Tory

Hey!
Atualizei a página de Goodies, na verdade coloquei um menu super lindo que vi no Sweet of Cherry. Além do menu, lá achei também um menu muito lindo e resolvi postar aqui também.


1- Vá em Editar HTML > Ctrl + F e procure por ]]></b:skin> agora acima dessa tag cole:
/* -- Menu Tory - tory-spacetutorials.blogspot.com -- */
st{
text-align: center; /* Alinhamento do Texto */
width: 40%; /* Tamanho da caixa */
padding: 3px; /* Altura */
float: left; /* Posicionamento da caixa */
background: #87CEFF; /* Cor do Fundo */
color: #FF7DB1; /* Cor da Fonte */
border-radius: 0px 0px 0px; /* Bordas Arredondadas */
-webkit-transition-duration: .90s; /* Tempo de transição */
margin: 3px; /* Espaço entre uma caixa e a outra */
}
st:hover {
background: #6CA6CD; /* Cor do Fundo Hover*/
color: #000; /* Cor da Fonte Hover*/
border-radius: 0px 100px 100px 0px; /* Bordas  Arredondadas Hover */
letter-spacing: 3px; /* Espaço entre as Letras */
-webkit-transition-duration: .90s; /* Tempo de transição */
/* -- Fim do Menu Tory - tory-spacetutorials.blogspot.com -- */
As cores originais do menu não são estas, eu mudei, por isso são azuis.
 Mude as partes necessárias, o código é autoexplicativo.


2- Agora vá em um novo Gadget > HTML/JavaScript e cole:
<a href="LINK DA PAGINA"><st>NOME DA PAGINA</st></a>
Mude as partes necessárias, se quiser mais de um link, copie o código e cole novamente ao lado.
Créditos pelos códigos: Sweet of Cherry

Até mais!
 

5 comentários:

  1. Ráh como faz para colocar esse menu,em um gadget Welcome ?
    Qualquer dia ensina a como colocar sabe no Goodbye? aqueles nomes passando nos créeditos? Bjs

    ResponderExcluir
    Respostas
    1. O menu no gadget Welcome é assim: Você monta todo o gadget, com o texto de boas vindas e uma imagem, depois você instala um menu no seu HTML, depois você pega o código do layout, vai naquele gadget Welcome, clica em HTML e cola lá no final. Ensino sim ^^

      Excluir
  2. Eu amo esse menu ele é um dos meus favoritos.

    Sweet of Cherry

    ResponderExcluir
  3. Amei o tutorial Rá no blog ficou muito legal!:)

    ResponderExcluir