03/01/2013

Menu hover deslizante


Capinha nova hoje bunnys! Ate amanha posto aqui no blog, mas trago um tutorial que achei bem legal no blog KW. Um menuzinho e de efeito hover e deslizante, ele é ótimo para usar em status no blog e coisas que não precisam chamar muito atenção, caso queiram dar uma olhadinha veja a brevia mais a baixo. Então vamos ao tutu?

1. Vá até seu HTML e procure por ]]></b:skin>. Acima dessa tag cole esse código:

Códigos
.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;}s


2. Coloce as cores que deseja onde esta em negrito, salve e vá para Layout.  Crieum gadget de HTML/JavaScript, cole:

Códigos
<div class="heart"> Seu texto </div>

Escreva o que quiser onde esta escrito "Seu Texto", se quer adicionar mais e só repetir o código colocando um abaixo do outro, assim:

Códigos
<div class="heart"> Seu texto </div>
<div class="heart"> Seu texto </div>
<div class="heart"> Seu texto </div>

9 comentários:

  1. Hei amei e coloquei os créditos!

    http://believe-tj.blogspot.com.br/

    ResponderExcluir
  2. Usarei nos créditos do meu blog (do próximo layout), beijocas.
    Eloísa do Having Cherry || Aguardo sua visita

    ResponderExcluir
    Respostas
    1. Obrigada por usar, conta comigo para uma visita!

      Excluir
  3. Não consigo pôr no meu blog. Funciona inicialmente mas depois de salvar o gadget HTML some sozinho, como se eu o tivesse excluido. =(

    ResponderExcluir
    Respostas
    1. Você pode estar transformando ele em texto antes de salvar sem querer ou seja erro nos gadgets do blog.

      Excluir
  4. AIIII, tava a procura desse post a muito tempo, obgg
    http://sorriso4met4lico.blogspot.com.br/

    ResponderExcluir
  5. Anônimo23/6/16

    Oh, Wendy ♥ Amei o tuts, usei e deixarei credits, oks? u.u

    ResponderExcluir

Bem Vindos
Hi! Meu nome é Andréa Alark, mas conhecida como Wendy dona do blog Bunny Crazy. O blog foi criado em 2010 na intenção de ajudar a criação e desenvolvimento do seu blog. Aqui encontrará tutoriais e dicas de HTML, layouts gratuitos e muito mais.
Friends
Bunny Crazy by Wendy ❀
Bunny Crazy ★
Bunny Crazy ★
12345