16 outubro 2012

Criando seu próprio menu!

Olá gente! Bom, esse tutorial eu aprendi no Sweet Poison, mas fiz com meu jeitinho, escrevi todinho ele, então se copiarem, dê os créditos!

1. No blogger, vá em designe e aperte em editar HTML
2. Aperte CTRL + F e pesquise por:

]]></b:skin>

3.Logo acima do código anterior, cole o seguinte:

.meumenu {

 4.Logo abaixo desse código que você colocou, coloque:

Background: background: #FFFFFF; ou background: url("URL do background") repeat;
Borda: border: 1px solid #FFFFFF; 
Fonte: font-family: Tahoma;
Cor da fonte: color: #000000;
Tamanho da fonte: font-size: 13px; 
Bordas arredondadas: -webkit-border-radius: 30px;
Parágrafo: padding: 5px;
Cursor: cursor: crosshair;

Depois coloque } no final dos códigos que você acabou de colocar.

5. Aperte Enter e coloque esse código:
.meumenu:hover {
Repita o passo 4 (Lembre-se de que agora você está fazendo a classe hover desse menu; coloque cores diferentes das que você colocou embaixo de .meumenu {)
6. Salve.
7. Agora vá para Design> Elementos da página. Adicione um gadget de HTML/Javascript e coloque nele o código abaixo:
<div id="meumenu">
<a href="LINK 1" title="">Nome do link</a>
<a href="LINK 2" title="">Nome do link</a>
<a href="LINK 3" title="">Nome do link</a>
<a href="LINK 4" title="">Nome do link</a> </div>
 Edite as partes em roxo!
Pronto! Esperam que tenham gostado!
Beijos ^^
 


2 comentários:

  1. Aqui esta o efeito nas imagens
    http://prince-teen.blogspot.com.br/2012/10/bordas-nas-imagens-da-sidebar_15.html

    ResponderExcluir
  2. ooi flor já coloquei vc na divulgação pode me colocar aqui tb
    bjs><
    http://blog-make-me-up.blogspot.com.br/

    ResponderExcluir