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.

--> TUTORIAS DICAS E ASTUCIAS <--
Botão de efeito neon em todas as versões

---

Primeiramente nosso botão devera se apoiar um uma Classe única, para que não fique repetido. Um Tutorial que ja vem uma classe ponta para apoiarmos é o [TUTORIAL] Salvamento automático nos tópicos, isso fara com que poupemos muito do nosso trabalho, pois ele já tem uma classe única...

1º - Inserindo o codigo:
Realizando todos os passos to tutorial acima, vamos criar o CSS para suportar as funções do botão, vá até.
Painel de controle -> Visualização -> Imagens e Cores -> Cores ->

E adicione o seguinte código...

Código:Selecionar conteúdo

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;}

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


2º - Inserindo codigo Java Script:
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".

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;

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;

Código JavaScriptNeste campo teremos de inserir o código que esta logo abaixo;

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:Selecionar conteúdo

1

jQuery(document).ready(function(){jQuery('#text_editor_controls button:eq(8)').after('<input id="neon"type="button"value="Neon"style="height: 22px; margin-left: 10px;"><div id="colors"style="top:350px;left:250px;margin-right:50px;width:100px!important;position:fixed;display:none;"><button class="sp" onclick="displayspd();return false">NRPGS</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 /></span>');jQuery('#neon, #colors button').click(function(){jQuery('#colors').slideToggle()});jQuery('#ava, .app, .pend, .rpp').click(function(){jQuery('#ava-b').slideToggle()})});

3º - Inserindo o segundo codigo Java Script:
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:Selecionar conteúdo

jQuery(function(){
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}
jQuery('#neon').click(function(){jQuery('#colors').slideToggle()});jQuery('#ava').click(function(){jQuery('#ava-b').slideToggle()})});

• Resultado:
  
  
  Expandir esta imagemReduzir esta imagem Ver em tamanho real
  
  

Se tiver alguma dúvida relacionada com este tópico crie um tópico com o seguinte título: Adicionar botão para aplicar efeito NEON