Rpg Maker BRasil
RPG Maker Brasil - RMBR

Seja Bem vindo ao Forúm! Faça seu cadastro e desfrute sobre o mundo do RPG Maker!
P.S.: PARA MELHOR VIZUALIZAÇÃO DO FORUM SEM BUGS, RECOMENDO QUE USEM O MOZILLA FIREFOX OU O GOOGLE CHROME!
Rpg Maker BRasil

Evoluindo cada vez mais!


Você não está conectado. Conecte-se ou registre-se

Ver o tópico anterior Ver o tópico seguinte Ir em baixo  Mensagem [Página 1 de 1]

HenRyqUéè

avatar
Administrador
Avaliador
Helper

[Você precisa estar registrado e conectado para ver esta imagem.]

[TUTORIAL] Botão para copiar o código fonte do primeiro post

Olá pessoal, no meu forum (e axo que aqui ainda é assim) quando passa 30 dias o membro não pode mais editar o tópico dele, geralmente, eles editavam os tutoriais dos mesmos para pegar o código-fonte deles, mas como passava 30 dias eles me pediam por MP, e quando meu forum começou a crescer, virou uma manifestação de MP's então decidi bolar esse sisteminha, que ajustado adequadamente só funciona para os membros, esse código gera 3 botões (um de gerar o codigo, outro de seleciona-lo e outro de limpar a textarea) e uma textarea. Assim quando clicado no botão gerar código, ele cria todo o texto do primeiro post, já formatado e completo para copiar e colar dentro da nossa textarea ;)


[Você precisa estar registrado e conectado para ver esta imagem.]
CRÉDITOS:
HenRyqUé - Contrução do código;
RMBR e SPDESIGN - Casa onde eu moro rsrs;
--> Tutoriais, dicas e astúcias <--
[TUTORIAL] Botão para copiar o código fonte do primeiro post


- Adicionando o código jQuery...
Primeiramente, você tem que decidir onde voce for colocar, se você quiser que esse efeito funcione para todo mundo (Membros e Convidados) siga o passo "a.", mas se você quer que funciona apenas para os membros, siga o passo "b.".

A. Atribuindo o efeito para Membros e Convidados:

Vá em:
Módulos > HTML e JavaScript >> Gestão dos códigos JavaScript
Título * : Dê qualquer título ao código (de prefêrencia um que você resume a função do código em poucas palavras).
Investimento : Marque para funcionar apenas nos tópicos.
Código JavaScript * : Cole o código abaixo:

CLIQUE PARA VER O CÓDIGO:
Código:
$(document).ready(function(){

$(".entry-content:eq(0)").after("<center><div id='botao'>EXIBIR CÓDIGO-FONTE DO TÓPICO</div>");
$("#botao").after("<input type='textarea' name='slect' rowls='7' cols='7' id='textoo' style='margin-bottom:10px'><br/>");
$("#textoo").click(function(){
$(this).select();
});
$("#textoo").after("<div id='botao2' class='botao3'>LIMPAR CONTEÚDO</div></center>");

$("#botao").click(function(){
$("#textoo").val("" + $(".entry-content:eq(0)").html());
});
$("#botao2").click(function(event){
 $("#textoo").focus().select();
});
$(".botao3").click(function(event){
$("#textoo").val("");
});
});
Deve ficar assim:
CLIQUE AQUI PARA VER A IMAGEM:
[Você precisa estar registrado e conectado para ver esta imagem.]
Depois é só salvar, clicando em [Você precisa estar registrado e conectado para ver esta imagem.].

B. Atribuindo o efeito para Membros:

Vá em:
Portal e Widgets > Gestão dos Widgets doForúm >> Criar um Widget Personalizado
Nome do widget : Dê qualquer título ao código (de prefêrencia um que você resume a função do código em poucas palavras).
Utilizar um table type : Marque não.
Título do widget : Não é nescessário colocar nada aqui.
Fonte do widget * : Cole o código abaixo:

Spoiler:
Código:
<script>
$(document).ready(function(){

$(".entry-content:eq(0)").after("<center><div id='botao'>EXIBIR CÓDIGO-FONTE DO TÓPICO</div>");
$("#botao").after("<input type='textarea' name='slect' rowls='7' cols='7' id='textoo' style='margin-bottom:10px'><br/>");
$("#textoo").click(function(){
$(this).select();
});
$("#textoo").after("<div id='botao2' class='botao3'>LIMPAR CONTEÚDO</div></center>");

$("#botao").click(function(){
$("#textoo").val("" + $(".entry-content:eq(0)").html());
});
$("#botao2").click(function(event){
 $("#textoo").focus().select();
});
$(".botao3").click(function(event){
$("#textoo").val("");
});
});
</script>
Deve ficar assim:
CLIQUE AQUI PARA VER A IMAGEM:
[Você precisa estar registrado e conectado para ver esta imagem.]
Depois salve, clicando em [Você precisa estar registrado e conectado para ver esta imagem.].

