Tutorial : Menu Lateral

Hooy Amores
Como vcs estão?
No post anterior,eu tinha dito que tinha separado uma big seleção de tutoriais,este é 1° 
E o tuto de hj é bem Útil e ultra fofo!Agora,chega de papo,ou seja, - papo + ação 
(  Atenção : Dependendo do Modelo do seu Blog ele ficará bom,mais se for um template que o menu não ''suporte'',o menu ficará desajustado  ,ñ sei se expliqei direito kk )
(Tutorial pertencido ao blog : Sweet Gloss,devidos créditos)
1° Copiando & Colando *

 (Para acompanhar o Tutorial,clique em ''Continue Lendo>>'')
Vá no seu Layout>Acicionar um Gadget>HTML/JavaScript
Coloque no rodapé da página (embaixo das postagens)
Este 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: #FFFFFF; color:#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° 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.

E prontinho,clike em Salvar e visualize seu Blog para ver como ficou =)