[TUTORIAL] Gostei para tópicos

Com um pequeno código, vamos adicionar um botão chamado "Gostei" ou "Like" nos tópicos em que somente os comentaristas podem avaliar sua mensagem. Um sistema prático e inteligênte desenvolvido por Keir.

--> Tutoriais <--
Gostei para tópicos

1º - Criar e administrar as páginas:
Com essa opção será possível adicionarmos o Java script ao fórum sem muitos problemas, mas lembre-se que antes de publicar essa página .JS, pré-visualize a mesma.

Painel de controle ->> Módulos ->> HTML & JavaScript ->> Gestão dos códigos JavaScripts ->>

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.

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.

Agora que conhece a função de Java script, vamos proceguir no segundo passo com o código.


2º - Aplicando o JS e CSS:
Para que tudo resulte conforme esperado, é necessário que você adicione um CSS e um JS. Em Investimento, marque "Nos tópicos" e use o JS abaixo:

Código:

var like_version = 'phpbb3';
var DOM_IS_READY = false;
jQuery(document).ready(function(){DOM_IS_READY=true;});
var vote_singular = 'Gostei';
var vote_plural = 'Gostei';
$.getScript('http://file.xp3.biz/js/vote_plus.js');

Confirme!

Agora, vamos aplicar o CSS. Então em Painel de controle > Visualização > Imagens e Cores > Cores > Folha de estilo CSS > e cole esse CSS:

Código:

    .LGlike {
      background: #105289;
      padding: 3px;
      border-radius: 4px;
      color: #fff;
      font-size: 10px;
      font-weight: bold;
      text-shadow: -1px 0.5px #888;
      box-shadow: 1px 1px 1px #888;
      cursor: pointer;
      margin-right: 4px;
    }
    .LGvote { margin: 0 5px; }
    .LGnovote {
      filter:Alpha(opacity=50);
      opacity: 0.5;
      cursor: default;
      box-shadow: none;
      text-shadow: none;
    }

Agora, crie uma nova página JS e adicione sem o Investimento ativo, o seguinte código JS:

Código:

function lglike(b,a){var d=a.innerHTML;a.innerHTML="Carregando voto, por favor aguarde...";a.onclick="#";$.get(b,function(){a.className+=" LGnovote";a.innerHTML=d;var c=a.nextSibling,b=parseInt(/\d+/.exec(c.innerHTML)[0])+1;c.innerHTML=c.innerHTML.replace(/\d+/,b)})};function init_lg_like_system(){var x=$('.vote'),i=0,vote=x[0];for(;vote;vote=x[++i]){var count=0,plus=0,bar=$('.vote-bar',vote)[0],button=$('.vote-button',vote)[0];if(bar){var info=bar.title.match(/\d+/g);plus=Math.round(parseInt(info[1])*parseInt(info[0]))/100}button=button?'<span onclick="lglike(\''+button.firstChild.href+'\',this);" class="LGlike">'+vote_singular+'</span>':'<span class="LGlike LGnovote">'+vote_singular+'</span>';var votes_text='<span class="LGlikecount">'+plus+' '+(plus==1?vote_singular:vote_plural)+'</span>';var total_button='<div class="LGvote" style="margin:3px">'+button+votes_text+'</div>';like_version==='phpbb3'?$('.corners-bottom',vote.parentNode.parentNode).before(total_button):like_version==='invision'?$(vote.parentNode.parentNode.parentNode.nextSibling.lastChild).prepend('<li>'+total_button+'</li>'):like_version==='punbb'?$('.postfoot',vote.parentNode.parentNode.parentNode.parentNode).before(total_button):null}x.remove()};DOM_IS_READY?init_lg_like_system():$(function(){init_lg_like_system()});

• Para versão Invision:

  Código:

      var like_version = 'invision';
    var DOM_IS_READY = false;
    $(function(){DOM_IS_READY=true;});
    var vote_singular = 'Gostei';
    var vote_plural = 'Gostei';
    $.getScript('ENDEREÇO_DE_URL');

  
  
• Resultado:
  
  

---

© ShiftActif

Se tiver alguma dúvida relacionada com este tópico crie um tópico com o seguinte título: [Dúvida] Gostei para tópicos