Widget lateral personalizado

Detalhes da questão

Endereço do fórum: http://narutorpgwinner.forumeiros.com/forum
Versão do fórum: phpBB3

Descrição

Fiz este tópico na área errada e me informaram que devia ter feito aqui.

Gostaria de adicionar widgets personalizados. Tenho o exemplo do que pretendo, como meus conhecimentos são muito limitados eu entendo que sejam widgets.

Aqui está o fórum exemplo:
http://www.onepiecerpg.com/

Ao lado esquerdo existe um menu "Menu Principal" e ao lado direito menus expansivos com informações importantes, ao clicar ele abre opções de links.

Meu fórum é de naruto, então se possível substituir as imagens pelas de naruto. Não precisa sr igual ao deles, as informações no caso seriam preenchidas por mim de acordo com as informações do fórum, mas preciso do windget pronto para que eu possa editá-lo e, por gentileza, se puderem me ensinar como editar caso tenha alguma coisa diferente. Como notaram eu realmente não entendo muito, mas tomara que tenha conseguido pelo menos fazê-los entender meu pedido.
Eu agradeço muito a atenção e mais ainda se puderem me ajudar.

Up

Olá,

Cá está o código do widget:

Código:

<table width="100%" border="0" cellspacing="0" cellpadding="0"><tbody><tr><td align="left"><script>
jQuery(document).ready(function(){
  jQuery("#pirateb").click(function(){
    jQuery("#pirateo").slideToggle("slow");
  });
});
</script><img align="middle" src="http://i.imgur.com/Fm9gk7o.png" id="pirateb"><div style="display:none;" id="pirateo">
             <a title="The Chess" href="http://www.onepiecerpg.com/t34991-the-chess"><img align="middle" src="http://i.imgur.com/SoamYGA.png"></a> <hr>            <a title="Trupe Corvinata" href="http://www.onepiecerpg.com/t38886-trupe-corvinata"><img align="middle" src="http://i.imgur.com/f2Q8T9m.png"></a>
</div></td></tr></tbody></table><div style="height: 4px"></div><table width="100%" border="0" cellspacing="0" cellpadding="0"><tbody><tr><td align="left"><script>
jQuery(document).ready(function(){
  jQuery("#marineb").click(function(){
    jQuery("#marineo").slideToggle("slow");
  });
});
</script><img align="middle" src="http://i.imgur.com/yT1nK90.png" id="marineb"><div style="display:none;" id="marineo">
   <a title="Frota da Marinha" href="postlink"><img align="middle" src="http://i.imgur.com/oZtxU.jpg"></a>
</div></td></tr></tbody></table><div style="height: 4px"></div><table width="100%" border="0" cellspacing="0" cellpadding="0"><tbody><tr><td align="left"><script>
jQuery(document).ready(function(){
  jQuery("#revb").click(function(){
    jQuery("#revo").slideToggle("slow");
  });
});
</script><img align="middle" src="http://i.imgur.com/P6S4QwO.png" id="revb"><div style="display:none;" id="revo">
   <a title="Célula Revolucionária" href="postlink"><img align="middle" src="http://i.imgur.com/7fluL.jpg"></a>
</div></td></tr></tbody></table><div style="height: 4px"></div><table width="100%" border="0" cellspacing="0" cellpadding="0"><tbody><tr><td align="left"><script>
jQuery(document).ready(function(){
  jQuery("#cacb").click(function(){
    jQuery("#caco").slideToggle("slow");
  });
});
</script><img align="middle" src="http://i.imgur.com/xdlOHuP.png" id="cacb"><div style="display:none;" id="caco">
       <a title="Clãs de Caçadores" href="postlink"><img align="middle" src="http://i.imgur.com/saUmJUA.png"></a>
</div></td></tr></tbody></table><div style="height: 4px"></div><table width="100%" border="0" cellspacing="0" cellpadding="0"><tbody><tr><td align="left"><script>
jQuery(document).ready(function(){
  jQuery("#govb").click(function(){
    jQuery("#govo").slideToggle("slow");
  });
});
</script><img align="middle" src="http://i.imgur.com/xzUB8fP.png" id="govb"><div style="display:none;" id="govo">
   <a title="Governo Mundial" href="postlink"><img align="middle" src="http://i.imgur.com/52cSO.jpg"></a>
