26.5.13

Tutorial - Menu Marshmallow


Réllou morangos! 

Vocês devem está sentindo a falta de posts aqui né? Desculpem mesmo mas não é minha culpa, é da Dona Inspiração ela recentemente está de mal de mim, sabe? e não quer me visitar mais.. (buah) Não está nada fácil nem para mim, nem para a Nana, aliás falando na Nana, ela estava doente e sem net e não pode postar.. eu também ano cansada da escola é prova e trabalho, atrás do outro, sem descanso! Já estou contando os segundos para as férias... 


Enfim, já estou preparando o próximo layout.. mas se vocês tiverem sugestões comentem, okay? Vim postar á pedido da Elaine, um menu super lindo, visualizem aqui (wwwvocê irá ser redirecionador ao layout free que fiz recentemente para vocês, lembram? Créditos ao PG!



Vá no editor de HTML e clique nos três pontinhos desse código:
  
Aperte F3 e pesquise por ]]></b:skin>. Acima disso cole:
@font-face {
font-family: 'Pixelade'; src: url('http://static.tumblr.com/ig73lmp/FNdmcixx3/pixelade.ttf');
}
/* Menu Marshmallow por Pequena Garota*/
marsh{
color: #949494; /*cor da fonte*/
text-align:center;
font-family: Pixelade; /*não altere*/
font-size: 13px;
background: #FEF2F1; /*fundo do menu*/
padding: 2px; /* largura do menu */
float: left;
margin: 2px;
width: 22%; /* tamanho do menu */
-webkit-transition-duration: .80s;
box-shadow: inset 0 0 18px #ffe4e1, 0 0 3px #FFD1CC; /* sombra interna */
border-radius: 3px; /*bordas arredondadas*/
}
marsh:hover{
background: #f0f8ff; /*fundo do menu ao passar o mouse*/
color: #949494; /*cor da fonte ao passar o mouse*/
-webkit-transition-duration: .80s;
box-shadow: inset 0 0 18px #D7ECFE, 0 0 3px #afeeee; /* sombra interna */
border-radius: 3px; /*bordas arredondadas*/
}

Se quiser mudar as cores, personalize somente o que está em negrito da maneira que preferir. Agora adicionar ao blog adicione um Gadget HTML/JavaScript e cole o seguinte código:
<div><a href=" LINK "><marsh> NOME</marsh></a>
<a href=" LINK "><marsh> NOME </marsh></a>
<a href=" LINK "><marsh> NOME </marsh></a>
<a href=" LINK "><marsh> NOME </marsh></a>

14 comentários:

  1. ownnn esse menu é lindooo amei demaisss o/
    acervo-de-livros.blogspot.com

    ResponderExcluir
    Respostas
    1. Também acho, ele é muuito fofo! Obrigada Elane!

      Excluir
  2. Menu muito fofinho :3
    Acessa o meu blog? littleclumsyprincess.blogspot.com ! Obrigada

    ResponderExcluir
    Respostas
    1. Também acho Luiza!
      Acesso sim flor! ~ visitando ~

      Excluir
  3. Eu acho esse menu muito fofo *U*
    Com certeza vou usar no próximo layout que eu fizer...

    Beijos,
    blogmeurecanto.blogspot.com

    ResponderExcluir
    Respostas
    1. Muito fofo é pouco! srsr'
      Use mesmo, ele é muito lindo! Beijos!

      Excluir
  4. awwwwn ele é lindo , amei *o*

    Beijos'
    mundodasgarotasforever.blogspot.com.br

    ResponderExcluir
  5. Ele é super fofo *o*
    Nem preciso colocar ele, eu uso aquele lay, achei super cute ><

    infi-nity-cloud.blogspot.com

    ResponderExcluir
  6. Owwnt muito bom o tuto.

    http://fantasyimaginess.blogspot.com.br/

    ResponderExcluir
  7. oii flor amo seu blog, olha criei um blog e ele veio com uma borda envolta dos post que me irrita mtt , dah uma olhada http://selinhosecaramelos.blogspot.com.br/
    vc pode me ajuda pff??
    bjss responda

    ResponderExcluir
  8. Que menu bonito, adorei!

    Beijos
    www.mundodocedelicioso.com

    ResponderExcluir
  9. Oi Luuh, eu amei seu blog, ele é tão fofo, da uma passadinha aqui pra mim: http://coisasdemeninasbffs.blogspot.com
    Se gostar segue ta?
    Abraço!

    ResponderExcluir
  10. nossa que bloguinho mais lindo parabéns, te segui, segue de volta?!
    beijão e fica com deus..
    http://diariodecoralinejones.blogspot.com.br

    ResponderExcluir

Heey!
Está pensando em comentar?! Fique à vontade!
✖ - Aceito "Seguindo, segue de volta?'' desde que a pessoa esteja realmente seguindo!
✖ - Não aceito afiliação pelo comments só aqui
✖ - Os comentários de criticas e elogios são bem vindos, desde que seja criticas construtivas!.
✖ - Perguntas, dúvidas e pedidos? Apenas na ask por favor!~
✖ - Aceito tags e selinhos, avise pelos comments ♥
~ Leio Sempre e respondo a todos os comentários!