5.4.12

Menu horizontal com efeito hover !



Oi gatchuscas , tudo bom ?
Nesse post vim ensinar como colocar o menú com esse efeito !
Eu sempre tive essa dúvida , mas eu encontrei esse tutorial no blog Delicious Avatares
Créditos ao Antigo Moderno
Caso tenha se interessado,segue o tuto ;)
  • Vá até Design> Editar HTML
  • Aperte Ctrl+F e procure por body {
  • Você encontrará algo mais ou menos assim:


/* Content
----------------------------------------------- */
body {
font: $(body.font);
color: $(body.text.color);
background: $(body.background);
}


  • DEPOIS de todo esse código você cola o seguinte:


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 */
}


Edite como desejar as partes indicadas
Salve,não adianta visualizar pois ainda não irá aparecer
Vá novamente até Design>Elementos da página
Clique em Adicionar um Gadget
Adicione um elemento HTML/JavaScript
E cole o seguinte código no elemento: 
(clique para aumentar)
 
  • Onde está Link Aqui você coloca a URL que quer(como da sua página de créditos ou parceiros)
  • Onde está Nome Aqui você põe o nome da página(como Parcerias,Goodies...)
  • Comente se tiver alguma duvida ;                                                                                        
  •  Se eu ajudei ... Comenta !!
  • Beijoooooos                                               

    9 comentários:

    1. Já coloquei vc como afiliada :)

      http://rosarosalina.blogspot.com

      ResponderExcluir
    2. Votei em você, viu? Torcendo por você viu? Espero que ganhe! *-* Ah queria te pedir um favorzinho também... Curte o Blog? *-*
      Obrigada! Beijos querida blogueira!

      Antes de Sonhar

      ResponderExcluir
    3. Oi flor, já votei em você viu?!kkk
      Adooooro esse menu! Eu usava antes, mas agora prefiro o do blogger mesmo *-*
      Xeru ♥

      ponhaglitter.tk

      ResponderExcluir
    4. Adorei o tutorial, muito bom <3 Já votei em você viu flor? Espero que ganhe!
      www.viverserfeliz-renata.blogspot.com

      ResponderExcluir
    5. Ótimo tutorial.já seguindo aqui.

      http://edicaopopgirls.blogspot.com.br/

      ResponderExcluir
    6. Muito lindo, usei no meu blog, e ficou perfeito.
      já estou seguindo!
      sorrisomet4lico.blogspot.com

      ResponderExcluir
    7. Você aceita uma parceria ou afiliação? Se aceitar, me avise no meu blog (sorrisomet4lico.blogspot.com) por favor?

      ResponderExcluir