Após isso procure seu widget na lista de widgets pessoais e mova-o para um local qulquer. Salve! Agora clique no botão onde está destacado na imagem:
Spoiler:
[Você precisa estar registrado e conectado para ver esta imagem.]
Após isso marque as autorizações somente para administradores, moderadores e membros. Salve!
Spoiler:

[Você precisa estar registrado e conectado para ver esta imagem.]



- Adiionando o código css...
Vá em:
Visualização > Imagens e Cores > Cores >> Folha de estilo CSS
Cole o código abaixo na folha:
CLIQUE AQUI PARA VER O CODIGO:
Código:
#botao{transiton: all 0.5s;margin-top:10px;text-align:center;font-weight:bold;background-image: linear-gradient(bottom, rgb(153,98,98) 20%, rgb(199,169,169) 72%, rgb(235,181,181) 100%);
background-image: -o-linear-gradient(bottom, rgb(153,98,98) 20%, rgb(199,169,169) 72%, rgb(235,181,181) 100%);
background-image: -moz-linear-gradient(bottom, rgb(153,98,98) 20%, rgb(199,169,169) 72%, rgb(235,181,181) 100%);
background-image: -webkit-linear-gradient(bottom, rgb(153,98,98) 20%, rgb(199,169,169) 72%, rgb(235,181,181) 100%);
background-image: -ms-linear-gradient(bottom, rgb(153,98,98) 20%, rgb(199,169,169) 72%, rgb(235,181,181) 100%);

background-image: -webkit-gradient(
   linear,
   left bottom,
   left top,
   color-stop(0.2, rgb(153,98,98)),
   color-stop(0.72, rgb(199,169,169)),
   color-stop(1, rgb(235,181,181))
);font-weight:bold;margin-bottom:10px;width:300px;cursor: pointer;padding: 5px;border: 1px solid black;
}
#botao:hover{text-shadow:1px 2px 2px #FFDEDE;
}
#textoo{ width:310px;
}
#botao2{transiton: all 0.5s;margin-right:0px;text-align:center;
  background-image: linear-gradient(bottom, rgb(152,157,158) 20%, rgb(199,199,199) 72%, rgb(235,235,235) 100%);
background-image: -o-linear-gradient(bottom, rgb(152,157,158) 20%, rgb(199,199,199) 72%, rgb(235,235,235) 100%);
background-image: -moz-linear-gradient(bottom, rgb(152,157,158) 20%, rgb(199,199,199) 72%, rgb(235,235,235) 100%);
background-image: -webkit-linear-gradient(bottom, rgb(152,157,158) 20%, rgb(199,199,199) 72%, rgb(235,235,235) 100%);
background-image: -ms-linear-gradient(bottom, rgb(152,157,158) 20%, rgb(199,199,199) 72%, rgb(235,235,235) 100%);

background-image: -webkit-gradient(
   linear,
   left bottom,
   left top,
   color-stop(0.2, rgb(152,157,158)),
   color-stop(0.72, rgb(199,199,199)),
   color-stop(1, rgb(235,235,235))
);
  font-weight:bold;margin-bottom:5px;width:300px;cursor: pointer;padding: 5px;border: 1px solid black;
}
#botao2:hover{text-shadow:1px 2px 2px #E3E3E3;
}
Valide!


- Resultado...
[Você precisa estar registrado e conectado para ver esta imagem.]
Lembrando que você pode editar os botões ao seu estilo.

  • Funciona em quais versões?
    POR ENQUANTO punBB




© RMBR & SPDesign


[Você precisa estar registrado e conectado para ver esta imagem.] Se tiver alguma dúvida relacionada com este tópico crie um tópico com o seguinte título:
[DÚVIDA] Botão para copiar o código fonte do primeiro post

http://rmbr.forumeiros.com/

Montillo

avatar
Designer
Excelente Topico

Ver o tópico anterior Ver o tópico seguinte Voltar ao Topo  Mensagem [Página 1 de 1]

Permissão deste fórum:
Você não pode responder aos tópicos neste fórum