8 de jan de 2013

Menu Hover Deslizante!

Yah!!!

Olá queridas inglesinhas e inglesinhos como vão? Bom eu sei que vocês estão cansados de ouvir o mesmo discursos de sempre e por isso que dessa vez eu não vou repetir de novo a minha falta de posts aqui ok! Então hoje eu trouxe o que eu já tinha prometido a um bom tempo que é um tutorial. Espero que gostem do tuto ok, bom este tutorial é um tipo de efeito Wishlist se é que me entendem, não é? Então se quiserem ver um Live Preview clique aqui o título do gadget na sidebar é "Menu Hover Deslizante" ok, se você gostou agora vai aprender como fazer ok.

1º: Basta você ir até o seu HTML e procurar por:

]]></b:skin>

E acima desta tag cole o seguinte 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;}

Onde está em negrito troque pela cor que você quiser, clique aqui e vá na Tabela de Cores.

Visualize e se estiver tudo certinho salve. Depois vá e adicione um gadget HTML/JavaScript com o seguinte código:

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

Onde está em negrito escreva o que você quiser ok. É isso gente este tutorial é de Kawaii World então todos os créditos vão a Kaorii que fez este tuto :), beijos a todos e qualquer dúvida sobre o tutorial é só comentar aqui no post ok. Tchaaaaaaau!!!


{Larissa C.R.}

5 comentários:

  1. Larissa poste também bastante vezes ao dia se quiser tá? O layout está bem demorado por isso vc tem que postar mais que eu se der kkkkkkkkkkk se quiser pode postar umas três postagens de goodies hoje outros dias também, pode também se quiser e souber algum tutorial legal pra mim colocar no layout pq ta todo bagunçado kkkkkkk
    Fique Com Deus!!!!
    =D


    ResponderExcluir
    Respostas
    1. Ok não tem problema eu posto bastante pois agora estou com tempo de sobra!!!!
      Beijinhos :D

      Excluir
  2. Oi Larrisa!
    Muito legal o blog!
    Desculpe a pergunta, mas o seu numero de membros está em rosa, o meu sumiu do nada e ficou branco. como o meu fundo dos gadgets é branco tbm não dá pra ver.
    Eu não quero mudar a cor do fundo dos gadgets só o numero mesmo, mas eu não sei como.
    Vc me dá alguma ideia pra fazer isso?
    Eu agradeceiria muito se vc pudesse ajudar!
    Obrigada mesmo viu?
    Grande beijo!
    Já to seguindo..segue de volta?
    Obrigada!
    www.blogdabiaw.blogspot.com

    ResponderExcluir
    Respostas
    1. Oiii, aqui é a Beatriz, a dona do blog hehe, a Larissa é postadora do blog tá?
      Vou tentar resolver rsrsrsrs, vou seguir seu blog também e agente conversa oks?

      Fique Com Deus!!!!
      =D

      Excluir
  3. Desculpe Bia!
    Obrigada por seguir!
    Beijos

    ResponderExcluir

ANTES DE POSTAR UM COMENTÁRIO, LEIA:

Regrinhas básicas para o melhor funcionamento do blog:

Você pode comentar tudo que venha falar á respeito do blog, só não queremos que você xingue e desrespeite pois respeito é bom e todo mundo gosta não é mesmo?
Eu sigo de volta sim, e respondo todos os comentários mas, eu fico muito agradecida se primeiro, você ler a post. Aceitamos críticas construtivas e muito obrigada por comentar.