8 de abr de 2012

Tutorial: Fazendo Menu Deslizante

6780171619_e88547d13e_z_large
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!

Um comentário:

Anônimo disse...

cáah,eu queria muiito fazer isso no meu blog,mas n tenho essa capacidade :S
preciso muito da sua ajuda!
By:Bianca Ferraz