8 de julho de 2012

Tutorial-Menu pikachu

 Oii pessoal , tudo bem?Eu espero q sim **-** Hoje vim ensinar como colocar um menu pikachu...Os créditos vai para vamos começar?Então vamos lá ;D , aee antes de começar vou mostrar como é esse menu...Veja abaixo:
                                    

Pronto agr q vc viu,vamos começar...Primeiro vá em Design do seu blog depois em Modelo e depois em Editar/HTML,depois disso aperte em Ctrl+F e procure por:  


]]></b:skin>


Cole a cima de ]]></b:skin> esse código abaixo:
                                 
/* Menu Pikachu por The Lovers */
pikachu{
background:  #f8f8ff; /* Cor de Fundo */
color: #000000; /* Cor da Fonte */
border-left: 3px solid #ffdab9; /* Cor da borda lateral esquerda */
border-right: 3px solid #ffdab9; /* Cor da borda lateral direita */
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
display:inline; /* Modo de exibição */
border-radius: 10px;
-webkit-transition-duration: .50s;
padding: 6px;
margin: 2px;
font-size: 11px; /* Tamanho da fonte */
text-align: center;
width: 25%; /* Tamanho do menu*/
float: left;
font-family:  Arial; /* Nome da fonte do menu */
}
pikachu:hover{
border-left: 3px solid #8470ff; /* Cor da borda lateral esquerda ao passar o mouse*/
border-right: 3px solid #8470ff; /* Cor da borda lateral direita ao passar o mouse */
background: url("http://data.whicdn.com/images/27954221/Free-Desktop-Wallpaper-Violets-2000x1650_large.jpg") repeat; /* url da imagem de fundo */
color: #000000; /* Cor da Fonte ao passar o mouse */
text-shadow: 0px 0px 2px #6b6b6b; /* cor da sombra do texto do menu */
display:inline; /* Modo de exibição */
-webkit-transition-duration: .50s;
padding: 6px;
margin: 2px;
font-size: 11px; /* Tamanho da fonte do menu ao passar o mouse */
text-align: center;
width: 25%; /* Tamanho do menu ao passar o mouse */
float: left;
font-family: arial; /* Nome da fonte do menu ao passar o mouse */
}
                              Onde esta de vermelho complete com  essa tabela de cores

 troque: http://data.whicdn.com/images/27954221/Free-Desktop-Wallpaper-Violets-2000x1650_large.jpg por a imagem que vc quer!:

background: url("http://data.whicdn.com/images/27954221/Free-Desktop-Wallpaper-Violets-2000x1650_large.jpg") repeat;
                                                    E para colocar em seu blog vá em Modelo depois em Adicionar um Gadgets e adicione HTML/JavaScript e cole esse código abaixo quantos vc quiser:


 <a href="LINK DA PÁGINA"><pikachu>NOME DA PÁGINA</pi
Onde estar escrito de azul cole o Link da página e onde estar de vermelho coloque o titulo da página...
                                     Se estiver tudo certo salve e visualize!
                                                         Tchau bjos pessoal ;*
                                             

Um comentário:

  1. Oláa! Amei o blog já estou seguindo!
    Gostaria de saber si voc}ê poderia fazer um tutu esplicando como si faz um selinho com o codico dele embaixo, tipo um link-me!

    http://adolescenteambulante.blogspot.com

    ResponderExcluir

Comente a vontade, desde que saiba respeitar ;)
Ah, e não é necessário fazer uma conta para comentar, basta colocar como anônimo.

Emoticons:

♥❤∞ ☆ ★ ✖ 。◕‿◕。® ™ ☏✿゚✤
(◕‿◕✿) 。◕‿◕。 ⊱✿◕‿◕✿⊰(◡‿◡✿)(◕〝◕)◑▂◐ ◑0◐ ◑︿◐ ◑ω◐ ◑﹏◐ ◑△◐ ◑▽◐
●▂● ●0● ●︿● ●ω● ●﹏● ●△● ●▽●
⊙▂⊙ ⊙0⊙ ⊙︿⊙ ⊙ω⊙ ⊙﹏⊙ ⊙△⊙
≡(▔﹏▔)≡ ( ͡° ͜ʖ ͡°)