Widget especial

• Descrição:
  

Tem como fornecer este widget:
Fiz a imagem conforme os cliques que dei em cada menuzinho


Vi ele aqui: http://publicando.maisforum.com/

O problema é que só aparece para staffs.

• Informações:
  

Código:

<script src="http://illiweb.com/fa/js_16/collapsible_faq.js" type="text/javascript"></script>
<script>
jQuery(document).ready(function() {
  jQuery('.toggleable').css('display', 'none');
 
  jQuery('#forunslist').click( function() {
      jQuery('#toggle1').animate({
        width: 'toggle',
        height: 'toggle',
        opacity: 'toggle'
      }, 4000);

      jQuery('#toggle2').animate({
        width: '0px',
        height: '0px',
        opacity: '0%',
        display: 'block',
        width: 'toggle',
        height: 'toggle',
        opacity: 'toggle'
      }, 4000);
  });
 
  jQuery('#forunslist2').click( function() {
      jQuery('#toggle2').animate({
        width: 'toggle',
        height: 'toggle',
        opacity: 'toggle'
      }, 4000);

      jQuery('#toggle1').animate({
        width: '0px',
        height: '0px',
        opacity: '0%',
        display: 'block',
        width: 'toggle',
        height: 'toggle',
        opacity: 'toggle'
      }, 4000);
  });
});
</script><div id="toggle1">

<dl class="faq" style="margin-bottom: -1px !important;"><dt></dt><dd onclick="return CFAQ.display('l1', false);"><div style="cursor: pointer;" onclick="return CFAQ.display('l1', true);" onfocus="this.blur();"><img src="http://2img.net/i/fa/fdf/questions.png" style="width: 15px;height: 15px" border="0"> Forumeiros e você</div></dd><dd style="display:none;" id="l1"><span style="margin: 0pt 0px 0pt 0px; display: block;"><a href="http://ajuda.forumeiros.com/Regulamento-e-staff-f4/">Regulamento e staff</a></span><span style="margin: 0pt 0px 0pt 0px; display: block;"><a href="http://ajuda.forumeiros.com/Anuncios-e-atualizacoes-f1/">Anúncios e atualizações</a></span><span style="margin: 0pt 0px 0pt 0px; display: block;"><a href="http://ajuda.forumeiros.com/-t23.htm">Perguntas e respostas...</a></span><span style="margin: 0pt 0px 0pt 0px; display: block;"><a href="http://ajuda.forumeiros.com/-t6745.htm">Tutoriais e astúcias</a></span></dd><dd onclick="return CFAQ.display('l2', false);"><div style="cursor: pointer;" onclick="return CFAQ.display('l2', true);" onfocus="this.blur();"><img src="http://2img.net/i/fa/fdf/admin.png" style="width: 15px;height: 15px" border="0"> Ajuda e suporte</div></dd><dd style="display:none;" id="l2"><span style="margin: 0pt 0px 0pt 0px; display: block;"><a href="../problemas-de-conexao-f6/">Problemas de conexão</a></span>  <span style="margin: 0pt 0px 0pt 0px; display: block;"><a href="../problemas-com-um-script-f7/">Questões sobre códigos</a></span>  <span style="margin: 0pt 0px 0pt 0px; display: block;"><a href="../problemas-com-o-painel-de-controle-f8/">Questões sobre Painel C...</a></span>  <span style="margin: 0pt 0px 0pt 0px; display: block;"><a href="../administrar-a-aparencia-do-seu-forum-f9/">Questões sobre a aparência</a></span>  <span style="margin: 0pt 0px 0pt 0px; display: block;"><a href="../problemas-diversos-f10/">Questões diversas</a></span></dd><dd onclick="return CFAQ.display('l3', false);"><div style="cursor: pointer;" onclick="return CFAQ.display('l3', true);" onfocus="this.blur();"><img src="http://2img.net/i/fa/fdf/magic.png" style="width: 15px;height: 15px" border="0"> Serviços para usuários</div></dd><dd style="display:none;" id="l3"><span style="margin: 0pt 0px 0pt 0px; display: block;"><a href="http://ajuda.forumeiros.com/criacoes-graficas-f71/">Criações Gráficas</a></span><span style="margin: 0pt 0px 0pt 0px; display: block;"><a href="/-h2.htm">Galeria de trabalhos gráficos</a></span>  <span style="margin: 0pt 0px 0pt 0px; display: block;"><a href="../hitskincom-tire-suas-duvidas-f24/">Hitskin.com</a></span><span style="margin: 0pt 0px 0pt 0px; display: block;"><a href="http://ajuda.forumeiros.com/-c9/">Espaço publicidade</a></span><span style="margin: 0pt 0px 0pt 0px; display: block;"><a href="http://ajuda.forumeiros.com/forum-de-analises-f50/">Fórum de análises</a></span></dd><dd onclick="return CFAQ.display('l4', false);"><div style="cursor: pointer;" onclick="return CFAQ.display('l4', true);" onfocus="this.blur();"><img src="http://2img.net/i/fa/fdf/fenetres.png" style="width: 15px;height: 15px" border="0"> Miscelânea</div></dd><dd style="display:none;" id="l4"><span style="margin: 0pt 0px 0pt 0px; display: block;"><a href="http://ajuda.forumeiros.com/sugestoes-e-melhoras-f48/">Sugestões / Melhoras</a></span><span style="margin: 0pt 0px 0pt 0px; display: block;"><a href="../discussoes-gerais-f12/">Discussões gerais</a></span></dd><dd onclick="return CFAQ.display('l5', false);"><div style="cursor: pointer;" onclick="return CFAQ.display('l5', true);" onfocus="this.blur();"><img src="http://i47.tinypic.com/1115fmg.png" style="width: 15px;height: 15px" border="0"> Forumeiros</div></dd><dd style="display:none;" id="l5"><span style="margin: 0pt 0px 0pt 0px; display: block;"><a href="http://www.forumeiros.com/" target="_blank">Criar Fórum grátis</a></span><span style="margin: 0pt 0px 0pt 0px; display: block;"><a href="http://www.forumeiros.com/pt/criar-forum/condicoes-gerais.htm" target="_blank">Condições Gerais</a></span><span style="margin: 0pt 0px 0pt 0px; display: block;"><a href="http://www.forumeiros.com/pt/ferramentas/" target="_blank">Ferramentas de usuário</a></span><span style="margin: 0pt 0px 0pt 0px; display: block;"><a href="http://www.forumeiros.com/pt/litigation/" target="_blank">Litígio</a></span><span style="margin: 0pt 0px 0pt 0px; display: block;"><a href="http://www.directorioforuns.com/" target="_blank">Diretório dos fóruns</a></span></dd><dd onclick="return CFAQ.display('l6', false);"><div style="cursor: pointer;" onclick="return CFAQ.display('l6', true);" onfocus="this.blur();"><img src="http://www.criarumblog.com/rsc/img/logo_blog.png" style="width: 15px;height: 15px" border="0"> Outros serviços</div></dd><dd style="display:none;" id="l6"><span style="margin: 0pt 0px 0pt 0px; display: block;"><a href="http://pt.hitskin.com/" target="_blank">HitSkin</a></span><span style="margin: 0pt 0px 0pt 0px; display: block;"><a href="http://www.criarumblog.com/" target="_blank">Criar Blog grátis</a></span><span style="margin: 0pt 0px 0pt 0px; display: block;"><a href="http://www.servimg.com/" target="_blank">Servimg</a></span></dd></dl><div style="font-size:110%; margin-top: 8px;"><a href="http://www.orkut.com/Main#Community.aspx?cmm=81505901" target="_blank"><img src="http://2img.net/i/fa/admin/icones/puce_bleu.png">  Forumeiros no Orkut</a><br><a href="http://www.facebook.com/s.php?q=portugueses&amp;init=q#/pages/Forumeiros/49653389908" target="_blank"><img src="http://2img.net/i/fa/admin/icones/puce_bleu.png">  Forumeiros no Facebook</a></div><div style="font-size:110%; margin-top: 8px;"><a href="javascript:if%20(%20navigator.appName%20!=%20'Microsoft%20Internet%20Explorer'%20){window.sidebar.addPanel('F%C3%B3rum%20dos%20F%C3%B3runs','http://ajuda.forumeiros.com','');}else{%20window.external.AddFavorite('http://www.forumeiros.com','F%C3%B3rum%20dos%20F%C3%B3runs');}" target="_blank"><img src="http://im0.all-up.com/i/img/puce_fleche.png">  Adicionar aos favoritos</a>

