Menu pop up para afiliados

Boa tarde amores tudo bem? Milagre eu estar postando a tarde não é mesmo? Agora eu posso! Estou de férias de uns dois meses hahaha, e enquanto eu estiver em casa vou mais é aproveitar mesmo pois só Deus sabe quando terei férias prolongadas assim novamente. Gente, eu sai para pagar umas contas e acabei me descontrolando um pouco hahaha, fui pagar e gastei mais do que paguei, comprei sapatilhas que eu tanto queria, comprei calças que eu estava a muito tempo atrás caçando e não encontrava, blusinhas básicas e maquiagens fofinhas.

Mudando de assunto, uma leitora me pediu um modelo de menu pop up, aquele que quando você clica abre algo, ex: caixas de diálogos, textos e até mesmo menus. Eu já havia usado este modelo de menu pop up em outros layouts por achar bem prático pois deixava a área da sidebar mais organizada e não tão carregada. O modelo deste menu é bem simples e super fácil de ser editado, vocês só tem que prestar atenção nos detalhes e o que se pede. O menu é de uma blog amigo e quem o fez na verdade foi a Wendy do Bunny Crazy eu apenas modifiquei e simplifiquei para vocês entenderem melhor certo?

LIVE PREVIEW (*^- ^)~

Vá até o seu modelo e cliquem em editar html, dentro procure por ]]skin; e acima dele cole o seguinte código:

#popup{
top: 100%;
left: 30%;
width: 400px;height: 116px;display: none;
position: fixed;
margin: -450px 0 0 -50px;padding: 20px 20px 20px 20px;
background: #E3E4E8;border: 1px solid #D0D5E0;-webkit-transition: all 0.1s linear;
-moz-transition: all 0.1s linear;
-o-transition: all 0.1s linear;
}
exit{
margin:0px;
margin-top:90px;margin-bottom:px;
margin-left:px;
padding: 5px 5px 5px 5px;
display: inline-block;
font-family: Muli;
font-size: 17px;
color: #fff;
text-shadow: 1px 1px 1px #AEBBCC;
float: center;
text-align: center;
line-height:15px;
text-transform:uppercase;
background: #E3E4E8;border: 1px solid #D0D5E0;width: 150px;height: 15px;-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
-webkit-transition: all 0.1s linear;
-moz-transition: all 0.1s linear;
-o-transition: all 0.1s linear;
}
open{
margin:0px;
margin-top:-2px;margin-bottom:-2px;margin-left:px;
padding: 5px 5px 5px 5px;
display: inline-block;
font-family: Muli;
font-size: 17px;
color: #fff;
text-shadow: 1px 1px 1px #AEBBCC;
float: center;
text-align: center;
line-height:32px;
text-transform:uppercase;
background: #E3E4E8;border: 1px solid #D0D5E0;width: 220px;height: 32px;-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
-webkit-transition: all 0.1s linear;
-moz-transition: all 0.1s linear;
-o-transition: all 0.1s linear;
}
afiliados{
color:#C2C2C2;
background: #eee; line-height:20px;
margin:1px;
margin-bottom:5px;
margin-left:px;
padding:3px;
display: inline-block;
text-shadow: 1px 1px 1px #fff;
font-family: 'Sniglet', Trebuchet MS;
font-weight: 300;
letter-spacing: 2px;
text-transform: uppercase;
text-align: center;
font-size: 8px;
height:20px;width: 73px;float:left;
border-radius:1px;
opacity:0.8;-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-o-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
-webkit-transition: background 0.9s linear;
-webkit-transition: all 0.9s ease-out;
-moz-transition: all 0.9s ease-out;
}
afiliados:hover{
cursor:hand;
background:#BFC9D3; font-family: 'Sniglet', Trebuchet MS;
font-weight: 300;
letter-spacing: 2px;
text-transform: uppercase;
text-align: center;
font-size: 8px;
color:#FFF;
opacity: 1;
text-shadow: 1px 1px 1px #BFC9D3;
-webkit-transition: all 0.5s ease-in-out;
box-shadow: inset 0px -12px #BFC9D3, inset 0px 15px #BFC9D3;}

Onde eu grifei de cor mais escura é onde vocês irão modificar, como altura, largura, cores e tamanhos. Onde está #popup{ é o corpo do menu. no caso o fundo do menu grande. E onde está exit{ é o botão de fechar do pop up. Onde está open{ é onde fica o título do menu no caso onde está escrito afiliados. E por último onde está escrito afiliados é o menu que vai dentro do pop up, vocês podem completar com um menu do gosto de vocês se quiserem.

Salve, depois vá em layout e adicione um html java script e dentro cole o seguinte código:

<center>
<div id="popup" class="popup">
<p>
<center>
<div style="position: absolute; margin-top: -20px; left:17px;z-index:;">
<a href='/'><afiliados>vaga</afiliados></a>
<a href='/'><afiliados>vaga</afiliados></a>
<a href='/'><afiliados>vaga</afiliados></a>
<a href='/'><afiliados>vaga</afiliados></a>
<a href='/'><afiliados>vaga</afiliados></a>
<a href='/'><afiliados>vaga</afiliados></a>
<a href='/'><afiliados>vaga</afiliados></a>
<a href='/'><afiliados>vaga</afiliados></a>
<a href='/'><afiliados>vaga</afiliados></a>
<a href='/'><afiliados>vaga</afiliados></a>
<a href='/'><afiliados>vaga</afiliados></a>
<a href='/'><afiliados>vaga</afiliados></a>
<a href='/'><afiliados>vaga</afiliados></a>
<a href='/'><afiliados>vaga</afiliados></a>
<a href='/'><afiliados>vaga</afiliados></a>
</div>
</center>
</p>
<script type="text/javascript">
   function fechar(){
     document.getElementById('popup').style.display = 'none';
   }
   function abrir(){
     document.getElementById('popup').style.display = 'block';
     setTimeout ("fechar()", 10000);
   }
  </script>
<p>
<small class="fechar"><a href="javascript: fechar();">
<exit>Feche a caixa</exit></a></small></p>
</div>
<p>
<a href="javascript: abrir();">
<open>Afiliados</open></a>
<a href="javascript: fechar();"></a></p>
</center>

<div id="popup" class="popup">
<p><center>
<div style="margin-left: -21px; margin-top: -33px;">
<div class="barra">Titulo</div></div></center></p></div> 

 Já nos códigos do menu a única coisa que irão mexer é onde está os links do menu, se quiserem por os seus é só retirar o daqui e colocar o código do seu menu escolhido no mesmo lugar certo?