</div></td></tr></tbody></table><div style="height: 4px"></div><table width="100%" border="0" cellspacing="0" cellpadding="0"><tbody><tr><td align="left"><script>
jQuery(document).ready(function(){
  jQuery("#empeb").click(function(){
    jQuery("#empeo").slideToggle("slow");
  });
});
</script><img align="middle" src="http://i.imgur.com/aVGE4O7.png" id="empeb"><div style="display:none;" id="empeo"><a href="http://www.onepiecerpg.com/t19244-banco-mundial#17806"><img title="Empresas" src="http://i.imgur.com/l4A06Ir.jpg"></a>
</div></td></tr></tbody></table><div style="height: 4px"></div><table width="100%" border="0" cellspacing="0" cellpadding="0"><tbody><tr><td align="left"><script>
   jQuery(document).ready(function(){
     jQuery("#procb").click(function(){
      jQuery("#proco").slideToggle("slow");
     });
   });
   </script><img align="middle" src="http://i.imgur.com/n19k3tw.png" id="procb"> <div style="display: none;" id="proco">
           <script>
      function TrocaBanner() {
         var y = 1;
         y = Math.floor(Math.random()*10);
         if(y < 4){
            document.write('<a href="http://www.onepiecerpg.com/t37320-raymond-king-walker-o-rei-vermelho" title="Rei Vermelho"><img src="http://i.imgur.com/J282AwF.png" align="middle"></a>');
            return(0);
         }else if(y < 7){
            document.write('<a href="http://www.onepiecerpg.com/t37322-tidus-belmont-o-duque-azul" title="Duque Azul"><img src="http://i.imgur.com/gFRgZxi.png" align="middle"></a>');
            return(0);
         }else{
            document.write('<a href="http://www.onepiecerpg.com/t38895-elsa-volkerball-a-rainha-dos-espinhos#342013" title="Rainha dos Espinhos"><img src="http://i.imgur.com/HsteNSa.png" align="middle"></a>');
            return(0);
         }
      }
   </script> <script>TrocaBanner()</script><a href="http://www.onepiecerpg.com/t38895-elsa-volkerball-a-rainha-dos-espinhos#342013" title="Rainha dos Espinhos"><img src="http://i.imgur.com/HsteNSa.png" align="middle"></a> <script>
      function TrocaBanner2() {
         var x = 1;
         x = Math.floor(Math.random()*10);
         if(x < 4 ){
            document.write('<a href="http://www.onepiecerpg.com/t37376-frisk-dreemur" title="Anjo Caído"><img src="http://i.imgur.com/3QX0jwT.png" align="middle"></a>');
            return(0);
         }else if(x < 7){
            document.write('<a href="http://www.onepiecerpg.com/t36213-masimos-tita-howker-o-emissario-da-morte" title="Emissário da Morte"><img src="http://i.imgur.com/odQxJ1p.png" align="middle"></a>');
            return(0);
         }else {
            document.write('<a href="http://www.onepiecerpg.com/t36208-bell-farest-lamina-demoniaca" title="Lâmina Demoníaca"><img src="http://i.imgur.com/Uez0MPW.png" align="middle"></a>');
            return(0);
         }
      }
   </script> <script>TrocaBanner2()</script><a href="http://www.onepiecerpg.com/t37376-frisk-dreemur" title="Anjo Caído"><img src="http://i.imgur.com/3QX0jwT.png" align="middle"></a> <script>
      function TrocaBanner3() {
         var w = 1;
         w = Math.floor(Math.random()*10);
         if(w < 5 ){
            document.write('<a href="http://www.onepiecerpg.com/t38057-sidney-thompson-o-filho-do-demonio" title="O Filho do Demônio"><img src="http://i.imgur.com/peRbRqQ.png" align="middle"></a>');
            return(0);
         }else if(w < 7){
            document.write('<a href="http://www.onepiecerpg.com/t37319-axell-belmont-o-cavalo-louco" title="Cavalo Louco"><img src="http://i.imgur.com/MjtynZ1.png" align="middle"></a>');
            return(0);
         }else {
            document.write('<a href="http://www.onepiecerpg.com/t38450-nero-blackwater-conde-do-flagelo#338036" title="Conde de Flagelo"><img src="http://i.imgur.com/EE9Wrcl.png" align="middle"></a>');
            return(0);
         }
      }
   </script> <script>TrocaBanner3()</script><a href="http://www.onepiecerpg.com/t38450-nero-blackwater-conde-do-flagelo#338036" title="Conde de Flagelo"><img src="http://i.imgur.com/EE9Wrcl.png" align="middle"></a> <script>
      function TrocaBanner4() {
         var z = 1;
         z = Math.floor(Math.random()*10);
         if(z < 3 ){
            document.write('<a href="http://www.onepiecerpg.com/t39133-draguren-hynno-o-piromaniaco" title="Piromaníaco"><img src="http://i.imgur.com/bUerPyt.png" align="middle"></a>');
            return(0);
         }else if(z < 6){
            document.write('<a href="http://www.onepiecerpg.com/t38071-yoroshi-auron-o-usurpador" title="O Usurpador"><img src="http://i.imgur.com/GZYFLI0.png" align="middle"></a>');
            return(0);         
         }else if(z < 9){
            document.write('<a href="http://www.onepiecerpg.com/t38072-kaiyuki-metatron-ashuura-o-anjo-do-apocalipse" title="O Anjo do Apocalipse"><img src="http://i.imgur.com/nbvPgwq.png" align="middle"></a>');
            return(0);
         }else {
            document.write('<a href="http://www.onepiecerpg.com/t38070-ryuza-ying-o-ultimo-sussurro" title="O Ultimo Sussurro"><img src="http://i.imgur.com/dXqsoqo.png" align="middle"></a>');
            return(0);
         }
      }
   </script> <script>TrocaBanner4()</script><a href="http://www.onepiecerpg.com/t38072-kaiyuki-metatron-ashuura-o-anjo-do-apocalipse" title="O Anjo do Apocalipse"><img src="http://i.imgur.com/nbvPgwq.png" align="middle"></a><br>       
   <div align="center">
              <a href="http://www.onepiecerpg.com/t25236-procurados" title="TODOS os Procurados"><img src="http://i.imgur.com/YdJ73Ki.png" align="middle"></a>                             
   </div>
                  
