9 de outubro de 2011

Novo layout + Menu simples

Tumblr_lf56utkpjg1qgs9xgo1_500_large
Olá meu povo, muitos de vocês não perceberam, mais fechei o blog por um dia ava para arrumar o layout, eu sei que não mudou quase merda nenhuma mais eu me sinto bem vendo meu blog diferente, espero deixar o layout por um tempo, eu sei que isso não é um post, por isso vou postar um tutorial pra vocês ok ?
Esse tutorial que vou ensinar é o do menu igual o do blog, aprendi isso no place fame então os devidos créditos ok ?

Vai ficar mais ou menos com esse resultado :





Vamos ao tutorial !



Vá em design - editar HTML e procure F3 por :

]]></b:skin>
Acima da tag procurada cole :

/*** MENU SIMPLES  ***/
.menusimples {
background-color:#f8f8f8; /*** cor do fundo ***/
float:left;
text-shadow: 1px 1px 0 #E4E4E4; /*** cor da sombra da letra ***/
color:#707070; /*** cor da fonte ***/
font-variant:small-caps;
width:150px; /*** largura da aba ***/
font-size: 10pt; /*** tamanho da fonte ***/
text-align: center;
margin: 3px;
line-height:25px;
margin-bottom: 1px;
-khtml-opacity: .70;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
}

.menusimples:hover 
background-color:#FF99CC; /*** cor do fundo ***/
float:left;
color: #fff; /*** cor da fonte ***/
text-shadow: 1px 1px 0 #acacac; /*** cor da sombra da letra ***/
-khtml-opacity: .70;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
}

As parte de rosa vá colocando os códigos da tabela de códigos [www]
E as de azul é a borda arrendondadas (se não quiser apague)

Agora quando você quizer usar vá em design-elementos da página- adicionar um gadget- HTML/Java script

e cole esse código :

<div class="menusimples"><a href="LINK_AQUI">TÍTULO_DA_PÁGINA</a></div>
<div class="menusimples"><a href="LINK_AQUI">TÍTULO_DA_PÁGINA</a></div>
<div class="menusimples"><a href="LINK_AQUI">TÍTULO_DA_PÁGINA</a></div>
<div class="menusimples"><a href="LINK_AQUI">TÍTULO_DA_PÁGINA</a></div>
Vá editando as palavras de rosa.
Gente, se alguém tem alguma dúvida, comentem.

Se usarem credite para Place Fame

Beijinhos! 




2 comentários:

  1. Oiii flor,
    Aiin' fazia tempo que eu não achava esse tuto e precisava muito dele.
    AMEI seu blog amiga ele é lindoo viu? Você que fez o design?
    Parabéns !
    Já estou seguindo.
    Bjooos e Sucesso =*
    http://blogdafefofa.blogspot.com/

    ResponderExcluir
  2. Segue? E se puder, divulga?

    http://tudosobrecelebris.blogspot.com/

    ResponderExcluir

Regrinhas para você comentar bonito (;

*Não xingue nem humilhe nem o blog nem nenhuma pessoa
*Comentários muuuuuitos longos não são legais
*Divlgue seu blog com moderação
*Eu não participo de sorteios

Seu comentário faz a diferença (;
Obrigada por visitar e comentar no Love HTML