Html de noticias

Qual é minha questão:
Gostaria desse painel de noticias deste fórum, observem que tem abas e quado clica sobre uma, muda o assunto embaixo...

Fórum onde vi o efeito:
http://narutorpgadvanced.forumeiros.com/

Endereço do meu fórum:
http://somosmugiwara.forumeiros.com

Versão do fórum:
PHPBB3

Olá!
Aceda a "Página inicial":

Painel de Controle Visualização Página inicial Geral

Em "Conteúdo da mensagem" coloque o seguinte código:

Código:

<div class="h3">Notícias</div><div class="mes-txt"><script>
jQuery(document).ready(function(){
 jQuery('#seender_abas').prepend(
 '<ul id="navebar"> <li><a class="ativo">Ficha ninja</a></li> <li><a>Recrutamento</a></li> <li><a>Jutsus</a></li></ul>')

 jQuery('.aba').css({
 display: 'none',
 marginTop: 0,
 borderTopWidth: 0
 })

 jQuery('#aba1').css('display', 'block');

 jQuery('a', jQuery('#navebar')).click(function() {
 var i = jQuery('a', jQuery('#navebar')).index(this) + 1;
 jQuery(this).parents('#seender_abas').children('.aba:visible').hide();
 jQuery('#aba' + i).show();
 jQuery(this).parents('#navebar').find('a').removeClass('ativo');
 jQuery(this).addClass('ativo');
 })
})
</script><div id="seender_abas">

 <div id="aba1" class="aba">
Agora ficou mais fácil criar sua ficha ninja.<br />
Nossa equipe criou um formulário especial para você, com instruçãoes e links rápidos, tudo para facilitar cada vez mais.<br />
Basta preenche-lo corretamente e clicar no botão enviar.<br />
Acesse o formulário clicando <a href="http://narutorpgadvanced.forumeiros.com/h4-" title="Acesse nosso formulário de inscrição." target="_blank">AQUI</a>. <br />
<span id="acesse">Acesse alguns links rápidos: </span><a href="http://narutorpgadvanced.forumeiros.com/t6-criando-sua-ficha-shinobi" title="Nesse tutorial estárei ensinado como criar uma ficha para aqueles que não sabem." target="_blank" class="acesse-links-abertos">Tutorial criando ficha,</a> <a href="http://narutorpgadvanced.forumeiros.com/t13-vilas-abertas" title="Veja as vilas desponiveis." target="_blank" class="acesse-links-abertos">Vilas abertas,</a> <span class="acesse-links-abertos"><a href="http://narutorpgadvanced.forumeiros.com/t14-clas-abertos" title="Veja quais Clãs estão desponíveis, " target="_blank" class="acesse-links-abertos">Clãs abertos,</a>,</span> <a href="http://narutorpgadvanced.forumeiros.com/t15-kekkei-genkais-abertas" title="Veja quais Kekkei Genkais estão desponíveis." target="_blank" class="acesse-links-abertos">Kekkei Genkais abertos.</a>

</div>

 <div id="aba2" class="aba">
Estamos recrutando basta acessa o link abaixo:
Link em BREVE
 </div>

 <div id="aba3" class="aba">
O sistema do forum para treinar jutsus consiste em porcentagem, leia as regras sobre os jutsus para entender melhor.<br />
O jutsus disponiveis podem ser encontrados clicando <a href="http://narutorpgadvanced.forumeiros.com/f82-" title="Justsus" target="_blank">AQUI</a>.
 </div>
</div></div>

e Salve!

Até mais.

Não funcionou, ficou apenas os nomes...

Olá!

Acabo de verificar e o código que eu te passei não foi colocado em seu fórum. Mantenha o código ativo para que eu possa encontrar o erro.

Até mais.

Já ativei..

Olá!
Deixe o mesmo ativo, agora iremos adicionar o código CSS ao qual eu me esqueci, desculpe.
Aceda a Folha de Estilo CSS:

Painel de Controle Visualização Imagens e Cores Cores Folha de estilo CSS

Código:

Código:

div.aba {
  background:#fff;
  text-align:justify;
  margin-bottom:20px;
  padding:10px 15px;
  border:1px solid #CcC;
  box-shadow:inset 1px 1px 2px #999;
  border-radius:4px;
  }
#navebar {
  font:bold 12px Georgia, "Times New Roman", Times, serif;
  margin:0;
  padding:3px 0;

  }
#navebar li {
  list-style:none;
  margin-right:6px;
  display:inline;
  }
#navebar li a {
  padding:3px 6px;
  border:1px solid #09F;
  border-bottom:none;
  background:#dde;
  color:#333;
  text-decoration:none;
  }
#navebar li a:hover {
  color:#000;
  background:#aae;
  border-color:#09F;
  }
#navebar li a.ativo {background-color:#009;}
#navebar li a {
      color: #FFF;
    font-size: 14px;
    font-weight: bold;
    text-align: center;
    text-shadow: 0 -1px 0 rgba(0,0,0,0.2);
    background-color: #1AB8D6;
    border-radius: 6px;
    padding: 10px 6px 10px;
    display: block;
  width:120px;
    border-width: 1px 1px 3px 1px;
    border-style: solid;
    border-color: rgba(0,0,0,0.16);
    box-shadow: inset 0 0 2px rgba(255,255,255,0.76);
    -webkit-transition: background-color 0.5s;
    -moz-transition: background-color 0.5s;
    -o-transition: background-color 0.5s;
  display:inline-block;
    transition: background-color 0.5s;
  }
    #navebar li a:hover {    background-color: #22D5E7;}

e Valide!

Até mais.

Thanks man, relaxa...