Tutorial: Fazendo Menu Deslizante

Me pediram muito o tutorial do Menu deslizante que fiz no Barbie Fashion News (www) que é simplesmente divino, já que não pega nenhum espaço dos Gadgets! O tutorial é fácil, mas, qualquer dúvida fala comigo! Vamos ver o tutorial? 

FELIZ PÁSCOA!

1. No Blogger, vá em Design> Editar HTML.

2. Tecle Ctrl F e procure por:

]]></b:skin>

3. Logo acima dessa tag, cole o código abaixo:

.deslizante {

width: 185px; */ Largura do menu */

padding: 13px;

height: 100%; */ Altura do menu */

border-right: 8px solid #cbd6df; */ Cor e estilo da borda da direita */

background: #efefef;  */ Cor do background */

color: #;

top: 0;

margin: 0;

position: fixed;

left: -200px;

height: 100%;

-webkit-transition: all .3s ease-out; 

-moz-transition: all .3s ease-out;

-o-transition: all .3s ease-out;

transition: all .3s ease-out;

overflow: hidden;

cursor: default; */ Cursor */

font-weight: normal; 

z-index: 12345;

}

.deslizante:hover {

left: 0;

-webkit-transition: all .3s ease-out;

-moz-transition: all .3s ease-out;

-o-transition: all .3s ease-out;

transition: all .3s ease-out;

}

.deslizante a {

border: none;

background: #6881AB; */ Cor do background dos links do menu */

color: #fff;

padding: 5px; */ Cor da fonte */

display: block;

width: 100%;

text-transform: uppercase;

-webkit-transition: all .1s ease-out;

-moz-transition: all .1s ease-out;

-o-transition: all .1s ease-out;

transition: all .1s ease-out;

font-size: 7pt;

margin: 5px -10px;

text-shadow: 0 1px 1px #;

}

.deslizante a:hover {

background: #919191; */ Cor do background dos links hover */

-webkit-transition: all .1s ease-out;

-moz-transition: all .1s ease-out;

-o-transition: all .1s ease-out;

transition: all .1s ease-out;

padding-left: 20px;

}

.deslizante a:first-child {

margin-top: 10px;

}

.deslizante a:last-child {

margin-bottom: 0px;

}

.deslizante a { padding: 4px 6px; }

4. Edite o código de acordo com as partes em negrito e salve.

5. Agora vá para Elementos da página.

6. Adicione um novo gadget de HTML/Javascript e cole nele o seguinte código:

<div class="deslizante">

<a rel="nofollow"><font style=" text-transform: none; font: italic 20px georgia;"><div align="left">Nome do seu blog</div></font></a>

<p>

<a href="Link 1">Nome do link</a>

<a  href="Link 2">Nome do link</a>

<a  href="Link 3">Nome do link</a>

<a href="Link 4">Nome do link</a>

<a href="Link 5">Nome do link</a>

<br>                    

</div>

7. Edite as partes em negrito e salve.

O Tutorial foi tirado do Sweet Poison, então, totalmente créditos à eles. Não mudei nada, porque já está simplesmente perfeito o entendimento. Este Tutorial não funciona em todos os tipos de layout, então, quando colocar a dúvida, ou que deu erro, já me fale qual é o nome do layout.

Abraços, Cáah!