Buscar
 
 

Resultados por:
 


Rechercher Busca avançada

Os membros mais ativos da semana

Últimos assuntos
» Game Play Fórum
Qua Out 17, 2012 4:11 pm por Admin

» [Tutorial] Bloquear CSS nas mensagens
Qua Out 17, 2012 3:52 pm por Wenner

»  [Tutorial] Diretório dos Fórums
Qua Out 17, 2012 3:52 pm por Wenner

» [Dica] Ganhando Usuarios
Qua Out 17, 2012 3:51 pm por Wenner

» [Tutorial]Botão Neon em todas as versões
Qua Out 17, 2012 3:50 pm por Wenner

» Regra - Publicidade
Qua Out 17, 2012 3:49 pm por Wenner

» Regra - Sociedade
Qua Out 17, 2012 3:48 pm por Wenner

» Regra - Avaliação
Qua Out 17, 2012 3:48 pm por Wenner

» Regras do Fórum
Qua Out 17, 2012 3:47 pm por Wenner

Quem está conectado
1 usuário online :: Nenhum usuário registrado, Nenhum Invisível e 1 Visitante

Nenhum

[ Ver toda a lista ]


O recorde de usuários online foi de 12 em Dom Jul 21, 2013 6:24 pm

[Tutorial]Botão Neon em todas as versões

Ir em baixo

[Tutorial]Botão Neon em todas as versões

Mensagem por Wenner em Qua Out 17, 2012 3:50 pm

Botão Neon em todas as versões

Neste tutorial, vamos aprender a implantar uma ferramenta muito interessante, que faz com que você possa adicionar Neon em seus textos, através de um botão super fácil de usar. Para isso siga os passos abaixo atenciosamente.

Tutoriais sobre Programação
Botão Neon em todas as versões


1- Inserindo o código CSS:Vamos criar o CSS para suportar as funções do botão, vá até.

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

E adicione o seguinte código...

