[TUTORIAL] Gostei para tópicos
ShiftActif fórum :: Central ShiftActif :: :: Tutoriais
Página 1 de 1 • Compartilhe
[TUTORIAL] Gostei para tópicos
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
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');
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 |
Tópicos semelhantes
» [TUTORIAL] Encurtar links nos tópicos
» [TUTORIAL] Sitema de votação com Polldaddy em tópicos
» [TUTORIAL] Widget "Like/Tweet/+1" para tópicos
» [TUTORIAL] Destacar quantidade de tópicos e mensagens
» [TUTORIAL] Mover tópicos nos tópicos
» [TUTORIAL] Sitema de votação com Polldaddy em tópicos
» [TUTORIAL] Widget "Like/Tweet/+1" para tópicos
» [TUTORIAL] Destacar quantidade de tópicos e mensagens
» [TUTORIAL] Mover tópicos nos tópicos
ShiftActif fórum :: Central ShiftActif :: :: Tutoriais
Página 1 de 1
Permissões neste sub-fórum
Não podes responder a tópicos
|
|