Menu Linha Hover

~Oi~

Olá gente, hoje trouxe um tutorial super útil, é o menu de linha Hover.

Exemplo:

passa o mouse:

Vamos aprender?

1ª Vá em Modelo -Editar HTML - Prosseguir - Aperte Ctrl + F (Nova interface do blogger)

ou

Design - Editar HTML - Aperte Ctrl + F ( Antiga interface)

Procure por ]]></b:skin>

Ao encontrar cole esse código em cima:

menulinha {background: #FFC0CB; color: #000; border-left: solid 5px #68838B; border-right: solid 0px #CD6090; width: 100%; text-align: left; padding: 3px; margin: 1px; spacing: 0px;display: inline-block; line-height: 10px;}
menulinha:hover {background: #9AC0CD; color: #000; border-right: solid 5px #68838B; border-left: solid 0px #CD6090; width: 100%; text-align: right; padding: 3px; margin: 1px; line-height: 10px;}

Agora cole esse código aqui debaixo aonde você deseja usar:

<div style=" width: 150px; ">



<a href="URL AQUI"><menulinha>Home</menulinha></a>
<a href="URL AQUI"><menulinha>Home</menulinha></a>



<a href="URL AQUI"><menulinha>Sobre</menulinha></a>
<a href="URL AQUI"><menulinha>Sobre</menulinha></a>
<a href="URL AQUI"><menulinha>F.A.Q</menulinha></a>a></div>
<a href="URL AQUI"><menulinha>Créditos</menulinha></

Agora edite as cores, aqui está a tabela de cores.