7 de fev. de 2013

Tutorial: Menu Marshmallow


Oláá pessoal!! 
Tudo bom??

Hoje estou com uma preguiça enorme para postar, meus olhos estão se fechando enquanto escrevo essa postagem. Eu já volteia  estudar na Terça-Feira,  e estava fazendo o novo layout do portfólio. Que inclusive já está aberto pra vocês. Para ver, clique aqui.


Bom, pra não ficar muito tempo sem postar, trouxe hoje um tutorial de um menu, que se chama Menu Marshmellow. Eu achei ele no Pequena Garota, então créditos a Viih. O menu é esse:




Vá no editor de HTML do seu blog e pesquise por ]]></b:skin>. Acima do código, cole:

@font-face {font-family: 'Pixelade';src: url('http://static.tumblr.com/ig73lmp/FNdmcixx3/pixelade.ttf');}

Esse é o código da fonte do menu. Ela está instalada no seu modelo, então você pode usar a fonte em outras coisas.
Após isso, antes de ]]></b:skin> cole:

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

Esse é o código do menu. É fácil personaliza-lo! Altere somente o que está em negrito

Atenção: 
box-shadow: inset 0 0 18px #D7ECFE, 0 0 3px #afeeee; /* sombra interna */

 Para colocar no seu blog, adicione um gadget de html/js e cole:

<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>


Espero que tenham gostado. 
Beijos,
Pâm

9 comentários:

  1. Menu super fofo, mas eu não vi nada roxo :s Tem uma campanha para você la no blog ^~^

    Diariodeuma-cereja.blogspot.com

    ResponderExcluir
  2. Muito bacana a dica. Até mais, e um bom feriadão.

    http://desventuras-em.blogspot.com.br/

    ResponderExcluir
  3. Interessante o tuto amadinha.. super util a variação de menu

    Um excelente final de semana amadinha.. beijão

    ( ᐵ ᗜ ᑈ)ᘉ Endereço>> Dany's Place ▓ ▓ Tutorial
    ▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓

    ResponderExcluir
  4. Anônimo9/2/13 19:40

    Tutorial perfeito,Pame, eu estava co preguiça tambem, mas como é o aniversario do meu blog,TIVE que postar u3u.
    Beijos.

    ResponderExcluir
    Respostas
    1. Obrigada ^^ A preguiça é a maior inimiga dos bloggeiros.

      Excluir
  5. Que tutorial lindo *oooooooooo*
    Vou fazer em um Lay :)
    -Sem retirar os créditos
    Carla Paixão/Cherry Land


    www.terra-da-cerejaa.blogspot.com

    ResponderExcluir

Informações Básicas de Comentários(IBC):
-Ler não mata, então leia o post antes de comentar
- Não serão aceitos comentários ofensivos.
- Aceito pedidos para seguir, se estiver seguindo o blog...
- Respondo e retribuo todos os comentários.


Obrigada por Comentar!!