• - ChapStique -

    - ChapStique -

  • - Crouton -

    - Crouton -

  • - Nadaddy -

    - Nadaddy -

  • - Fatty -

    - Fatty -

  • - Hollywood -

    - Hollywood -

11 de janeiro de 2014

Olá + Menu de imagens com hover

Olá, eu sou a Bruna, uma das novas choconerds, tenho 12 anos, faço 13 dia 11 de Abril. Sou Portuguesa, vivo em Portugal. Adoro ler, detesto a escola. Amo o HTML dos blogs. O meu blog chama-se Garota Sonhadora, começou à pouco tempo em Dezembro. Espero que gostem dos meus posts.

Bem, hoje vou mostrar-vos um menu muito bonito que aprendi no Cherry Bomb, podem ver como ele é aqui. Como já devem ter reparado o menu é feito com imagens recomendo que façam uma imagem no tamanho 140 X 120, já explico a altura enorme da imagem.

As imagens

Primeiramente temos de fazer a imagem, atenção que as imagens são a imagem normal e a hover juntas. Têm de usar números pares.
Por exemplo: Eu quero que o meu menu tenha de largura 140 e altura 60, faço uma imagem no tamanho 140 X 120 porque 120 é o dobro de 60.

O HTML Javascript
Agora vamos ao segundo passo, vá no esquema do seu blog e adicione um HTML Javascript.
Coloque lá o código abaixo.
<a href="LINK_DO_ITEM"><img src="http://i49.tinypic.com/e5h5dt.jpg" height="METADE DA ALTURA DO ITEMpx" width="LARGURA DO ITEMpx" class="NOME DO ITEM"></a>
Na parte nome do item coloque o nome que você quer dar ao menu, aviso que todas as imagens têm de ter um nome diferente.

O HTML
Agora vamos à parte mais complicada. Lembrem-se que é um menu por imagem.
Procure por ]]></b:skin> e coloque acima
.NOME DO ITEM {
background: transparent url('IMAGEM DO ITEM') no-repeat bottom center;
width: LARGURA DO ITEMpx;
height: METADE DA ALTURA DO ITEMpx;
margin-left: 0px;
transition-duration: 0.5s;
-webkit-transition-duration: 0.5s;
-moz-transition-duration: 0.5s;}
.NOME DO ITEM:hover {
background: transparent url('IMAGEM DO ITEM') no-repeat top center;
width: LARGURA DO ITEMpx;
height: METADE DA ALTURA DO ITEMpx;
transition-duration: 0.5s;
-webkit-transition-duration: 0.5s;
-moz-transition-duration: 0.5s;}
No nome do item coloque o nome que você colocou no HTML Javascript.
Espero que tenham gostado do post, um resto de um bom dia para vocês.

19 comentários:

  1. Fica ótimo! Só que eu não gosto com imagens, porque eu nunca sei fazer a imagem direito, então, meio que tenho aversão kkk
    Bem vinda ao AN :3
    http://republicacrash.blogspot.com/

    ResponderExcluir
  2. Que menu lindo <3 Adorei ele, de verdade. Seja bem vinda <3 Enfim, voltando ao menu, com certeza tenho que pôr ele no meu novo layout.

    Visite o blog :3 | Etc For Me :3

    ResponderExcluir
  3. Achei ele bem lindinho, mais muito complicado por conta das imagens que vc tem que fazer e tal. Emfim, seja bem vinda. ~kissus

    lazy-anywhere.blogspot.com

    ResponderExcluir
  4. Bem vinda *w*
    Amei esse menu , achei ele fofo 0/

    Geekegirlie.blogspot.com || G²

    ResponderExcluir
  5. QUE MENU LINDO *O* estou mais que apaixonada por ele, vou favoritar esse tutorial, e... Bem-vinda! Espero não ter te assustado, rs...

    interesses-sutis.blogspot.com

    ResponderExcluir
  6. Oi, vcs poderiam ensinar como fazer um layot e codificar para por no blog? e q eu queria muito aprender ><

    ResponderExcluir
  7. Bem vinda <3
    Cara que menu lindo, mds *-------* perfeito!
    Kiss
    With You || Imperfectous

    ResponderExcluir
  8. Bem-vinda Bruna :3
    Amei o menu, fofinho ^-^

    mypurpleworl-d.blogspot.com

    ResponderExcluir
  9. Adorei o tutorial, achei seu blog lindo. Seguindo aqui, retribui?
    http://www.wondermarcelo.blogspot.com.br/

    ResponderExcluir
  10. Aaaachei lindo o tutorial e facil tambem!! obrigada!
    Blog: http://wwwblogpapoteen.blogspot.com.br/

    ResponderExcluir
  11. Moça seja bem vinda o// vc vai adorar postar aqui, pq aqui é o AA u_u
    Amei esse menu, super lindo *o* e criativo, acho que irei usar em meu próximo lay :3

    XOXO :D || {Joven Clube}

    ResponderExcluir
  12. Seja bem vinda, tão nova hein e já super inteligente e antenada. Pera, de Portugal? Nem preciso dizer que já amei você, né? Gostei muito desse menu, acho que vou usá-lo em meu blog ^^

    Abraços,
    http://www.revolucaonerd.com/

    ResponderExcluir
  13. Mebnu muito lindo com certeza. Beijos!

    http://doces-leitoras.blogspot.com.br/

    ResponderExcluir
  14. Olá, sigo seu blog a algum tempo e faz um tempinho que não o visito.

    Gostaria de saber se aceita um tipo de parceria em que eu visito seu blog umas 3 vezes na semana e comento em suas postagens e você faz o mesmo, para divulgação de ambos. Se aceitar, fala comigo por comentário do meu blog:

    Beijos,
    http://eusourebeldeevocebrasil.blogspot.com.br/

    ResponderExcluir
  15. Adorei o menu, muito lindinho! ><

    http://simplekawaii.blogspot.com.br/

    ResponderExcluir
  16. Aceita parceria? Pode ser divulgação
    http://sonhosdeumunicornio.blogspot.com.br/

    ResponderExcluir