Menu escondido com jQuery

E ai kengarada (adoro chamar vocês de kengos) como vão? (^-^*)/ Sumida? Não né? Ninguém reparou hahaha Sem choromelas e sem mimimi, não quero falar pela milésima vez da faculdade, trabalho e o quinto dos inferno, porque não e porque é chato! Cara, o que é esses debuts tudo que eu to perdendo? Cada piscada um debut, um bafão e menos seguidores (pra variar) O que são aquelas coisas fofas do NCT Dream? Vontade de morder tudo de tão fofos, niver do Kookie né? E eu perdendo tudo ┰ω┰ não é justo!

E o single da CL? Debut? Música promocional? Teste de mercado? Teste de fama? Que raios que foi esse lançamento? É o debut americano? Ainda não? Que merda, porra! Eu quero saber YG! Debuta logo essa guria pelo amor de Deus hahahahaha Se bem que com este lançamento mesmo ela não sendo tão conhecida ainda nos EUA ela estava na posição 15º do ranking da Bilboard. Quem ai curtiu a música? Eu escuto todos os dias desde o lançamento e  não enjoo. Agora comeback do 2ne1 que é bom, nada né? U.U

EU demorei mas trouxe esse tutorial, alguns leitores haviam me pedido mas não tinha postado pela falta de tempo. Então sem delongas e vamos ao tutorial? Mas antes, prestem muito bem atenção certo? (^-^)/

LIVE PREVIEW

Vá até o seu modelo e clique em editar html, dentro procure por:]]></b:skin> e acima dele cole o código abaixo:

.down {
height:0px;
-webkit-transition:all 0.6s;
-moz-transition:all 0.3s;
-ms-transition:all 0.6s;
-o-transition:all 0.6s;
transition:all 0.6s;
}
.up {
height:550px;
padding-left:10px;
padding-right:10px;
z-index:10000000000;
-webkit-transition:all 0.6s;
-moz-transition:all 0.3s;
-ms-transition:all 0.6s;
-o-transition:all 0.6s;
transition:all 0.6s;
}
#naver {
width:17%;
z-index:10;
margin-left:-60px;
bottom:0;
position:fixed;
background-color:#fff;
}
#cont {
width:215px;
font-size:15.1px;
font-family: calibri,cursive;
color:#999;
text-align: justify;
padding:7px 7px 7px 7px;
letter-spacing: 1px;
}
.menu1{
padding-top:4px;
padding-bottom:4px;
padding-left:4px;
padding-right:4px;
background:#fff;
border: solid 5px #BFC9D3;
font-family: Calibri, cursive;
font-weight:300;
font-size:14px;
width:113px;
line-height:18px;
text-transform:uppercase;
letter-spacing:0px;
text-align:center;
color:#999;
display:inline-block;
height:18px;
margin:1px;
text-shadow: 1px 1px 1px #;
margin-bottom:px;
cursor:hand;
}

Para entender melhor sobre este menu, a parte do menu que vocês irão clicar fica onde está escrito menu1 nele vocês irão editar a cor do fundo, a fonte a ser usada e o que vai escrito na frase de ínicio. Para editar o corpo do menu que aparece vocês irão em #naver nele vocês irão editar o tamanho, a margem, se você quiser na esquerda mude os valores até chegar onde quer ou se quiser para a direita apenas mude de left para right e poderão mudar a cor do fundo. Para mudar a parte dentro do corpo vocês irão em #cont nele você irá mudar a fonte a ser usada se quiser escrever algo, o acolchoamento (padding), a cor da fonte e o texto em geral. Para editar a altura que ele sobe vocês irão em #up e nele a única coisa que irão mudar é a altura em que o menu irá aparecer e nada mais. E no #down vocês não irão mudar nada certo?

Depois de tudo editado e salvo você irá em </head> e acima dele irão colocar o código Jquery para fazer o efeito do menu funcionar:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function(){
  $(&quot;.menu1&quot;).click(function(){
    $(&quot;.down&quot;).toggleClass(&quot;up&quot;);
  });
});
</script>

E por último adicione um gadget java script e dentro cole o código abaixo:

<div style="position: fixed; margin-top: 0px; margin-left: -370px;z-index:9999;">
<a class="menu1">Hide menu</a>
<div class="down"id="naver">
<div id="cont">
Olá, aqui você irá escrever o que quer, sobre seu blog, suas metas, seus desejos, agradecimentos, créditos ou o que quiser. O céu é o limite!
</div></div></div>