Menu marshmallow

05 julho 2013

LoginGram | Instagram Web Viewer

                                                         Yo Minna-san

Tudo bem com vocês? Eu nunca postei aqui, na verdade eu estou meio atrasadinha nas postagens. Mas como o blog está parado e estou livre vou postar.

Hoje eu trouxe um menu bem cute para usar na sidebar (ou não).

Então, vamos ao menu?


Primeiro, vá no HTML do seu blog e clique em Formatar modelo, depois disso aperte F3 e pesquise por:

]]></b:skin>
Depois de ter achado esse código, cole antes dele o seguinte:


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

Edite e salve, agora vá no layout do seu blog e adicione um gadget HTML/JavaScripte cole nele:

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

Edite com os links e os nomes das páginas e pronto,  está feito o menu.

~Kisses
Comentários
0 Comentários

Nenhum comentário:

Postar um comentário

© Dilemas Indies - 2014. Todos os direitos reservados - Criado por: Bárbara Nascimento - Tecnologia do Blogger. imagem-logo