Texto Hover / Novo Layout

Ice-cream-pie-fore296_largePois é, eu já troquei o layout de novo. É, eu sei que esse está um lixo, mas eu já disse que a minha internet também está nessas mesmas condições. Mas agora estou na casa do meu pai, a internet está ótima, e pude terminar o template. E ainda vim com um super-tutorial (tá, não é nada super, é simples, mas eu amei) que eu mesma editei, um textinho que muda quando passa o mouse, ou seja, hover. Na verdade eu peguei o menuzinho do Place Fame, e editei ele todo. Tem 3 tipinhos pra vocês escolherem. E você pode usar esse em qualquer lugar: Ou nos afiliados, nas tags, ou como um menu mesmo, o que você quiser. Bem, vamos ao tuto?









Passo 1: Escolha um menu
Disponibilizei 3 estilos de menus pra vocês: Cada um tem um código diferente. O 1º é azul, o segundo, rosinha, e o 3º é lilás. Não são só as cores diferentes, todo o estilo!
Clique aqui e veja o demo dos 3 menus, e então escolha o seu para seguir com o tutorial.

Passo 2: Instale o código


Procure no seu HTML por ]]</b:skin> e acima dele cole apenas o código correspondente ao menu que você escolheu:
Menu 1

/* ............. Texto Hover1 por girlson-line.blogspot.com.........*/
#textohover1 {
border-left: 3px solid #63B8FF;
border-bottom: 1px dashed #63B8FF;
color: #666666;
font-family: tahoma;
font-size: 11px;
text-align : left;
padding-bottom : 2px;
padding-left : 5px;
margin-bottom: 3px;
}
#textohover1:hover {
background: #63B8FF;
color: #fff;
font-family: tahoma;
font-size: 11px;
text-align : left;
padding-bottom : 2px;
padding-right : 5px;
margin-bottom: 3px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
/* .................. Texto Hover1............*/
Menu 2 
/* ............. Texto Hover2 por girlson-line.blogspot.com.........*/
#textohover2 {
border-top: 1px dotted #CDB38B;
background: #FFDAB9;
border-bottom: 1px dotted #CDB38B;
color: #666666;
font-family: tahoma;
font-size: 11px;
text-align : left;
padding-bottom : 2px;
padding-left : 5px;
margin-bottom: 3px;
}
#textohover2:hover {
background: #EECBAD;
color: #fff;
font-family: tahoma;
font-size: 11px;
text-align : left;
padding-bottom : 2px;
padding-right : 5px;
margin-bottom: 3px;
}
/* .................. Texto Hover2............*/
Menu 3 
/* ............. Texto Hover3 por girlson-line.blogspot.com.........*/
#textohover3 {
background: #D8BFD8;
color: #fff;
font-family: tahoma;
font-size: 11px;
text-align : right;
padding-bottom : 2px;
padding-left : 5px;
margin-bottom: 3px;
-webkit-border-top-right-radius: 10px;
-webkit-border-bottom-left-radius: 10px;
-moz-border-radius-topright: 10px;
-moz-border-radius-bottomleft: 10px;
border-top-right-radius: 10px;
border-bottom-left-radius: 10px;
}
#textohover3:hover {
background: #EEE5DE;
color: #BEBEBE;
font-family: tahoma;
font-size: 11px;
text-align : right;
padding-bottom : 2px;
padding-right : 5px;
margin-bottom: 3px;
-webkit-border-top-left-radius: 10px;
-webkit-border-bottom-right-radius: 10px;
-moz-border-radius-topleft: 10px;
-moz-border-radius-bottomright: 10px;
border-top-left-radius: 10px;
border-bottom-right-radius: 10px;
}
/* .................. Texto Hover3............*/ 
Passo 3: Coloque o menu onde quiser
Você pode pôr o menu nos posts, no gadget, em qualquer canto. Basta copiar o código abaixo, e colar onde quiser.
Menu 1

<div id="textohover1">
Seu texto ou link aqui</div>
Menu 2

<div id="textohover2">
Seu texto ou link aqui</div>
Menu 3

<div id="textohover3">
Seu texto ou link aqui</div>
Não edite nada além de onde está escrito "Seu texto ou link aqui", ou o menu ficará prejudicado. Você pode colocar em vez do texto um link. Basta usar o código: NOME


É só isso povo, espero que tenham gostado do menu que eu mesma fiz. Por favor, comentem, vocês não pensam no trabalhinho que eu tive com isso, e queria muito ouvir vocês.
Beijos.

2 comentários:

Paty disse...

Adorei o tutorial, e o efeito é super lindo eu testei ele no meu blog de testes e amei, acho que vou usar ele no meu próximo lay! Seu novo lay ficou muito lindo,eu adorei!!

Bjs

http://magicmih.blogspot.com/

Anny S. disse...

Seu lay novo ta lindo, e se me permite dizer não ta um lixo não senhora! E o menu ficou lindo, super fofo e bem aplicado! E o tuto também, adorei!

Beijos!