1 [TUTORIAL] Colocando botão para mostrar/fechar o codebox 09/01/13, 11:23 am
HenRyqUéè
Administrador
Avaliador
Helper
[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem] | [TUTORIAL] Colocando botão para mostrar/fechar o codebox |
[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem] |
|
--> Tutoriais, dicas e astúcias <--
[TUTORIAL] Colocando botão para mostrar/fechar o codebox
[TUTORIAL] Colocando botão para mostrar/fechar o codebox
1º - Adicionando o code JavaScript...
Vá em:
Título * : Dê qualquer título ao código;Módulos > HTML e JavaScript > Gestão do código JavaScript >> Novo JavaScript
Investimento : Marque "Em todas as páginas";
Código JavaScript * : Cole o code abaixo:
- MOSTRAR O CODIGO:
- Código:
$(document).ready(function(){ $("dl.codebox").before('<span class="botao">CÓDIGO</span>'); $("dl.codebox, .code, dd.cont_code").hide(); $(".botao").click(function(){ $(this).next("dl.codebox, .code").slideToggle("slow"); }); });
Salve!
2º - Adicionando o code CSS...
Vá em:
Cole o seguinte code na folha:Visualização > Imagens e Cores > Cores >> Folha de Estilo CSS
- MOSTRAR O CODIGO:
- Código:
/*www.rmbr.forumeiros.com*/
.botao{
margin-top:10px;
padding:5px;
color:white;
font-weight:bold;
cursor:pointer;
background-image: linear-gradient(bottom, rgb(194,188,194) 0%, rgb(125,123,125) 100%);
background-image: -o-linear-gradient(bottom, rgb(194,188,194) 0%, rgb(125,123,125) 100%);
background-image: -moz-linear-gradient(bottom, rgb(194,188,194) 0%, rgb(125,123,125) 100%);
background-image: -webkit-linear-gradient(bottom, rgb(194,188,194) 0%, rgb(125,123,125) 100%);
background-image: -ms-linear-gradient(bottom, rgb(194,188,194) 0%, rgb(125,123,125) 100%);
background-image: -webkit-gradient(
linear,
left bottom,
left top,
color-stop(0, rgb(194,188,194)),
color-stop(1, rgb(125,123,125))
);
text-align:center;
}
.botao:hover{
background-image: linear-gradient(top, rgb(194,188,194) 0%, rgb(125,123,125) 100%);
background-image: -o-linear-gradient(top, rgb(194,188,194) 0%, rgb(125,123,125) 100%);
background-image: -moz-linear-gradient(top, rgb(194,188,194) 0%, rgb(125,123,125) 100%);
background-image: -webkit-linear-gradient(top, rgb(194,188,194) 0%, rgb(125,123,125) 100%);
background-image: -ms-linear-gradient(top, rgb(194,188,194) 0%, rgb(125,123,125) 100%);
background-image: -webkit-gradient(
linear,
left top,
left bottom,
color-stop(0, rgb(194,188,194)),
color-stop(1, rgb(125,123,125))
);
}
Valide!
3º - Resultado...
[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]
Lembrando que você pode editar o estilo do botão ao seu gosto!
Exemplo vivo: [Tens de ter uma conta e sessão iniciada para poderes visualizar este link]
Lembrando que você pode editar o estilo do botão ao seu gosto!
Exemplo vivo: [Tens de ter uma conta e sessão iniciada para poderes visualizar este link]
- Funciona em quais versões?
Testei apenas em PUNBB mas axo que funciona em todas.
© 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] Colocando botão para mostrar/fechar o codebox |
Última edição por HenRyqUéè em 11/01/13, 01:17 pm, editado 2 vez(es)