Fórum grátis: ajuda e atendimento ao utilizador Forumeiros.com

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

Fórum dos Fóruns :: Forumeiros e você ::   :: Tutoriais, dicas e astúcias :: Tópicos e Mensagens

Ver o tópico anterior Ver o tópico seguinte Ir para baixo

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

Mensagem 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
TipoZona de texto
NomeÀ escolha
DescriçãoÀ escolha
URL do íconeÀ escolha
Obrigatório o preenchimentoNão
VisualizaçãoPerfil e Mensagens
Tipo de visualizaçãoÍcone
Quem pode modificar o valor do seu conteúdoModeradores
Exibir este campo para os visitantes tendo ao menos o statusMembros
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 110111Seta 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 110210Seta 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 110310Seta 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 110410Seta 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 (Certo)

Resultado

(carregue na imagem para aumentar)[TUTORIAL] Sistema de medalhas com descrição ao passar o mouse Medall12

:: Traduzido por: @Roger123 ::
Se você tiver a respeito deste tutorial, queira criar um novo tópico com o título: Sistema de medalhas com descrição ao passar o mouse
Anonymous

Roger123
Convidado


Ir para o topo Ir para baixo

Ver o tópico anterior Ver o tópico seguinte Ir para o topo

Fórum dos Fóruns :: Forumeiros e você ::   :: Tutoriais, dicas e astúcias :: Tópicos e Mensagens

Permissões neste sub-fórum
Não podes responder a tópicos