<br><a href="javascript:" id="forunslist"><img src="http://im0.all-up.com/i/img/puce_fleche.png">  Lista dos fóruns de suporte oficiais</a>

<br><a href="javascript:" onclick="(document.getElementById('hp').style.display == 'none') ? document.getElementById('hp').style.display = 'block' : document.getElementById('hp').style.display = 'none';"><img src="http://im0.all-up.com/i/img/puce_fleche.png">  Definir página inicial...</a><div onclick="(document.getElementById('hp').style.display == 'none') ? document.getElementById('hp').style.display = 'block' : document.getElementById('hp').style.display = 'none';" id="hp" style="display: none; padding: 5px; margin: 6px; border: 1px dashed #FFF; cursor: pointer;"><a href="#" onclick="this.style.behavior='url(#default#homepage)';this.setHomePage('http://forumeiros.com');" alt="Definir o Forumeiros como página inicial" title="Definir o Forumeiros como página inicial">Forumeiros</a><br><a href="#" onclick="this.style.behavior='url(#default#homepage)';this.setHomePage('http://ajuda.forumeiros.com');" alt="Definir o FDF como página inicial" title="Definir o FDF como página inicial">Fórum dos fóruns</a></div></div><div align="center" style="margin-top: 6px;"><a href="http://www.forumeiros.com/" target="_blank"><img src="http://i86.servimg.com/u/f86/11/66/91/15/creer_10.png"></a></div>

</div><div id="toggle2" class="toggleable" style="font-size: 120%; display: none; ">

