Informações
Autor: Daemon
Funcionalidade: Todas as versões
Aqui iremos ensiná-los como aplicar um sistema de votos semelhante ao sistema da plataforma IPB.
Primeiro acesse:
Painel de Controle ☛ Modulos ☛ HTML & Javascript ☛ Gestão dos codigos Javascript
e Crie um novo Javascript em investimento nos topicos com esse codigo:
- Código:
/*
* Código: IPB Like System.
* Data de criação: 18/07/2014.
* Atualização: 16/02/2015.
* Autor: Daemon.
* Versão: 1.2.
* Inspirado: IPB.
* Acesse: http://bestskins.net.
* Não distribuir, ou remover os créditos do autor.
*/
function bestskins_ls() {
// Imagem de reputação
var reput_UP = 'http://i.imgur.com/PTraX1a.png';
for(var x = $('.vote'), i = 0, vote; (vote = x[i++]); ) {
var qtd = 0,
barra = $('.vote-bar', vote)[0],
botao = $('.vote-button', vote)[0];
if (barra) {
var numbarra = barra.title.match(/\d+/g);
qtd = Math.round(parseInt( numbarra[1] ) * parseInt( numbarra[0] )) / 100;
}
botao = botao ? '<li><span onclick="bestskinsVoto(\'' + botao.firstChild.href + '\',this);" class="BS_like"><img src="' + reput_UP + '" alt="+" class="rep_up"></span></li>' : '<li style="display: none;"><img src="' + reput_UP + '" alt="+" class="rep_up"></li>';
var numrep = '<li>' + (qtd == 0 ? '<span class="reput_vote zero">' + qtd + '</span>' : '<span class="reput_vote positive">' + qtd + '</span>') + '</li>';
var htmlFinal =
'<div class="rep_bar clearfix" id="rep_post">' +
' <ul class="bs_inline">' + botao + numrep + '</ul>' +
'</div>';
$('.postfoot', vote.parentNode.parentNode.parentNode.parentNode).before( htmlFinal );
}
x.remove();
};
function bestskinsVoto(b,a) {
a.onclick = '#';
$.get(b, function() {
a.parentNode.style.display = 'none';
var verify = a.parentNode.nextSibling.firstChild.innerHTML;
if(verify == 0) {
a.parentNode.nextSibling.firstChild.classList.remove('zero'),
a.parentNode.nextSibling.firstChild.classList.add('positive');
}
var c = a.parentNode.nextSibling.firstChild, b = parseInt(/\d+/.exec(c.innerHTML)[0])+1;
c.innerHTML = c.innerHTML.replace(/\d+/,b);
});
};
if (document.readyState === 'complete') {
bestskins_ls();
} else {
document.addEventListener('DOMContentLoaded', function() {
bestskins_ls();
});
}
O código acima serve para a versão PunBB,para que o código funcione nas demais versões, localize esta parte:
- Código:
$('.postfoot', vote.parentNode.parentNode.parentNode.parentNode).before( htmlFinal );
e troque por:
- Código:
$('.postbody', vote.parentNode.parentNode.parentNode).append( htmlFinal );
Feito isto acesse:
Painel de controle ☛ Visualização ☛ Imagens e Cores ☛ Cores ☛ Folha de estilo
e Adicione esse codigo css em sua folha de estilo:
- Código:
#rep_post {white-space: nowrap;margin: 6px 4px;float: right;}
#rep_post .bs_inline {list-style: none;}
#rep_post .bs_inline > li {display: inline-block;margin: 0 3px;}
#rep_post .bs_inline > li:first-child {margin-left: 0;}
#rep_post .bs_inline img {vertical-align: middle;}
#rep_post span img {cursor: pointer;}
#rep_post .reput_vote {
background-image: url('http://i.imgur.com/UGqTZqe.png');
background-repeat: repeat-x;
background-position: 0 1px;
font-size: 10px;
padding: 2px 10px !important;
color: #fff;
font-weight: bold;
display: inline-block;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
text-shadow: rgba(0,0,0,0.3) 0px -1px 0px;
}
.reput_vote.positive {background-color: #8db13e;}
.reput_vote.zero {background-color: #6a6a6a;}
O Resultado será este: