09 janeiro 2012

Tutorial- Menu horizontal

Il_570xn.298010009_large


Olá algodões doce! Então, muita gente me pediu pra eu fazer um tutu, explicando como ponho esse menuzinho do blog. Ele é um menu com efeito em fade, então quando eu passo o cursor fica de um jeito e sem encostar fica de outro..
 Então, hoje eu vou fazer o tutorial, explicadinho pra vocês okay?

Olhem ai:

sem mouse em cima:



com mouse em cima da abinha " sobre": 


No meu menu eu escolhi um Lilas bem clarinho pro menu normal, e um rosinha bebe pro menu em fade.. O tutu é bem fácil, mais antes de ensinar, queria falar que estou participando de um concurso lá no blog da Jackie [www] E queria que vocês votassem em mim, apartir do dia 17 okay? E quem quiser participar, corre lá, no link que eu deixei ali em cima ^^ .

Clique em Continue Lendo pra Ver o Tutorial!




Olha o tutu ai:

1° passo: Vá em Design>Editar HTML> Marque a Caixinha "EXPANDIR MODELOS WIDGET"> Aperte as Teclas CTRL F e pesquise por:

body {

2° Passo: Essa tag ali  ^^  vem acompanhada de um outro codigo, depois dele vem essa ultima chavinha akiee --> } então cole o código abaixo dessa chave:


un {
font-family: Tahoma; /* Fonte do Menu */
width: 25%; /* Tamanho do Menu */
float: left;
background:#C6D3E3; /* Cor do fundo do Menu */
padding: 5px;
text-align: center; margin: 2px;
-moz-border-radius: 03px;
-webkit-border-radius: 30px 0px 30px 0px;
font-size: 08pt; /* Tamanho da fonte */
color: #fff; /* Cor da fonte */
}

un:hover {
font-family: Tahoma; /* Fonte do Menu quando passa o mouse */
width: 25%; /* Tamanho do Menu quando passa o mouse */
float: left;
background:#7897BC; /* Cor do fundo do Menu quando passa o mouse */
padding: 5px;
text-align: center;
margin: 2px;
-moz-border-radius: 03px;
-webkit-border-radius: 0px 30px 0px 30px;
font-size: 08pt; /* Tamanho da fonte do Menu quando passa o mouse */
color: #fff; /* Cor da fonte do Menu quando passa o mouse */
}

3° Passo: Visualise, se seu template continuar do jeito que estava antes, salve.

4° Passo: Agora estamos na reta final. Vá em elementos de página>adicionar gadget>htmljavascript e cole o código ai embaixo:

<a href="Link da página"><un>Nome da página</un></a>

Este código ali em cima ^^ você vai repetir a cada página que você tiver, pra editar ele é o seguinte:
Personalizar O que está escrito, e Link:

  Link da página: você coloca o link pra onde você quer que o menu leve os leitores
ex: http://charmosinhabeauty.blogspot.com

  Nome da página: você coloca o nome da página onde você vai levar seus leitores
ex: HOME

Personalizar Fonte do Menu:

De CTRL F e pesquise por:
 
/* Fonte do Menu */

Onde está Tahoma você troca pela sua preferida, ex: Comic Sans MS, Calibri, Arial..

Personalizar Tamanho do Menu:

São duas frases pra personalizar o tamanho, e você vai acha-las rapidinho..  

/* Tamanho do Menu */
/* Tamanho da fonte do Menu quando passa o mouse */

E troca pelo tamanho que você quiser, o meu eu coloquei 14.

Personalizar a Cor do Menu:

Pra personalizar as cores eu recomendo você virem aqui.

background:#C6D3E3; /* Cor do fundo do Menu */
 
Você troca pela cor que quiser, mas quando o menu está sem o mouse por cima.
 
color: #fff; /* Cor da fonte do Menu quando passa o mouse */
  
Você troca pela cor que quiser, mas é quando o mouse está em cima do menu. 

E Pronto, deu certinho?
 
 
 
 

23 comentários:

  1. Este comentário foi removido por um administrador do blog.

    ResponderExcluir
  2. Este comentário foi removido pelo autor.

    ResponderExcluir
  3. Linda vc tem 6 votos acumulados, boa sorte (:

    ResponderExcluir
  4. OI
    adorei a visitinha la no meu blog...
    Para se tornar parceira é só colocar meu link na sua lista de afiliados ou parceiros e divulgar meu blog em um post.E me avisar que faço o mesmo...
    xoxo
    http://karenbarbiepink.blogspot.com

    ResponderExcluir
  5. Adorei mt fofo esse menu!! hehe

    Rawar --> World Girl
    http://ianapaulinhaaaa.blogspot.com/

    GRUPO NO FACE -->> participe e divulge seu blog com outros blogueiros!

    http://pt-br.facebook.com/groups/277523425639814/

    ResponderExcluir
  6. OLÁ Marie eu visitei o seu blog e adoreiiiii !DÁ UMA PASSADINHA NO MEU e se gostar segue por favor ele ainda não tá muito perfeito pois n tem muito tempo que eu criei mas da uma passadinha viu !!UM GRANDE BEIJO E PARABÉNS !!!!!

    http://coisasdemeninasmalu.blogspot.com/

    ResponderExcluir
  7. Oi Marie te deixei um comentário antes é que eu queria dizer que se vc entrar no meu blog vc pode dar alguma dica assim de como melhorar ele ???posso contar com vc grande beijo

    ResponderExcluir
  8. Karen: Coloco seu banner na sidebar sim.. Te aviso lá!

    ResponderExcluir
  9. Oi obrigado pela visita.quanto ao template eu queria saber mais sobre a questão de vc fazer um para mim ok! Valeu

    ResponderExcluir
  10. Aaah adorei o tuto, vou fazer ele agora !
    Obrigadinha ^^
    Seguindo flores, retribui ?

    http://luhhluzinha.blogspot.com/

    ResponderExcluir
  11. amei seu blog, adorei esse tutorial muito explicativo, vocÊ também é um graça... ah baby seguindo daqui, apara mim seria um honra te ter lá no meu:
    Tutti-Frutti de Ideias

    ResponderExcluir
  12. Luuh: Que bom que gostou já vou seguir!

    ResponderExcluir
  13. My Toledo: já vou lá no seu e valeu..

    ResponderExcluir
  14. Muito útil o tuto e parabéns pelo blog lindo que vc tem!
    Bjss e seguindo!
    http://terminal-nanda.blogspot.com

    ResponderExcluir
  15. Adorei o seu blog,já estou seguindo para ajudar na sua meta. Visita o meu blog? Seria uma honra caso seguisse!

    www.the-fantastic-place.blogspot.com

    ResponderExcluir
  16. Oi linda eu amei o post!
    So que o meu deu errado sabe tipo eu fiz o menu deu certinho mais quando eu apertei no sobre etc.. aparaceu pag não encontrada!

    ResponderExcluir

LinkWithin

Related Posts Plugin for WordPress, Blogger...