1![[TUTORIAL] Botão para copiar o código fonte do primeiro post Empty](https://2img.net/i/empty.gif)
[TUTORIAL] Botão para copiar o código fonte do primeiro post 09/01/13, 11:24 am
HenRyqUéè
Administrador
Avaliador
Helper
[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem] | [TUTORIAL] Botão para copiar o código fonte do primeiro post |
| [Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem] |
|
--> Tutoriais, dicas e astúcias <--
[TUTORIAL] Botão para copiar o código fonte do primeiro post
[TUTORIAL] Botão para copiar o código fonte do primeiro post
1º - 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:
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).Módulos > HTML e JavaScript >> Gestão dos códigos JavaScript
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("");
});
});
- CLIQUE AQUI PARA VER A IMAGEM:
- [Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]
B. Atribuindo o efeito para Membros:
Vá em:
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).Portal e Widgets > Gestão dos Widgets doForúm >> Criar um Widget Personalizado
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>
- CLIQUE AQUI PARA VER A IMAGEM:
- [Tens de ter uma conta e sessão iniciada para poderes visualizar 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:
- [Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]
- Spoiler:
[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]
2º - Adiionando o código css...
Vá em:
Cole o código abaixo na folha:Visualização > Imagens e Cores > Cores >> Folha de estilo CSS
- 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;
}
3º - Resultado...
[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]
Lembrando que você pode editar os botões ao seu estilo.
Lembrando que você pode editar os botões ao seu estilo.
- Funciona em quais versões?
POR ENQUANTO punBB
© RMBR & SPDesign
| [Tens de ter uma conta e sessão iniciada para poderes visualizar 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 |
Destaque do Fórum