Follow Us @soratemplates

segunda-feira, 15 de outubro de 2012

Sweet Menu

 Olá! Todos estão bem? Eu espero que sim ^-^
Aproveito para desejar um feliz dia aos Professores! Eu sinto saudades dos meus, apesar de ainda manter contato com alguns; nunca tive problemas com meus mestres, ao contrário, procurei ser amiga deles e eles retribuiram da mesma forma. Tem sempre aquele mais especial que a gente não esquece, e no meu caso, um dos professores que tive e que mais gostei foi o de Matemática, na 8ª série (nono ano hoje?), que posteriormente me deu aula de Estatística e Matemática Financeira na faculdade :3 Ele é daqueles professores mais liberais, mas que impõe disciplina ao mesmo tempo e aprendi muito com ele. Também recordo dos que me fizeram amar história, viajar pela literatura, entender como ser líder em uma empresa e sobreviver sem desmaios às aulas de Anatomia na 7ª série rsrs.... Minha mãe é professora, mas não exerce a profissão, e ama Português, ou seja, escrever nunca foi problema para mim graças aos conselhos dela :D Inclusive ela sempre analisa o blog, verifica onde errei ou acertei e dá a maior força para que eu siga em frente. Um grande obrigado a todos!!!
Bom, deixa eu bancar a professorinha agora rsrsrs...e hoje a tia vai ensinar como fazer aquele menu ali da sidebar, que desliza quando você passa o mouse nele. Eu o encontrei em um template cuja a autoria é atribuída a Aimad <= Creditando
Achei interessante porque muda de acordo com o local em que você coloca, ou seja, pode funcionar como menu horizontal, se você adicioná-lo acima das postagens por exemplo, ou vertical, se adicioná-lo à sidebar como eu fiz. Também pode ficar bem colorido, ou com duas cores...você define tudo!!!
Para adicioná-lo ao seu blog, acesse Modelo - Editar HTML, e acrescente esse código acima de ]]></:bskin>:
.sweetmenu {
margin:10px;
letter-spacing:1px;
-webkit-transition: all 0.2s ease-out;
-moz-transition: all 0.2s ease-out;
transition: all 0.2s ease-out;
margin:1px;
cursor:pointer;
text-transform:uppercase;
display:inline-block;
font:12px tt;/*tamanho da fonte */
font-family: verdana; /* tipo da fonte */
text-align:center; /* alinhamento do texto */
background: #fff; /* background visivel */
width:100px; /* largura */
color:#a1a1a1; /* cor do texto */
padding:2px;
border:1px solid #fee; /* borda e cor da borda */
border-left:20px solid #fee; /* borda e cor da borda esquerda */
text-decoration:none;
}
.sweetmenu:hover{/* efeitos para quando passar o mouse */
border-left:1px solid #fee;
border:1px solid #a1a1a1;
border-right:20px solid #fee;
}
Visualize e se não houver problemas, salve. Você ainda não vai ver o menu. Para que o ele apareça, cole o código abaixo em um novo gadget HTML/JavaScript ou em qualquer lugar que aceite HTML:
<span class="sweetmenu" onmouseover="this.style.background='#000'" onmouseout="this.style.background='white'"><a href="link">NOME DO LINK</a></span>

<span class="sweetmenu" onmouseover="this.style.background='#000'" onmouseout="this.style.background='white'"><a href="link">NOME DO LINK</a></span>

<span class="sweetmenu" onmouseover="this.style.background='#000'" onmouseout="this.style.background='white'"><a href="link">NOME DO LINK</a></span>
Substitua o que está em vermelho pelo código de uma cor e altere os links com seus respectivos nomes ^-^
Espero que gostem e beijinhus...

17 comentários:

  1. Que gracinha,muito fofo! eu adoro menus rsrs' não sei o motivo kk deve ser as cores,sei lá

    go-garotaonline.blogspot.com

    ResponderExcluir
  2. Esse menu é bem fofinho, e é otimo para mim que troco de menú a cada layout.bjs
    no-planetaroom

    ResponderExcluir
  3. Muito kawaii!!! Eu adoro menus criativos, e esse é um deles!!!
    Beijinhos!!! :)))

    ResponderExcluir
  4. Muito útil!!!! Seu blog é muito perfeito, eu amo!!!

    Beijos! :D

    ResponderExcluir
  5. Muito obrigada meninas ^^
    Beijus <3

    ResponderExcluir
    Respostas
    1. Mt kawaii *-* Coloquei no meu e ficou otimo xD

      Excluir
    2. Fico feliz que tenha gostado ^^
      Beijus...

      Excluir
  6. como faz para ficar que nem o seu? eu não estou conseguindo :(

    ResponderExcluir
    Respostas
    1. Oi :) Ele já está igual ao meu, só acrescentar os códigos das cores no último código.
      Beijus...

      Excluir
  7. Ai que lindo esse tutorial!Meu menuzinho ficou mais que perfeito...ontem aprendi a mecher com HTML e estou conseguindo fazer coisas maravilhosas em meu blog,muuito obg,estou pegando todos os tutoriais pra fazer um layout no meu blog!!http://rebeldiabr.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. Que bom ^^ Fico feliz em poder ajudar um pouquinho.
      Beijus e obrigada!!

      Excluir
  8. Ele também vem no nyanpire cat template ^.^. Como faço para ativá-lo ? .

    ResponderExcluir
    Respostas
    1. Bom, vá até o HTML do template e encontre isso:
      .deslizando
      Aparece duas vezes; mude nas duas vezes que encontrar para:
      .sweetmenu
      E aí onde quiser que apareça o menu cole o segundo código do post, editando ao seu gosto ^^

      Excluir
  9. Respostas
    1. Fico feliz que tenha gostado!! Adoro seus comentários ;3
      Beijus e obrigada...

      Excluir
  10. E eles ainda ficam melhor quando coloca dentro do banner. Seu blog e inclusive seu blockquote são lindos!

    ResponderExcluir

Muito obrigada por seu comentário e por sua presença! Ambos são super importantes para mim.

Apenas peço que:
- Comente a vontade, dê sua opinião, faça críticas, esclareça suas dúvidas e dê suas sugestões sobre o assunto referente às postagens;
- Use um vocabulário livre para todas as idades;
- Não ofenda ninguém em hipótese alguma.

Os comentários são moderados e não são permitidos comentários de pessoas que não se identifiquem. Algumas dúvidas podem ser previamente esclarecidas na F.A.Q, assim como créditos e outras coisas.

Por favor, entrem em contato por meio das redes sociais também para dúvidas, sugestões, pedidos ou outros:
Facebook - Twitter - Google+ - Deviantart