Lista de seções na mensagem da homepage

Qual é sua questão:
Saudações amigos!
Eu criei um novo fórum e queria adicionar a lista de seções no índice, Então, Eu segui este tópico:
[TUTORIAL] Adicionar lista de seções na home-page
Então, Eu copiei o código das seções do FDF para alterar para as minha funções, Mais quando eu vou até:
Painel de Controle Visualização Imagens e Cores Cores Folha de Estilo CSS
Quando eu colo este código que fica no final da página do tutorial:

Código:

<script>
jQuery(function() {
  jQuery('.img_list_hp img').mouseover(function() {
      jQuery('#img_list_alt').html(jQuery(this).attr('alt'));
  }).mouseout(function() {
      jQuery('#img_list_alt').html('Passe o mouse sobre uma das imagens e conheça mais os nossos serviços!');
  });
});
</script><div class="img_list_hp"><a href="/portal.forum?pid=2"><img height="59" src="http://2img.net/i/fa/fdf/questions.png" alt="Uma vasta gama de tutoriais para compreender das funções do fórum e também deixá-lo cada vez melhor e com a sua cara."><span>Tutoriais e astúcias</span></a></div><div class="img_list_hp"><a href="/-c2/"><img height="59" src="http://2img.net/i/fa/fdf/nuage.png" alt="Temos um ótimo serviço de suporte, com equipe capacitada para lhe atender da melhor forma."><span>Ajuda e suporte</span></a></div><div class="img_list_hp"><a href="/-f71/"><img height="59" src="http://2img.net/i/fa/fdf/peindre.png" alt="Gostaria de ter um tema mais personalizado mas não leva jeito com design? Temos uma equipe pronta para ajudar-lhe!"><span>Criações gráficas</span></a></div><div class="img_list_hp"><a href="/-f24/"><img height="59" src="http://i30.servimg.com/u/f30/11/14/55/92/images10.png" alt="O <a href='http://pt.hitskin.com'>Hitskin</a> é um serviço para compartilhar temas Forumeiros."><span>Hitskin</span></a></div><div class="img_list_hp"><a href="/-c9/"><img height="59" src="http://i62.servimg.com/u/f62/12/62/55/38/voix1010.png" alt="Gostaria de tornar seu fórum mais conhecido, encontrar novos membros para a equipe ou fazer parcerias?"><span>Publicidade</span></a></div><div class="img_list_hp"><a href="/-f50/"><img height="59" src="http://i60.servimg.com/u/f60/11/40/70/67/review10.png" alt="Gostaria de saber o que pensamos do seu fórum e o que nele achamos que pode ser melhor?"><span>Análises</span></a></div><div class="img_list_hp"><a href="/-f15/"><img height="59" src="http://www.criarumblog.com/rsc/img/logo_blog.png" alt="Criou um blog Criarumblog? Não fique perdido, também ofeceremos suporte!"><span>Criarumblog</span></a></div><div style="clear: both" id="img_list_alt">Passe o mouse sobre uma das imagens e conheça mais os nossos serviços!</div>

Sempre aparece a metade do código citado, este:

Código:

jQuery(function() {
  jQuery('.img_list_hp img').mouseover(function() {
      jQuery('#img_list_alt').html(jQuery(this).attr('alt'));
  }).mouseout(function() {
      jQuery('#img_list_alt').html('Passe o mouse sobre uma das imagens e conheça mais os nossos serviços!');
  });
});
Tutoriais e astúciasAjuda e suporteCriações gráficasHitskinPublicidadeAnálisesCriarumblogPasse o mouse sobre uma das imagens e conheça mais os nossos serviços!

Alguém poderia me ajudar?

Abraços!

Olá,

Porque á metade do código em HTML, isso causa bugs eminentes!

Essa parte, será adicionado ao CSS:

Código:

.img_list_hp {
border: 1px solid #0372BE;
padding: 0;
float: left;
color: #FFF !important;
width: auto;
font-size: 11px;
text-align: center;
margin: auto 10px auto auto;
border-radius: 6px;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
}

.img_list_hp:hover {
background-color: #DCEAF5;
}

.img_list_hp img {
padding: 8px 15px;
}

.img_list_hp span {
background-color: #0372BE;
color #FFF;
display: block;
padding: 0 10px;
}
.img_list_hp a {
color: #FFF !important;
text-decoration: none;
}
#img_list_alt {
background-image: url(http://i21.servimg.com/u/f21/11/81/27/88/arrow_10.png);
background-repeat: no-repeat;
background-position: 20px 0;
padding-top: 13px;
padding-left: 55px;
}

Está outra parte, é para "Painel de Controle Visualização Imagens e Cores Cores Folha de Estilo CSS" como você já disse.

O código

Código:

    <script>
    jQuery(function() {
      jQuery('.img_list_hp img').mouseover(function() {
          jQuery('#img_list_alt').html(jQuery(this).attr('alt'));
      }).mouseout(function() {
          jQuery('#img_list_alt').html('Passe o mouse sobre uma das imagens e conheça mais os nossos serviços!');
      });
    });
    </script><div class="img_list_hp"><a href="/portal.forum?pid=2"><img height="59" src="http://2img.net/i/fa/fdf/questions.png" alt="Uma vasta gama de tutoriais para compreender das funções do fórum e também deixá-lo cada vez melhor e com a sua cara."><span>Tutoriais e astúcias</span></a></div><div class="img_list_hp"><a href="/-c2/"><img height="59" src="http://2img.net/i/fa/fdf/nuage.png" alt="Temos um ótimo serviço de suporte, com equipe capacitada para lhe atender da melhor forma."><span>Ajuda e suporte</span></a></div><div class="img_list_hp"><a href="/-f71/"><img height="59" src="http://2img.net/i/fa/fdf/peindre.png" alt="Gostaria de ter um tema mais personalizado mas não leva jeito com design? Temos uma equipe pronta para ajudar-lhe!"><span>Criações gráficas</span></a></div><div class="img_list_hp"><a href="/-f24/"><img height="59" src="http://i30.servimg.com/u/f30/11/14/55/92/images10.png" alt="O <a href='http://pt.hitskin.com'>Hitskin</a> é um serviço para compartilhar temas Forumeiros."><span>Hitskin</span></a></div><div class="img_list_hp"><a href="/-c9/"><img height="59" src="http://i62.servimg.com/u/f62/12/62/55/38/voix1010.png" alt="Gostaria de tornar seu fórum mais conhecido, encontrar novos membros para a equipe ou fazer parcerias?"><span>Publicidade</span></a></div><div class="img_list_hp"><a href="/-f50/"><img height="59" src="http://i60.servimg.com/u/f60/11/40/70/67/review10.png" alt="Gostaria de saber o que pensamos do seu fórum e o que nele achamos que pode ser melhor?"><span>Análises</span></a></div><div class="img_list_hp"><a href="/-f15/"><img height="59" src="http://www.criarumblog.com/rsc/img/logo_blog.png" alt="Criou um blog Criarumblog? Não fique perdido, também ofeceremos suporte!"><span>Criarumblog</span></a></div><div style="clear: both" id="img_list_alt">Passe o mouse sobre uma das imagens e conheça mais os nossos serviços!</div>

É demonstrado por Solkis como o resultado do que é aqui no FdF. Ou seja, o código que está na mensagem da Home Page do FDF é o código acima.

Até mais!