3 de mar de 2013

41

Tutorial - Menu Vibrante

Tumblr_mimft8otmo1r6ipclo1_500_large
Hoooy povoo *-* (Olha só a alegria da cliança)
Haha, sim sim, estou super feliz e saltitante hoje, O BLOG ESTÁ INDO SUPER BEM! Haha, o Mah e eu temos uma fila enorme de postagens e as ideias vão aparecendo e vão acumulando, já que criamos a política de uma postagem por dia pro blog não virar uma bagunça e pra finalizar nosso maravilhoso censo de perfeccionismo criamos umas página pra cada tipo de postagem, assim vocês podem ver as postagens antigas do blog *o*
Mas temos muitas postagens em mente, para vocês terem uma ideia, estou escrevendo esta postagem no dia 22-02, vamos ver quando vai dar pra postar O.o
Mas... Voltando ao assunto (às vezes falo demais), vim hoje pra atender um pedido que me fizeram lá no Skoob, que é o tutorial do nosso menu vibrante (meu xodó do lay), vamos lá?
Quando eu estava fazendo o lay, eu peguei este código no site Chá com Anjos, mas hoje quando fui lá pegar o código de novo, o blog estava fechado para somente leitores convidados, isso já a três dias, não sei se até o dia que postar esse tuto ela volta. Mas de qualquer forma o link tá aí em cima. Peguei o código no meu HTML mesmo...
 - Primeiro você abre o HTML do seu blog.
 - Aperte F3 e procure por <head> e cole em cima da tag o seguinte código:
<link href='http://fonts.googleapis.com/css?family=Fjalla+One' rel='stylesheet' type='text/css'/>
-  Em seguida, procure por /b:skin e cole o seguinte código acima da tag:

/* Menu */
mn {display: inline-block;
font-family: 'Fjalla One', cursive;
font-size: 20px; /* Tamanho da fonte */
background: #40E0D0; /* Cor de fundo do menu */
padding: 2px;
text-align: center;
text-transform: uppercase;
border-radius: 5px;
color: #fff; /* Cor da fonte */
cursor: pointer;
text-shadow: 2px 2px 0px #e9508f; /* Sombra nas palavras do menu */
width: 110px; /* Tamanho do Menu */
}
mn:hover {
    -webkit-animation-name: gangorra;
    -webkit-animation-duration: .01s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-direction: alternate;
-moz-animation-name: gangorra;
    -moz-animation-duration: 0.1s;
    -moz-animation-timing-function: linear;
    -moz-animation-iteration-count: infinite;
    -moz-animation-direction: alternate;
-o-animation-name: gangorra;
    -o-animation-duration: 0.1s;
    -o-animation-timing-function: linear;
    -o-animation-iteration-count: infinite;
    -o-animation-direction: alternate;}
 - No código vocês fazem as alterações como acharem melhor.
 - Em seguida você cria um novo gadget html/java script e cola o seguite código:
 <a href="Link da Página"><mn>Nome da Página</mn></a>
 - Para cada página você adiciona um novo código desse acima...
Qualquer dúvida é só perguntar, espero que seja útil. Beijos e até a próxima :D

