[Tutorial] Botão curtir

Encinarei a como acrescenta um efeito na reputação do seu fórum.
Versões de funcionamento: PunBB, as outras não foram testadas!





1º - Crie um Novo Java Script:
Vá até o Painel de controle > Módulos > HTML & JavaScript > Gestão dos códigos JavaScript >> Criar um Novo JavaScript.
Adicione o Seguinte JS. Investimento nos Tópicos.

Código:

var like_version = 'punbb';
var DOM_IS_READY = false;
$(function(){DOM_IS_READY=true;});
var vote_singular = 'Curtir';
var vote_plural = 'Curtiram isso';

    /* http://staffergroupbr.stuning.net/t1463- */

function BSLIKE(b, a) {
  var d = a.innerHTML;
  a.innerHTML = "Carregando...";
  a.onclick = "#";
  $.get(b, function () {
    a.className += " BS_done";
    a.innerHTML = d;
    var c = a.nextSibling,
      b = parseInt(/\d+/.exec(c.innerHTML)[0]) + 1;
    c.innerHTML = c.innerHTML.replace(/\d+/, b)
  })
};

function init_bs_like_system() {
  for (var x = $('.vote'), i = 0, vote;
    (vote = x[i++]);) {
    var count = 0,
      plus = 0,
      barra = $('.vote-bar', vote)[0],
      button = $('.vote-button', vote)[0];
    if (barra) {
      var info = barra.title.match(/\d+/g);
      plus = Math.round(parseInt(info[1]) * parseInt(info[0])) / 100
    }
    button = button ? '<span onclick="BSLIKE(\'' + button.firstChild.href + '\',this);" class="BS_like">Curtir</span>' : '<span class="BS_like BS_done">Curtir</span>';
    var votes_text = '<span class="BS_count">' + plus + ' ' + (plus == 1 ? bestskins_like.vote_singular : bestskins_like.vote_plural) + '</span>';
    var total_button = '<div class="BS_vote" style="margin:5px">' + button + votes_text + '</div>';
    if (bestskins_like.callback) bestskins_like.callback(vote, total_button)
  }
  x.remove()
};
bestskins_like.dom_ready ? init_bs_like_system() : $(function () {
  init_bs_like_system()
});

2º - Aceda a folha CSS do seu fórum:
Vá até o Painel de controle > Visualização > Imagens e Cores Cores >> Folha de estilo CSS.
Adicione Isto em seu CSS.

Código:

/* like */
.LGlike {
    background: url(http://i11.servimg.com/u/f11/18/07/42/17/ok12.png) no-repeat left;
    background-color: #326A94;
    border: 1px solid rgba(0, 0, 0, 0.3);
    border-radius: 2px 2px 2px 2px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1),0 1px 0 rgba(255, 255, 255, 0.3) inset;
    color: white;
    cursor: pointer;
    display: inline-block;
    font-size: 11px;
    height: 22px;
    line-height: 22px;
    padding: 0 18px;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
    white-space: nowrap;
    margin-right: 5px;
    margin-top: 30px;
}
.LGvote {
    margin: 0 5px;
}
.LGnovote {
    filter:Alpha(opacity=50);
    opacity: 0.5;
    cursor: default;
    box-shadow: none;
    text-shadow: none;
}
/* TUTORIAL = Mundo dos Fóruns*/

3º - Resultado:

---

Se tiver alguma dúvida relacionada com este tópico crie um tópico com o seguinte título: Botão curtir