</div></td></tr></tbody></table><!--9--><!--6--><!--3--><!--7--><!--5--><!--7--><!--4--><!--7--><!--4--><div style="height: 4px"></div><table width="100%" border="0" cellspacing="0" cellpadding="0"><tbody><tr><td align="left"><script>
   jQuery(document).ready(function(){
     jQuery("#murala").click(function(){
      jQuery("#muralb").slideToggle("slow");
     });
   });
   </script><img id="murala" src="https://i.imgur.com/vMION7Q.png" align="middle"> <div id="muralb" style="display: none;">
                 <script>
      function MudaHonrado() {
         var y = 1;
         y = Math.floor(Math.random()*10);
         if(y < 5){
            document.write('<a href="http://www.onepiecerpg.com/t37330-kyo-full-buster-ira-celeste" title="Ira Celeste"><img src="http://i.imgur.com/Mm1Fyhe.png" align="middle"></a>');
            return(0);
         }else{
            document.write('<a href="http://www.onepiecerpg.com/t37330-kyo-full-buster-ira-celeste" title="Ira Celeste"><img src="http://i.imgur.com/Mm1Fyhe.png" align="middle"></a>');
            return(0);
         }
      }
   </script> <script>MudaHonrado()</script><a href="http://www.onepiecerpg.com/t37330-kyo-full-buster-ira-celeste" title="Ira Celeste"><img src="http://i.imgur.com/Mm1Fyhe.png" align="middle"></a> <script>
      function MudaHonrado2() {
         var x = 1;
         x = Math.floor(Math.random()*10);
         if(x < 5 ){
            document.write('<a href="" title=""><img src="" align="middle"></a>');
            return(0);
         }else {
            document.write('<a href="" title=""><img src="" align="middle"></a>');
            return(0);
         }
      }
   </script> <script>MudaHonrado2()</script><a href="" title=""><img src="" align="middle"></a> <script>
      function MudaHonrado3() {
         var w = 1;
         w = Math.floor(Math.random()*10);
         if(w < 5 ){
            document.write('<a href="" title=""><img src="" align="middle"></a>');
            return(0);
         }else {
            document.write('<a href="" title=""><img src="" align="middle"></a>');
            return(0);
         }
      }
   </script> <script>MudaHonrado3()</script><a href="" title=""><img src="" align="middle"></a> <script>
      function MudaHonrado4() {
         var z = 1;
         z = Math.floor(Math.random()*10);
         if(z < 5 ){
            document.write('<a href="" title="o"><img src="" align="middle"></a>');
            return(0);
         }else {
            document.write('<a href="" title=""><img src="" align="middle"></a>');
            return(0);
         }
      }
   </script> <script>MudaHonrado4()</script><a href="" title=""><img src="" align="middle"></a><br>             
   <div align="center">
                    <a title="Mural de Honra" href="http://www.onepiecerpg.com/f230-mural-de-honra"><img align="middle" src="http://image.flaticon.com/icons/png/128/234/234642.png"></a>                                 
   </div>
                            
</div></td></tr></tbody></table><!--5--><!--5--><!--5--><!--5--><div style="height: 4px"></div>

Até mais.
Fraise