Tutorial - Menu simples

         

Oi cheirosos *-*

Galera, quero avisar que daqui a uma semana eu mudarei de layout denovo (kkkkkkkkkkkk u.u). É porque eu fiz um download de um lindo e estou trabalhando em cima do html. O blog agora vai ficar mais... Profissional? É, acho que posso chamar disso rs. 

Mas... Hoje eu trouxe o tutorial do menu da sidebar "Welcome" do Have Black. Sim, aquele menu simples aqui do lado ^~^ ESTE MENU É DO BLOG PEQUENA GAROTA, então, créditos para lá, por eu estar usando e por passar o tutorial tambem, haha. Clique em leia mais.

Live Preview / Blog pequena garota

Aperte F3 e pesquise por ]]></b:skin>. Acima disso cole:

simples{

color: #FFF; /*cor da fonte*/

text-align:center;

font-family: '04b03'; /*não altere*/

font-size: 8px;

background: #000; /*fundo do menu*/

text-shadow: 0.1em 0.1em #afeeee;

padding: 3px;

float: left;

margin: 2px;

width: 16%; /* tamanho do menu */

-webkit-transition-duration: .80s;

border-radius: 0px; /*bordas arredondadas*/

}

simples:hover{

background: #f4f4f4; /*fundo do menu ao passar o mouse*/

color: #000; /*cor da fonte ao passar o mouse*/

box-shadow: inset 1px 1px 6px  #E8E3E3;

-webkit-transition-duration: .80s;

border-radius: 0px; /*bordas arredondadas*/

}

Altere as partes destacadas e salve. Agora vá em Layout > Adicionar um novo gadget > Gadget de HTML/JS. Nele cole:

<a href="LINK"title="TITULO"><simples>NOME</simples></a>

Altere o que está destacado e repita o código quantas vezes quiser. É isso beijinhos :3