Menu suspenso para textos

Boa noite galera tudo bem? (⌯⌅⌄⌅) Confesso que estou com uma preguiça no coro e não sabia o que ia postar primeiro, estou tentando entregar os pedidos perdidos da ask que fazia tempinho que eu não tinha atendido. Cara do céu, esses 3 dias em casa eu estou apenas comendo, assistindo filmes e animes, socorro, irei virar um botijão de gás, na verdade meio que já sou um né..Vão me dizer que comer é ruim? Comer é tudo de bom, umas das melhores coisas da vida hehe...

Esse menu é um que foi usado no layout free minimalista, me pediram para criar um menu parecido porém na hora do clique queriam um texto, eu meio que sou teimosa e mesmo assim deixei uma aba para links caso a pessoa queira para algo, ou ela pode tirar, vai da escolha de vocês. Esse menu é tão fofo e tão prático, facilita tanto as coisas. Espero que gostem e façam bom uso dele, eu acho esses tipos de menus legais em blogs de textos ou blogs pessoais, economiza espaço.

LIVE PREVIEW ٩(♡ε♡ )۶

Para usar o menu vá até o seu modelo e clique em editar html e dentro procure por: ]]></b:skin> e quando achar acima dele cole o código:

#back {
position:fixed;
border-radius:1px;
background:#ffffff;
width:151px;
box-shadow: 1px 1px 1px #eee, inset 1px 1px 1px #eee;
-moz-box-shadow: 1px 1px 1px #eee, inset 1px 1px 1px #eee;
box-shadow:  1px 1px 1px #eee, inset 1px 1px 1px #eee;
padding-top:10px;
padding-left:10px;
padding-right:10px;
padding-bottom:7px;
}
#backim {
margin-bottom:9px;
margin-top:-1px;
}
#backim img {
border:solid 1px #d2dadf;
width:150px;
height:auto;
opacity: 0.9;
-webkit-transition: all 2s ease;
-moz-transition: all 2s ease; -o-transition: all 2s ease;
transition: all 2s ease;
}
#backim img:hover {
border-radius:1%;
-webkit-transform: rotate(-360deg); transition-duration: 2s;
opacity: 0.9;
-webkit-transition: all 2s ease;
-moz-transition: all 2s ease; -o-transition: all 2s ease;
transition: all 2s ease;
}
.stuff{
font-family: 'calibri', sans-serif;
width:auto;
text-align:center;
font-size:12px;
text-transform:uppercase;
letter-spacing:1.5px;
margin-top:-6px;
}
.stuff a{
background:#E8E8E8;
font-family: 'calibri', sans-serif;
font-size:12px;
display:block;
margin-bottom:2px;
padding:4px;
color:#fff;
text-shadow: 1px 1px 1px #BAC7CF;
}
.stuff a:hover {
margin-bottom:2px;
background:#;
letter-spacing:0px;
}
#description {
margin:20px 0;
}
#con {
left:45%;
margin-top:220px;
margin-left:420px;
position:absolute;
}

Para funcionar o efeito do texto aparecer em um clique, vá até o html de novo e procure por  </head> e acima dele cole o seguinte código:

<script src='//ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/><script language='JavaScript' src='//dl.dropbox.com/u/35546279/qTip_pinkskulldesign.com_.js' type='text/JavaScript'/>
<script src='//ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/><script language='JavaScript' src='//static.tumblr.com/oiizew6/8B5lzwf17/script.js' type='text/JavaScript'/>
<script src='//static.tumblr.com/7qjmkr5/IUmmdsy41/jquery.style-my-tooltips.js' type='text/javascript'/>
<script src='//static.tumblr.com/3ikgvxs/0TGl4zgpu/jquery.min.js' type='text/javascript'>
</script>
<script type='text/javascript'>
$(document).ready(function(){
$(&quot;.myg&quot;).hide();
$(&quot;.bts&quot;).click(function(){
$(this).next(&quot;.myg&quot;).slideToggle(&#39;fast&#39;);
}); }); </script>

E para usar os links, adicione um gadget java script e dentro cole o seguinte código:

  <div id="con">   
<div id="back">
<div id="backim"><a href="/" title="hello"><img src="https://i.imgur.com/vOK7YPR.png" /></a></div> 
<div class="stuff">
<a class="bts">about</a>
<div class="myg">
<p style="padding-left:3px;text-transform:lowercase;font-size:10px; color: #ACACAC;">Uma descrição fofa e breve sobre você ou escreva o que quiser aqui nesta caixinha de texto.</p>
</div>
<a class="bts">+ links</a>
<div style="margin-top:-4px;"class="myg">
<p>
<a href="/">link</a>
<a href="/">link</a>
<a href="/">link</a>
<a href="/">link</a>
</p>
</div>
</div>
</div>
</div>

Agora vou explicar onde vocês podem mexer e o que podem modificar:

Para mexer no tamanho da caixa do menu vocês procurem por #back aqui vocês podem mudar o tamanho da caixa e a cor do fundo.

Para mexer na imagem do topo procurem por #backim img aqui vocês podem mudar a cor da borda da imagem por algum efeito de transição etc.. No tamanho vocês tem que deixar o mesmo tamanho do corpo, como está ali em cima.

Para mexer nos links procurem por .stuff aqui vocês irão por a fonte que desejarem e o tamanho.

Para mexer no fundo dos links procurem por .stuff a aqui vocês podem modificar a cor do fundo, a sombra de texto e o tamanho da fonte.

E para mudar a o menu de lugar procurem por #con e onde está margin-left e margin-top é onde vocês irão por a altura que querem o menu.