<img src="http://i62.servimg.com/u/f62/11/22/70/40/750px-10.png"> <a href="http://help.ahlamontada.com/">Árabe</a><br>
<img src="http://i34.servimg.com/u/f34/12/94/96/28/flag_f12.png"> <a href="http://forum.forumactif.com">Francês</a><br>
<img src="http://i34.servimg.com/u/f34/12/94/96/28/flag_e10.png"> <a href="http://help.forumotion.com">Inglês</a><br>
<img src="http://i34.servimg.com/u/f34/12/94/96/28/flag_c14.png"> <a href="http://cz.forumotion.com">Tcheco</a><br>
<img src="http://i34.servimg.com/u/f34/12/94/96/28/flag_g10.png"> <a href="http://hilfe.forumieren.com">Alemão</a><br>
<img src="http://i34.servimg.com/u/f34/12/94/96/28/flag_s18.png"> <a href="http://asistencia.foroactivo.com">Espanhol</a><br>
<img src="http://i34.servimg.com/u/f34/12/94/96/28/flag_i16.png"> <a href="http://aiuto.forumattivo.com">Italiano</a><br>
<img src="http://i34.servimg.com/u/f34/12/94/96/28/flag_r11.png"> <a href="http://help.forum2x2.ru">Russo</a><br>
<img src="http://i34.servimg.com/u/f34/12/94/96/28/flag_p13.png"> <a href="http://ajuda.forumeiros.com">Português</a><br>
<img src="http://i34.servimg.com/u/f34/12/94/96/28/flag_r10.png"> <a href="http://help.forumgratuit.ro">Romeno</a><br>
<img src="http://i34.servimg.com/u/f34/12/94/96/28/flag_c12.png"> <a href="http://help.longluntan.cn">Chinês</a><br>
<img src="http://i62.servimg.com/u/f62/11/22/70/40/turkey10.png"> <a href="http://destek.yetkin-forum.com">Turco</a>

<br><br><a href="javascript:" id="forunslist2"><img src="http://im0.all-up.com/i/img/puce_fleche.png">  Fechar</a>

</div>

Código:

<style>
.notepad {
text-shadow: 0 1px 0 white;
font: bold 11px Helvetica, Arial, sans-serif;
color: rgb(68, 68, 68);
line-height: 17px;
}
.notepad {
text-decoration: none;
text-shadow: 0 1px 0 white;
font: bold 11px Helvetica, Arial, sans-serif;
color: rgb(68, 68, 68);
line-height: 17px;
height: 18px;
display: inline-block;
margin: 5px;
padding: 5px 6px 4px 6px;
background: rgb(243, 243, 243);
border: solid 1px rgb(217, 217, 217);
border-radius: 2px;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
-webkit-transition: border-color .20s;
-moz-transition: border-color .20s;
-o-transition: border-color .20s;
transition: border-color .20s;
position: absolute;
    z-index: 99999!important;
}
.notepad span.icon {
background-image: url('http://code.brucegalpin.com/google-plus-ui-buttons/images/google+-ui-sprite-gray.png');
display: inline-block;
margin: 0 7px;
float: left;
line-height: 18px;
height: 18px;
width: 18px;
max-width: 18px;
overflow: hidden;
text-indent: -9999px;
background-repeat: no-repeat;
-webkit-transition: background-image 0.20s linear;
-moz-transition: background-image 0.20s linear;
-o-transition: background-image 0.20s linear;
transition: background-image 0.20s linear;
}
span.icon137 {
background-position: -288px -108px;
}
.notepad:hover span.icon {
background-image: url(http://code.brucegalpin.com/google-plus-ui-buttons/images/google+-ui-sprite-colour.png);
}
.contnotepad {
    position: absolute;
    z-index: 9999!important;
    background: white;
    border: 2px solid rgb(38, 114, 200);
    margin-left: 49px;
    margin-top: 5px;
    min-height: 100px;
    padding: 10px;
}
.notepad.ativo {
   
    border: 2px solid rgb(38, 114, 200);
    border-right: none;
    border-radius: 0px;
}
.wrapnotepad {
    height: 50px;
}
#notepadval {
    display: block;
    margin: 10px;
    height: 150px;
    width: 300px;
}
span.icon67 {
background-position: -108px -54px;
}
</style><script>
jQuery(document).ready(function () {
    if (localStorage.getItem('notepad') != null && localStorage.getItem('notepad') != '') {
        jQuery('#notepadval').val(localStorage.getItem('notepad'));
    }
    jQuery('a.notepad').click(function () {
        if (jQuery(this).attr('class').indexOf('ativo') != -1) {
            jQuery(this).removeClass('ativo');
        } else {
            jQuery(this).addClass('ativo');
        }
        jQuery('.contnotepad').fadeToggle(100);
        if (jQuery('#notepadval').val() != null && jQuery('#notepadval').val() != '') {
            localStorage.setItem('notepad', jQuery('#notepadval').val());
        }
        return false
    });
});
</script>
<div class="wrapnotepad">
    <a href="#" class="notepad"><span class="icon icon67"></span></a>
  <div class="contnotepad" style="display:none;">
      Escreva aqui o conteúdo a ser salvo:<textarea id="notepadval"></textarea>
  </div>
   
</div>