Menu Lateral Deslizante


Me pediram para postar o tutorial do menu lateral que eu estou usando, então estou aqui para ensinar a quem não sabe! É um pouco complicado, mas basta ter atenção ao modificar o código que você consegue. Enjoy~

Para quem não sabe de que menu estou falando, o resultado é esse aqui:


Vá ao seu HTML, aperte F3 e procure por:  ]]></b:skin> .

Após achar a tag, cole acima o seguinte código:
.menuam { width: 185px; padding: 13px; height: 100%; border-right: 8px solid #cbd6df; background: #efefef; 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;  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: #6881AB; color: #fff; 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: 7pt; margin: 5px -10px; text-shadow: 0 1px 1px #; } 

.menuam a:hover { background: #919191; -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; }

Aperte F3 novamente, mas agora procure por:  <body expr:class='&quot;loading&quot; + data:blog.mobileClass'> .

Após achar, cole esse código, acima:
<div class="menuam">
<a rel="nofollow"><font style=" text-transform: none; font: italic 20px georgia;"><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('profile');">nome</a>
<a  href="URL DA PÁGINA" onClick="changeNavigation('ask');">nome</a>
<a href="URL DA PÁGINA" onClick="changeNavigation('extras');">nome</a>
<a href="/random">random</a>                   
</div>
Pronto ><
Espero que tenham gostado, creditem caso usem.
Beijos

16 comentários:

  1. esse menu é super legal, tava procurando ele..
    mas não tinha encontrado.. ai desistir!
    kisses~~

    #>>> http://the--baby.blogspot.com.br/

    ResponderExcluir
  2. Parabéns pela meta! c:
    Quase que a gente posta na mesma hora, mas por sorte vi seu post antes!
    Vou deixar para quarta então..
    Malikisses Xx

    http://euemeujardimsecreto.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. Desculpa, é que achei que você não ia postar hoje. ;3
      Se quiser pode pegar meu dia amanhã.

      Excluir
    2. não tudo bem! (:
      Mas saiba que eu adoro postar aqui! Me sinto bem, sei lá! É ótimo poder ajudar as pessoas! *u*
      Xx

      Excluir
  3. Obrigada por postar o meu pedido *-*

    ResponderExcluir
  4. Acho esse menu muito lindo, adoro
    Beijinhos, e bom final de semana *-*

    Itgirlsiempre.blogspot.com.br

    ResponderExcluir
  5. Parabéns pela meta! Adorei o menu, queria mesmo aprender *--*
    Beijos!

    myacidblackcherry.blogspot.com
    blackcherrytemplates.blogspot.com

    ResponderExcluir
  6. Ownn' Parabéns pelos 300 pandas! ♥♥

    Estava doida para saber sobre esse menu. Muito útil o tuto, adorei. *---*

    Meu Mundinho Colorido

    ResponderExcluir
  7. Eu sempre quis um menu desse, mas não encontrava o tutorial *-* você salvou minha vida kkk' usei e creditei na minha página de Créditos, ok?
    É a primeira vez que passo por aqui e adorei seu blog! Estou seguindo, se gostar segue de volta? camilaejustin.blogspot.com Beeijos >.<

    ResponderExcluir
  8. ah eu já usei esse menu, se pudesse usaria em todo lay (mais iria ficar enjoativo rs), mas ele é muito legal *-*

    ResponderExcluir
  9. Muito legal esse menu, mas eu prefiro aqueles que ficam "à vista" mesmo rs'

    diamantesdeumagarota

    ResponderExcluir
  10. Já conhecia ele , o resultado é lindo viu ? sério eu amo demais ele acho que ele fica bem cute em qualquer blog apesar de não ter tantas COISINHAS MIMOSAS para enfeitar ajrnskd .
    Amei seu blog demais linda sério contribuindo para sua meta se quiser dar um pulinho la no blog

    http://praia234.blogspot.com.br

    ResponderExcluir
  11. É bem maneira esse menu, mas nunca me deu vontade de usar.
    http://ladyalen.blogspot.com

    ResponderExcluir
  12. Adoro esse tipo de menu! É super fofo :D

    Beijos,
    Sim Senhorita (Clique no perfil)

    ResponderExcluir
  13. Adooooorei ~
    Super divo, esse tutorial *-*
    Já estou usando no meu blog, muito bonito
    Parabéns ! Beijos ~

    uniiverso-teen.blogspot.com

    ResponderExcluir
  14. Super divo esse menu, vou usar no próximo layout com certeza :D

    ResponderExcluir

Obrigada pelo seu comentário, sua opinião é muito importante!
Se seu perfil for trancado, não se esqueça de deixar o link do seu blog ou pelo menos o nome, para que eu possa retribuir. ♥

« » +