01 maio 2013

Tutorial - menu deslizante lateral igual ao do blog Sweet Gloss

Tumblr_mk17bpip3i1r2smejo1_500_large

  Muitas de vocês me pediram, mas eu não estava encontrando o tutorial que eu utilizei para fazer esse menu lateral deslizante (do lado esquerdo do blog). Esses dias encontrei um bem parecido no blog Chá & Cupcake. Não sei se é o mesmo que eu usei, mas é bem parecido. Vamos aprender?

  1º passo: copiando e colando

  Vá no seu Layout - Adicionar um Gadget - HTML/JavaScript. De preferência, coloque-o no rodapé da página (embaixo das postagens do blog). Lembre-se de que esse Gadget não deve ter título.

  Nele, cole o seguinte código:

<div class="menuam">


<a rel="nofollow"><font style=" text-transform: none; font: 20px segoe ui light;"><div align="left">Título do Blog</div></font></a>
<a href="/">volte ao início</a>
<a href="URL DA PÁGINA" onClick="changeNavigation;">NOME DA PÁGINA</a>
<a href="URL DA PÁGINA" onClick="changeNavigation;">NOME DA PÁGINA</a>
<a href="URL DA PÁGINA" onClick="changeNavigation;">NOME DA PÁGINA</a>
</div> 

<style>.menuam { width: 185px; padding: 13px; height: 100%; border-right: 8px solid #FF1493; background: #FFFFFF; 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; font-weight: normal;  font: 20px segoe ui light z-index: 12345; }
.menuam: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; }
.menuam a { border: none; background: 
#FFFFFFcolor:#000000; padding: 5px; 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: 10pt; margin: 5px -10px; text-shadow: 0 1px 1px #; }
.menuam a:hover { background: #D8BFD8; -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; }
.menuam a:first-child { margin-top: 10px; } .menuam a:last-child { margin-bottom: 0px; }.menuam a { padding: 4px 6px; }</style>

    2º passo: editando o código

  20px segoe ui light - É o tamanho e a fonte do "Titulo do blog" no menu.
  Título do Blog - É o nome do seu blog avá
  Repita a parte <a href="URL DA PÁGINA" onClick="changeNavigation;">NOME DA PÁGINA</a> de acordo com o número de páginas que você tiver.
  8px solid #FF1493 - É a grossura e a cor da borda do menu (aquela que fica aparecendo mesmo antes de colocar o mouse em cima). No código, ela é rosa.
  background: #FFFFFF - É a cor do fundo do menu. No código, está em branco.
  20px segoe ui light - É o tamanho e a fonte dos nomes das páginas (exceto o Título do Blog).
  background: #FFFFFF - É a cor da barrinha (fundo) de cada link do menu antes de passar o mouse por eles. Está em branco no código.
  color:#000000 - É a cor dos nomes das páginas antes de passar o mouse por eles. No código, está em preto.
  10pt - É o tamanho da fonte dos nomes das páginas (exceto o Título do Blog).
  background: #D8BFD8 - É a cor da barrinha (fundo) de cada link do menu quando o mouse está em cima deles. No código, está em lilás.

  OBS.: Infelizmente no código a cor dos nomes das páginas quando o mouse está em cima deles está em azul, e o código está com um probleminha que eu não consegui de jeito nenhum mudar essa cor. 

  Então é isso, espero que tenham gostado do post... Beeijos >.<

  
  
  
  
  

  

14 comentários :

  1. adorei a dica. vou colocar no meu
    bju

    http://aieuvivantagem.blogspot.com.br/

    ResponderExcluir
  2. Amei o tuto!Sempre quis saber como vc colocou aqui!

    ResponderExcluir
  3. Fica super bonitinho esse menu, mas eu sinceramente prefiro os mais básicos.

    diamantesdeumagarota

    ResponderExcluir
  4. Muito bom tuto, ja postei esse no meu blog *-*

    # Beijinhos, Bruna - Garota da Lua // Official

    ResponderExcluir
  5. amei primeira vez que venho aqui e jas estou seguindo adorei poderia visitar meu bloog? beijos agredeço
    http://princesacomcoleteoficial.blogspot.com.br/

    ResponderExcluir
  6. Adorei o tutorial, acho o resultado lindo demais ♥
    Beijinhos
    Facebook do blog
    conversando-com-a-lua.blogspot.com.br

    ResponderExcluir
  7. otimo tutorial, com certeza muita gente vai usar..

    Beijos,
    Blog
    Loja

    ResponderExcluir
  8. Adorei o seu cantinho flor, tudo muito fofo, beijos mil adoravelfeminice.blogspot.com.b

    ResponderExcluir
  9. AMEI. BEM EXPLICADINHO E FICA LINDO!!! ^^


    SAIBA COMO CONSEGUIR MAIS SEGUIDORES PARA SEU BLOG DE FORMA MUITO FÁCIL!!!

    http://inspiracaoentrelinhas.blogspot.com.br/2013/05/consiga-mais-seguidores-para-seu-blog.html

    ResponderExcluir
  10. Acho lindo esse menu! Quem saiba no próximo lay eu não uso né?! ótimo tutorial :3
    Beijos!

    Anel de Lacinho

    ResponderExcluir
  11. Adorei o tutorial,bem simples.
    sempre achei fofo.
    beijos

    ResponderExcluir
  12. Oie amei o tutorial!
    seguindo retribui?
    Beijoos
    http://tvmirelen.blogspot.com.br/2013/05/comprinhas-de-abril-2013.html#comment-form

    ResponderExcluir
  13. E se eu quiser mudar pro outro lado > como eu faço

    ResponderExcluir
  14. Ótimo tuto Camila. Preciso de uma ajuda, quando eu coloco no meu site, ele não fica assim "deitado" e sim na horizontal mesmo, o que fazer? obrigado.

    ResponderExcluir


- Não tenho vagas para afiliados;
- Não participo de sorteios, mas fique à vontade para divulgar;
- Não aceito selinhos, e tags talvez;
- Se quiser que eu retribua é só pedir, não se esqueça de deixar sua URL;
- Volte sempre!