[TUTORIAL] Sistema de medalhas com descrição ao passar o mouse

por Roger123 03.03.19 10:16

Sistema de medalhas com descrição ao passar o mouse

Com este tutorial mostrarei a melhor forma de premiar um membro no seu fórum.

Sistema de medalhas com descrição ao passar o mouse

Tutoriais, dicas e astúcias

Criar campo no perfil

Painel administrativo Usuários & Grupos Usuários Perfis

Sistema de medalhas com descrição ao passar o mouse
Preenchimento dos campos
Tipo	Zona de texto
Nome	À escolha
Descrição	À escolha
URL do ícone	À escolha
Obrigatório o preenchimento	Não
Visualização	Perfil e Mensagens
Tipo de visualização	Ícone
Quem pode modificar o valor do seu conteúdo	Moderadores
Exibir este campo para os visitantes tendo ao menos o status	Membros
Separador	À escolha

Resultado

(carregue na imagem para aumentar)

[TUTORIAL] Sistema de medalhas com descrição ao passar o mouse Medall13

Conteúdo padrão

Código:: [center][table][tr][td class="scrollable-zone"]Sem medalhas[/td][/tr][/table][/center]

Agora, basta salvar.

Código JavaScript

As páginas javascript ativas em seu fórum possibilita inserir scripts e jquery para personalizar seu fórum, contudo é importante saber que qualquer script encontrado na internet acabam por não surgir efeito nos fóruns.

Painel administrativo Módulos HTML e Javascript Gestão dos códigos Javascript Criar um novo javascript

[TUTORIAL] Sistema de medalhas com descrição ao passar o mouse Javaac10

[TUTORIAL] Sistema de medalhas com descrição ao passar o mouse 110111

Habilitar o gerenciamento dos códigos Javascript - Permite ativar os scripts personalizados criados pelo administrador no fórum. Este recurso não tem qualquer impacto nos scripts nativos do fórum.

[TUTORIAL] Sistema de medalhas com descrição ao passar o mouse 110210

Tìtulo - Cria um título para identificar o script a ser modificado mais tarde na lista de scripts do fórum.

[TUTORIAL] Sistema de medalhas com descrição ao passar o mouse 110310

Investimento - Define o local em específico que este script será executado. Você pode investir o script para vários locais no fórum (Todas as páginas) ou pode definir para certos locais disponíveis na tela de investimento.

[TUTORIAL] Sistema de medalhas com descrição ao passar o mouse 110410

Código Javascript - Espaço destinado a receber o script que será ativado pelo administrador.Antes de aplicar o script ao fórum, é importante revisá-lo para ter certeza de seu funcionamento.

Código:: $(function() { var lista_de_medallas = [ 'https://i62.servimg.com/u/f62/12/23/10/57/blue11.png', //Medalla 1 'https://i62.servimg.com/u/f62/12/23/10/57/dark_g11.png', // Medalla 2 'https://i62.servimg.com/u/f62/12/23/10/57/gree11.png', // Medalla 3 'https://i62.servimg.com/u/f62/12/23/10/57/orange12.png', // Medalla 4 'https://i62.servimg.com/u/f62/12/23/10/57/perp12.png', // Medalla 5 'https://i62.servimg.com/u/f62/12/23/10/57/red10.png', // Medalla 6 ]; var titulo_medallas = [ 'Alcanzaste los 100 Posts', // Medalla 1 'Alcanzaste los 200 Posts', // Medalla 2 'Alcanzaste los 500 Posts', // Medalla 3 'Alcanzaste los 5000 Posts', // Medalla 4 'Obtuviste 100 Me Gusta', // Medalla 5 'Compraste 10 o Más Objetos en la Tienda', // Medalla 6 ]; $('.postprofile .scrollable-zone img').each(function() { var a = lista_de_medallas.indexOf( $(this).attr('src') ); $(this).attr('title', titulo_medallas[a]); }); });

Para editar o JavaScript, procure por:
var lista_de_medallas : Aqui estaremos colocando o URL de cada uma das nossas medalhas.
var titulo_medallas : Aqui vamos colocar o título da medalha ou a descrição dela.

Agora, basta salvar.

Adicionar medalhas aos membros

Vá para o perfil do usuário que você deseja adicionar uma nova medalha e procure o campo que criamos na primeira etapa e modifique o seu conteúdo.
Adicione o BBCODE IMG na tabela que vem por padrão, substituindo "Sem medalhas" para cada URL:

Código:: [img]Link duma medalha[/img]

Pronto, agora basta finalizar ()

Resultado

(carregue na imagem para aumentar)

[TUTORIAL] Sistema de medalhas com descrição ao passar o mouse Medall12