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.
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
ResponderExcluirBem vinda ao AN :3
http://republicacrash.blogspot.com/
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.
ResponderExcluirVisite o blog :3 | Etc For Me :3
Achei ele bem lindinho, mais muito complicado por conta das imagens que vc tem que fazer e tal. Emfim, seja bem vinda. ~kissus
ResponderExcluirlazy-anywhere.blogspot.com
Bem vinda *w*
ResponderExcluirAmei esse menu , achei ele fofo 0/
Geekegirlie.blogspot.com || G²
Bem vinda Bruna, adorei o menu *-*
ResponderExcluirUnskilled
QUE MENU LINDO *O* estou mais que apaixonada por ele, vou favoritar esse tutorial, e... Bem-vinda! Espero não ter te assustado, rs...
ResponderExcluirinteresses-sutis.blogspot.com
Oi, vcs poderiam ensinar como fazer um layot e codificar para por no blog? e q eu queria muito aprender ><
ResponderExcluirBem vinda <3
ResponderExcluirCara que menu lindo, mds *-------* perfeito!
Kiss
With You || Imperfectous
Bem-vinda Bruna :3
ResponderExcluirAmei o menu, fofinho ^-^
mypurpleworl-d.blogspot.com
Adorei o tutorial, achei seu blog lindo. Seguindo aqui, retribui?
ResponderExcluirhttp://www.wondermarcelo.blogspot.com.br/
Aaaachei lindo o tutorial e facil tambem!! obrigada!
ResponderExcluirBlog: http://wwwblogpapoteen.blogspot.com.br/
Lindo o menu, obrigada por mudar nome na lista mas não é Suck and See, é Suck it and See
ResponderExcluir- Suck it and See - Clique aqui e vá ao blog
- Conheça: The Strokes - Nova postagem
Moça seja bem vinda o// vc vai adorar postar aqui, pq aqui é o AA u_u
ResponderExcluirAmei esse menu, super lindo *o* e criativo, acho que irei usar em meu próximo lay :3
XOXO :D || {Joven Clube}
Menu Lindo ♥
ResponderExcluirPosso Me Afiliar ?
Ice Dreams
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 ^^
ResponderExcluirAbraços,
http://www.revolucaonerd.com/
Mebnu muito lindo com certeza. Beijos!
ResponderExcluirhttp://doces-leitoras.blogspot.com.br/
Olá, sigo seu blog a algum tempo e faz um tempinho que não o visito.
ResponderExcluirGostaria 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/
Adorei o menu, muito lindinho! ><
ResponderExcluirhttp://simplekawaii.blogspot.com.br/
Aceita parceria? Pode ser divulgação
ResponderExcluirhttp://sonhosdeumunicornio.blogspot.com.br/