Tutoriais - 2 em 1

Hello ! Garotinhas modernas.

Hoje venho com um super tutorial 2 em 1 . Como assim dois em um ? Bom gente, como eu resolvi trazer  tutoriais para vocês de menus então eu resolvi trazer dois tutoriais no mesmo post, Para vocês usarem na pagina do seu blog! Temos o  "menu-pikachu" que aprendi em The Loves,  menu "Desires" em Sweet poison. são tutoriais fáceis e super lindos.

Vamos Lá ? 

                                         Menu pikachu                        Menu Desires

 

Menu pikachu

Vai em seu HTML, dê um CTRL + F  e procure por:

]]></b:skin>

acima dele cole o código:

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

}

Caso não quiser o fundo com imagem , troque o:

background: url("http://data.whicdn.com/images/27954221/Free-Desktop-Wallpaper-Violets-2000x1650_large.jpg") repeat;

Por:

background: #f2f2f2; /* Cor de Fundo */

 Quando terminar de colar o código salve e vá em layout e

 adicionar HTML//JavaScript e cole:

<a href="LINK DA PÁGINA"><pikachu>NOME DA PÁGINA</pikachu></a> 

<a href="LINK DA PÁGINA"><pikachu>NOME DA PÁGINA</pikachu></a>

<a href="LINK DA PÁGINA"><pikachu>NOME DA PÁGINA</pikachu></a> 

Prontinho, espero que tenha gostado !

Vamos para o segundo tutorial ?

Menu Desires

Vá em Design> Editar HTML. De um Ctrl F e procure por:

]]></b:skin>

 Acima acima de ]]></b:skin> , cole:

.sidenav a:link, .sidenav a:active, .sidenav a:visited {

width:200px; /* Tamanho dos links */

color:#bea48f; /* Cor dos links */ 

display: inline-block; /* Modo de exibição */

text-decoration:none; /* Efeitos do texto. Normalmente está desativado. */

font-family:segoe ui light; /* Fonte */

font-size:12px; /* Tamanho da fonte */

padding:2px; /* Margem interna */

padding-left:10px; /* Margem interna */

border-left:10px solid #bea48f; /* Estilo da borda lateral dos links */

margin-top:2px; /* Margem interna */

-webkit-transition-property:color, text; /* Efeito fade */

-webkit-transition-duration: .4s; /* Efeito fade */

-moz-transition-duration: .4s; /* Efeito fade */

-webkit-transition-timing-function: linear, ease-in; /* Efeito fade */

}

.sidenav a:hover {

background-image:url(http://media.tumblr.com/tumblr_lkl75bsU9n1qfamg6.png); /* Mini gif do hover */

background-repeat:no-repeat; /* Repetição do mini gif. Normalmente está desativado. */

background-position:right; /* Posição do mini gif */

border-left:30px solid #bea48f; /* Estilo da borda lateral em hover */

width:180px; /* Tamanho dos links */

color:#e9b3ff; /* Cor dos links em hover */

padding-left:20px; /* Margem interna */

-webkit-transition-duration: .4s; /* Efeito fade */

-moz-transition-duration: .4s; /* Efeito fade */

}

Agora clique em Salvar !!!

Vá em adicionar novo gadget de HTML/Javascript e cole o código abaixo:

<div class="sidenav"><a href="URL 1">LINK 1</a><a href="URL 2">LINK 2</a>
<a href="URL 3">LINK 3</a>
<a href="URL 4">LINK 4</a>
<a href="URL 5">LINK 5</a>
</div>

Pronto agora salve. *.*

Bom Meninas espero que tenham gostado e até o próximo post.