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.