Image Map

04 julho 2013

Tutorial - Menu simples

          http://1.bp.blogspot.com/-PcXpfxMKxFw/US-zRRszGSI/AAAAAAAAGwQ/sMPEF-4YPrQ/s1600/forumpostnew11.PNG
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

Nenhum comentário:

Postar um comentário

|