Home About Afiliação? Afiliados Reviews Tutoriais Extras +Follow

09 março 2014

Menu Hover Deslizante ~ Tutorial

Heey!!
Estou entrando em depressão, pois amanhã minhas aulas voltam e eu não faço a menor ideia de quando será o próximo feriado (Sim, já estou contando os dias para o próximo feriado u.u). Deixe-me resumir pra vocês o que eu fiz nessa semana de Carnaval: NADA! Isso mesmo, nada, eu não sai, apenas fiquei em casa e quando finalmente resolvi sair, nesse final de semana. O que acontece? Chove. A única coisa que fiz de diferente foi começar a ler Capitães da Areia, que eu preciso ler por causa das aulas de literatura, confesso que tinha achado que seria um saco a história, mas eu até que estou gostando! Enfim, o universo me quer apenas em casa, então vou ficar por aqui mesmo ;3

Deixando isso de lado, nesse post irei ensinar a vocês a como colocar o Menu Hover Deslizante, que é o menu do gadget Status ai do lado. Esse menu normalmente é usado exatamente para mostrar o "status" do seu blog, há pessoas que adicionam por exemplo "Melhor visualização: Google Chrome". Mas os mais normais são esses que vocês estão vendo. É fácil de colocar, vamos lá lol
Fica assim e quando passar o mouse o fundo muda de cor.
Primeiro, vá até o seu HTML, aperte Ctrl + F e procure por ]]><b:skin> Acima dele, cole esse código:

.heart {
display : block;
 font-size: 10px;
font-family: Tahoma;
letter-spacing : 0;
border-bottom : 1px solid #eee;
background-repeat : no-repeat;   
text-indent : 5px;
vertical-align : middle;
text-decoration : none;
 line-height : 15px;
margin-bottom : 1px;
padding-left : 3px;
 -webkit-transition: all 0.9s ease-out; -moz-transition: all 0.9s ease-out;
border-left: solid #CORDABORDA;
background: #CORDOFUNDO;
 color: #666 !important;
}
.heart:hover {
display : block;
text-decoration: none;
 vertical-align: middle;
line-height: 15px;
background: #CORDOFUNDOHOVER;
 border-left: solid #CORDABORDAHOVER;
 padding-left: 15px;}

Em seguida, onde está em negrito você altera para as cores que deseja (Quem quiser deixarei uma Tabela de Cores Html aqui), salve e vá até Layout. Adicione um gadget de HTML/JavaScript e cole:

<div class="heart"> Seu Texto </div>
<div class="heart"> Seu Texto </div>
<div class="heart"> Seu Texto </div>

Escreva o que quer em "Seu Texto", se precisar de mais basta copiar e colar mais códigos um em baixo do outro. Depois só salvar e pronto ;3
Não é difícil, espero que use e que goste! Por enquanto é só, vou tentar postar no meio de semana se o colégio me der uma folga e se tudo for bem. Até mais o/
Créditos ao BC.

15 comentários:

  1. Oi...
    Kkkk também fiz a mesma coisa no meu carnaval... Nada!
    O que eu fiz foi só ler um mangá e assistir um filme, porque estava chovendo muito.
    Mas eu não achei ruim não, gosto muito de chuva.

    Gostei muito do modelo do menu.
    Tane você poderia ensinar como faz para colocar esse menu mais simples seu, esse do "Navegue".

    t+
    Yaoi Eien

    ResponderExcluir
    Respostas
    1. Heey lol
      Somos dois lol shauhsa'
      Chuva é sempre bom, eu também gosto ;3 Claro, nesse final de semana posto um tutorial sobre ele!

      Excluir
  2. Eu comentei aqui ontem mas parece que bugo!
    Enfim muito obrigado por disponibilizar tane... Ficou bem explicado viu.
    Pedido: Sera que você poderia ensinar como adicionar esse menu mais simples aqui do seu blog, aquele ali do "Navegue"?
    t+
    Yaoi Eien

    ResponderExcluir
    Respostas
    1. shaushau'
      Obrigada ;3
      Claro, claro, como tinha respondido vou tentar postar nesse final de semana. Obrigada por pedir lol
      Até

      Excluir
  3. Por incrível que possa parecer, desde que criei o FS que quero usar esse menu, mas acabo por nunca o fazer >.< Enfim, quanto aos feriados, sou exatamente como você, mas vou meter inveja dizendo que depois de amanhã a minha escola faz uma espécie de celebração que tem a ver com a fundação da escola e à tarde não há aulas ^^

    ResponderExcluir
    Respostas
    1. Entendo shausha' Parece legal ;3 Eu só tenho aulas de manhã mesmo!

      Excluir
  4. Muito bonito esse menu. Acho que vou usa-lo no meu próximo layout♥
    ~Chuu

    Cat Otaku

    ResponderExcluir
    Respostas
    1. Sim, se tiver qualquer dúvida pode perguntar (:

      Excluir
  5. YAY <3 Amo esse tuto vou usar no proximo lay :3

    Visita --> http://jeitodecriaanca.blogspot.com.br/

    ResponderExcluir
  6. Yoooo!♥
    Necessitava desse tuto, obrigada :)

    ResponderExcluir
  7. Muito legal esse menu!! *¬* babando

    Obrigada Tane-chan!!! Estou feliz de conseguir a diploma e que possa incluir isso no meu currículo hehehe =P

    Kiss

    tsuki-no-shita.blogspot.com

    ResponderExcluir
    Respostas
    1. Obrigada *u*
      De nada, deve ser ótimo ter sempre algo para acrescentar no currículo ;3

      Excluir
  8. kkkkkk carnaval eu não fiz nada , só fiquei no pc, lendo mangá !
    Na verdade só saí uma vez pra ir na casa de uma amiga minha u.u , eu sempre ficava pensando " quando é que eu vou pro Japãaaaao " , eu precissoooooooooooooo ir muito pra lá !

    Enfim , esse tutorial eu já conhecia , acho que um máximo ! SHSSHUSHSU ' Não par ode passar o mouse em cima dele kkkkkkkk , eu adoro ver os efeitos dos menus !

    Até mais ! x.x

    ResponderExcluir

Regras:
- Respeite a opinião dos outros.
- Se tiver errado algo na postagem, pode comentar avisando (:
- Não me venha com "Seguindo, segue de volta?".
- Não comente apenas para divulgar seu blog.
- Pode comentar e colocar o link no final.
- Responderei a todos.
- E por favor, diga o que pensa, opine! ;3