41 comentários:

  1. Ótimo tutorial. Muito bem feito. Parabéns!

    Beijos, Romário.
    www.naomeentendamal.com.br

    ResponderExcluir
    Respostas
    1. que bom que gostou... Muito obrigada... Beijos...

      Excluir
  2. adoorei o turoril querida *-*
    http://rennataferreira.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. Que bom que gostou flor ^^
      Volte sempre tá?

      Excluir
  3. Muito legal!! Será util pra muitas pessoas que estão em fase de reforma do blog!!
    Parabéns pelo blog, estou seguindo aqui com certeza!
    Venha me conhecer www.sagadebeleza.com.br
    www.youtube.com/sagadebeleza (se inscreva!!)

    ResponderExcluir
    Respostas
    1. Espero que seja útil mesmo! Já já passo em seu blog... beijos...

      Excluir
  4. Muito legal,eu sempre achei lindo esse seu menu vibrante *--*

    www.em-teusbracos.blogspot.com

    ResponderExcluir
  5. Adorei o tutorial, e esse menu ein? Lindo demais!

    Beijos,
    Sem Frontteiras | Facebook

    ResponderExcluir
    Respostas
    1. Que bom que gostou... Volte sempre :))
      Beijos...

      Excluir
  6. Eu ano tutorias=is vibrantes, mas não sabia fazer ^^
    Mtoo lindo o blog, seguindo e amando!

    --beijos--
    myuniverse2012.blogspot.com

    ResponderExcluir
    Respostas
    1. Que bom que gostou... Beijos e volte sempre...

      Excluir
  7. Amei o tuto *-*
    tava precisando amei o blog *-*
    http://gaarotamaania.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. Que bom que foi útil...
      Obrigada pela visita :D

      Excluir
  8. Nossa, amei esse menu, fiquei que nem uma idiota colocando e tirando a setinha em cima das páginas auehaeuahe u_u
    Beijos <3
    http://garotasatrevidas-s2.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. Kkkkkkkkkkkkkk... Ah... Eu também faço isso :$

      Excluir
  9. Deve ficar lindo o menu, ótimo tutorial!

    Beijinhos, Garota Inocente

    ResponderExcluir
  10. O tuto parecer ser ótimo, com certeza fica lindo!
    Beijinhos
    Facebook do blog
    conversando-com-a-lua.blogspot.com.br

    ResponderExcluir
    Respostas
    1. Fica muito fofo.... Obrigada pela visita :D

      Excluir
  11. Que efeito divertido XD Legal você trazer um tutorial pra gente :3

    Beijos, Vickawaii
    http://finding-neverland.zip.net

    ResponderExcluir
    Respostas
    1. Achei interessante trazero tuto... Que bom que gostou :D

      Excluir
  12. Nossa, como eu fico feliz por você, sei muito bem como é ter a sensação de ver que as coisas estão dando certo, isso é muito bom! ótimo tuto, adorei, ficou muito bem no seu blog! Kisses! mydreamisfly.blogspot.com

    ResponderExcluir
    Respostas
    1. A sensação é ótima mesmo...
      Volte sempre tá? Beijos...

      Excluir
  13. Que legal esse menu vibrante! Adorei!
    O tutorial ficou muito bem explicado, parabéns! :)
    Beijo.

    http://belezadescoberta.blogspot.com.br

    ResponderExcluir
    Respostas
    1. Que bom que gostou...
      Obrigada pela visita :D

      Excluir
  14. Obrigada ♥.♥

    Que de mais! Adorei o tutorial <3

    Instagram: ferdallan
    http://www.leferblog.com

    ResponderExcluir
    Respostas
    1. *ooooooooooo*
      espero que tenha sido útil... Obrigada...

      Excluir
  15. Legal o tuto... Pena que não sou eu que mexo no html do meu Blog... HAHA'

    http://princesadepreto.blogspot.com

    ResponderExcluir
    Respostas
    1. kkkk... Por isso que eu faço seu lay pra você néh mana... Haha...

      Excluir
  16. Oie Flor! Tem tag lá no Blog pra vc...

    http://princesadepreto.blogspot.com

    ResponderExcluir
  17. Super fácil o tuto, adorei!

    @esteffanifontes, do blog Aos Dezesseis Anos
    aosdezesseisanos.blogspot.com.br

    ResponderExcluir
    Respostas
    1. Fácil mesmo... Que bom que gostou... Beijos...

      Excluir
  18. Ótimo tuto, adorei.
    space-sweet-girl.blogspot.com.br

    ResponderExcluir
    Respostas
    1. Fico feliz que tenha gostado... Volte sempre tá?

      Excluir
  19. Ótimo tuto e o menu fica incrível !!
    Blog muito divoo!
    Kisses .

    http://ester-macedo.blogspot.com.br/

    ResponderExcluir
  20. Eu fiz coloquei ele no meu blog (http://justbabis.blogspot.com) mas ele não vibra :(

    ResponderExcluir
    Respostas
    1. Nossa...
      Estranho ele não vibrar..
      Da uma conferidinha no tutorial pra ver se você fez tudo certinho mesmo..
      Beijoos!

      Excluir
  21. /b:skin <<< isso daq n tem no meu HTML, tem outro q posso usar no lugar?

    ResponderExcluir

Olá! Sinta-se à vontade para comentar :P
- Todos os comentários serão aceitos. Mas lembre-se: Palavrões, chingamentos, comentários como "Seguindo, segue de volta?" deixam feia a sua própria imagem,
- Temos páginas explicando nosso sistema de parceria, afiliação e divulgação e também alguns de nossos conteúdos. Não deixe de olhar!
- Qualquer assunto mais sério nos envie um email que está na página "contato"
- Deixe o link de seu blog para que possamos retribuir ^^

Beijos e Volte Sempre ^^