Código:
az, bl, azul, blue, .az {text-shadow: 0px 0px 5px blue;color: blue;}
v, vermelho, red, .v {text-shadow: 0px 0px 5px red;color: red;}
rx, roxo, purple, rox, .rx {text-shadow: 0px 0px 5px #b300ff;color: #b300ff;}
am, amarelo, yelow, .am {text-shadow: 0px 0px 5px #fbff00;color: #fbff00;}
c, ciano, cyan, .c {text-shadow: 0px 0px 5px #00e6ff;color: #00e6ff;}
r, rosa, pink, .r {text-shadow: 0px 0px 5px #ff7fee;color: #ff7fee;}
vr, verde, green, .vr {text-shadow: 0px 0px 5px #11ff00;color: #11ff00;}
l, laranja, orange, naruto, .l {text-shadow: 0px 0px 5px #ff9500;color: #ff9500;}
m, marron, brown, .m {text-shadow: 0px 0px 5px #7d4f0f;color: #7d4f0f;}
w, branco, white, .w {text-shadow: 0px 0px 5px #ffffff;}
pr, preto, black, .pr {text-shadow: 0px 0px 5px #000000;}
sp, .sp {text-shadow: 0px 0px 5px #0072ff;color: #0072ff !important;}
#pun-qpost #text_editor_controls{position:relative !important}

Feito isso, o Neon já estará ativo em seu fórum, faltara apenas o botão...

2- Inserindo o código JavaScript:
Vamos agora aceder à gestão das páginas JavaScript para adicionarmos o nosso código:
Painel de controle -> Módulos -> HTML e Javascript -> Gestão dos códigos Javascript
Depois carregue-se no botão "Criar um novo javascript".


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

[Você precisa estar registrado e conectado para ver esta imagem.][Você precisa estar registrado e conectado para ver esta imagem.]Título - Terá de colocar um título para a página, de forma a poder identifica-lo na lista de páginas JavaScript do Painel de Controle;

[Você precisa estar registrado e conectado para ver esta imagem.][Você precisa estar registrado e conectado para ver esta imagem.]Investimento - Escolha a opção "Em todas as páginas", para que a função não apresente erros na posição da coluna de perfis;

[Você precisa estar registrado e conectado para ver esta imagem.][Você precisa estar registrado e conectado para ver esta imagem.]Código JavaScript - Neste campo teremos de inserir o código que esta logo abaixo;

[Você precisa estar registrado e conectado para ver esta imagem.][Você precisa estar registrado e conectado para ver esta imagem.]Confirmar- Por fim, após adicionar o código, terá de clicar neste botão para salvar a criação. Se você clicar em um outro botão ou em uma outra seção, as mudanças não serão validadas.

Código a ser utilizado:

Código:
jQuery(document).ready(function() {
jQuery('#text_editor_controls button:eq(8)').after(' <button class="button2" onclick="display();return false"><az><b>Neon</b></az></button><div style="width:100px !important;margin-top:21px;margin-left:290px;visibility:hidden;" class="select" id="neon"><button class="sp" onclick="displayspd();return false">WebPixel</button><br /><button class="az" onclick="displayblue();return false">Neon Azul</button><br /><button class="v" onclick="displayred();return false">Neon Vermelho</button><br /><button class="rx" onclick="displayrx();return false">Neon Roxo</button><br /><button class="am" onclick="displayam();return false">Neon Amarelo</button><br /><button class="c" onclick="displayc();return false">Neon ciano</button><br /><button class="r" onclick="displayr();return false">Neon rosa</button><br /><button class="vr" onclick="displayvr();return false">Neon Verde</button><br /><button class="l" onclick="displayl();return false">Neon laranja</button><br /><button class="m" onclick="displaym();return false">Neon Marrom</button><br /><button class="w" onclick="displayw();return false">Neon branco</button><br /><button class="pr" onclick="displaypr();return false">Neon Preto</button><br /></div> ');
});


3- Inserindo o segundo código JavaScript:
Feito isso, você já terá seu botão onde você deseja, mas ele ainda não estará funcionando.
Crie uma nova pagina javascript, onde você ira hospedar o novo código, siga as etapas acima para a criação da pagina.


Código a ser utilizado:

Código:
function display(){
selectWysiwyg(this,'neon');return false}
function displayspd(){
bbfontstyle('<sp>','</sp>');selectWysiwyg(this,'neon');return false}
function displayblue(){
bbfontstyle('<az>','</az>');selectWysiwyg(this,'neon');return false}
function displayred(){
bbfontstyle('<v>','</v>');selectWysiwyg(this,'neon');return false}
function displayrx(){
bbfontstyle('<rx>','</rx>');selectWysiwyg(this,'neon');return false}
function displayam(){
bbfontstyle('<am>','</am>');selectWysiwyg(this,'neon');return false}
function displayc(){
bbfontstyle('<c>','</c>');selectWysiwyg(this,'neon');return false}
function displayr(){
bbfontstyle('<r>','</r>');selectWysiwyg(this,'neon');return false}
function displayvr(){
bbfontstyle('<vr>','</vr>');selectWysiwyg(this,'neon');return false}
function displayl(){
bbfontstyle('<l>','</l>');selectWysiwyg(this,'neon');return false}
function displaym(){
bbfontstyle('<m>','</m>');selectWysiwyg(this,'neon');return false}
function displayw(){
bbfontstyle('<w>','</w>');selectWysiwyg(this,'neon');return false}
function displaypr(){
bbfontstyle('<pr>','</pr>');selectWysiwyg(this,'neon');return false}

4- O resultado final:

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

Créditos :

SP-Design - Pelos Códigos e Tutorial

Wenner
Sou nivel 1

Mensagens : 8
Pontos : 24
Reputação : 0
Data de inscrição : 17/10/2012

Ver perfil do usuário

Voltar ao Topo Ir em baixo

Voltar ao Topo

- Tópicos similares

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