Tutorial para blogs- Menu Hover Deslizante

Hello honeys! Então resolvi hoje ensinar um menu hover super fácil para se usar no blog e por sinal é o que eu uso no menu de Status do blog, eu sei que não tem muito haver com o blog mais é um menu super fácil e que também fica lindo no blog! Vamos ao post? Clique em Leia Mais!

                             



Bem os créditos vão ao blog Zona Neutra.

Primeiro de tudo clique em vá em Modelo e clique em Editar HTML; depois disso clique em Ctrl+F e vai aparecer uma caixinha nessa caixa pesquise por:

                                                               ]]><b:skin>

E antes de ]]><b:skin> cole esse código abaixo:

.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;}

No código já está tudo explicado mais onde tiver #CORDABORDA ou #CORDOFUNDO substitua por uma cor em HTML (tabela de cores aqui) e onde está em #CORDOFUNDOEMHOVER ou #CORDABORDAEMHOVER substitua também por uma cor em HTML na tabela de cores.

Depois vá em Layout e Adicionar um Gadget e adicione um Html, e depois disso cole esse código abaixo

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

Onde tiver Seu Texto escreva algo como o Status do seu blog (assim como está no meu no menu Status) e deixe heart normal sem fazer nenhuma modificação no código apenas somente em Seu Texto.


Espero que tenham gostado do post!


Kisses!