[TUTORIAL] Top posters em imagens

Com um simples código jQuery, é possível fazer uma nova versão do 'Top dos mais postadores', somente com o avatar do usuário substituindo o seu nome de usuário.

--> Tutoriais dicas e Astúcias <--
Top posters em imagens

1º - Conhecendo o código

Código:

jQuery(document).ready( function() {
jQuery("#topp").load("/memberlist?mode=posts&order=DESC&submit=Ok&username td.avatar-mini a:lt(10)");
});

2º - Inserindo código JavaScript:
Para isto você terá de ter um pouco de conhecimento com a folha de estilos JavaScript, aceda a:
Painel de Controle >> Módulos >> HTML & JAVASCRIPT >> Gestão dos Códigos JavaScript

Título - Correspondente ao nome da página JavaScript/jQuery que será criada.

Localização - São destinados os devidos locais para onde você aplicará os efeitos do JavaScript nos fóruns. Pode ser na galeria, nos fóruns ou sub-fóruns. Vamos ver algumas opções: No índice: O código será aplicado ao índice do fórum. No portal : O código será aplicado ao Portal do fórum. Nos sub-fóruns (Fóruns) : O código será aplicado nos Fóruns e Sub-fóruns. Sobre os temas : O código será aplicado aos tópicos do fórum. Na galeria : O código será aplicado na sua Galeria de imagens. Em todas as páginas : O código será aplicado em todas as páginas do fórum. (Marque esta opção)

Código JavaScript - Campo destinado para receber os códigos JavaScript e jQuery.

Habilitar o gerenciamento dos códigos JavaScript - Ao selecionar a opção sim, estará ativando a função páginas Javascript no seu fórum. Se selecionar não, as páginas serão desabilitadas no fórum.

3º - Código em widget:

Código:

<style>#topp a{color: transparent;}#topp img {height:40px;width:40px;}#topp{text-align: center;}#topp a span{display:none;}</style><div id="topp"></div></div>

Painel de controle (Avançado) >> Módulos >> Portal & Widgets >> Gestão dos widgets >> Novo widget personalizado

Nome do widget: - Será o nome dado ao widget para localização e controle deste pelo Painel de Controle.

Utilizar um table type: - Nesta opção, deverá ser marcado o "Sim".

Título do widget: - Nesta opção, informe o nome do widget a ser criado.

Fonte do widget: - Neste campo, Devemos inserir o código que trabalhamos no 3º Passo.

Salvar: - Para que o widget apareça corretamente, este box deve ser acionado, após as devidas modificações.

4° - Resultado final:

---

Se tiver alguma dúvida relacionada com este tópico crie um tópico com o seguinte título: [Dúvida] Top posters em imagens