Como criar tags bbcode Sáb 27 Dez 2014 - 16:34
[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]
Nome do Arquivo: Como criar tags bbcodeAutor: Daemon
Funcionalidade: Todas as versões
Categoria: Recursos BestSkins
Olá Convidado,
neste tutorial, iremos mostrar como criar tags bbcode simples.
Primeiro, vá até Painel de Controle
Módulos HTML & JAVASCRIPT Gestão dos códigos JavaScript Criar um novoFeito isto, adicione o investimento em todas as páginas.
Código JavaScript:
[Tens de ter uma conta e sessão iniciada para poderes visualizar este link]
Este código é para punbb, se você não usa punbb, você precisa substituir na seguinte linha: [aviso]var postContent = $(".entry-content, .blog_message");
Altere para a versão do seu fórum:
Invision: var postContent = $(".post-entry, .blog_message");
PhpBB3: var postContent = $(".content, .blog_message");
PhpBB2: var postContent = $(".postbody, .blog_message");[/aviso]
Exemplo:
- Código:
[tagname="Title"]My Content[/tagname]
Pode ser substituído por
<div class="some-class"><p>Title</p>My Content</div>
- Passos de utilização:
close
-> close: true <- significa que a tag precisa ser fechada. Por exemplo:
- Código:
[tagname]Meu conteúdo[/tagname]
defaultOption
-> defaultOption <- irá adicionar um "título" padrão se não for definido um na primeira tag. Por exemplo... Se você adicionar -> defaultOption: 'Algum texto' <- Veja um exemplo:
- Código:
[tagname]Meu conteúdo[/tagname]
Pode ser substituído por
<div class="some-class"><strong>Algum texto</strong>Meu conteúdo</div>
replacement
-> replacement <- irá substituir as tags por uma estrutura html definida por você. Por exemplo:
- Código:
replacement: '<div class="notice notice-alert"><h5>{option}</h5><p>{content}</p></div>'
- Código:
{
tag: 'alerta',
close: true,
replacement: '<div class="notice notice-alert"><h5>{option}</h5><p>{content}</p></div>'
},
replace
Você pode usar 'replace' para alterar valores de tag criando uma função com algum tipo de condição predefinida ou algo assim. Por exemplo:
- Código:
{
tag: 'daemon',
close: true,
replacement: '<div class="daemon-box"><p>{option}</p><hr>{content}</div>',
replace: function(option, content) {
if (content.indexOf("shazam") !== -1) {
return {
option: 'SHAZAM ALERT',
content: 'OMG, you entered the magic word :O'
};
}
}
}
- Clique aqui para ver:
- [Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]
Caso queira utilizar os bbcodes que já estão no código, com o mesmo efeito da imagem de pré-visualização, adicione ao css:
- Código:
.notice {
background: url(http://i.imgur.com/VWRy0Mc.png) repeat-x 0 0;
color: #FFF;
width: 83%;
font-weight: normal;
padding: 13px 15px;
margin-bottom: 2.5em;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 6px;
-moz-box-shadow: 1px 1px 2px rgba(0,0,0,.4);
-webkit-box-shadow: 1px 1px 2px rgba(0,0,0,.4);
box-shadow: 1px 1px 2px rgba(0,0,0,.4);
position: relative;
left: 34px;
}
.notice p {
margin-bottom: 1.5em;
}
.notice p:last-child {
margin-bottom: 0;
}
.notice h5 {
font-size: 14px;
font-weight: bold;
margin-bottom: .65em;
}
.notice:before {
content: "";
background: url(http://i.imgur.com/PcLYd52.png) no-repeat 100% 0;
width: 33px;
height: 40px;
position: absolute;
left: -34px;
top: 9px;
}
.notice-success {
background-color: #EEF4D4;
color: #596C26;
border: 1px solid #8FAD3D;
}
.notice-success:before {
background-position: 100% 0;
}
.notice-warn {
background-color: #FFEA97;
color: #796100;
border: 1px solid #E1B500;
}
.notice-warn:before {
background-position: 100% -800px;
}
.notice-alert {
background-color: #EFCEC9;
color: #933628;
border: 1px solid #AE3F2F;
}
.notice-alert:before {
background-position: 100% -400px;
}
.notice-info {
background-color: #C6D8F0;
color: #285797;
border: 1px solid #4381CD;
}
.notice-info:before {
background-position: 100% -1200px;
}
.guest {
background-color: #F3E3E6;
border: 1px solid #E599AA;
color: #80001C;
padding: 10px;
display: block;
margin: 15px;
font-size: 11px;
}
Importante:
Para criar tags bbcode, leia as notações dentro do código
Sugestões de BBCODE
- Sugestões:
- 1: Mensagem de retorno para visitantes:
- Código:
{
tag: 'guest',
close: true,
replacement: '<div class="guest">{content}</div>',
replace: function(option, content) {
if (_userdata.session_logged_in < 1) {
return 'Você precisa estar conectado ao fórum para visualizar este conteúdo.';
return content;
}
}
}
2: Miniatura de imagem do vídeo do youtube:
[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]
- Código:
{
tag: 'ytscreen',
replacement: '<a href="https://www.youtube.com/watch?v={ATTR}"><img src="http://i.ytimg.com/vi/{ATTR}/mqdefault.jpg" width="320px" height="180px" alt="Clique Para Assistir" title="Clique Para Assistir"></a><br>Clique Na Imagem Para Assistir'
}
3: Fórum ID:
[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]
- Código:
{
tag: 'forum',
close: true,
replacement: '<a href="/f{ATTR}-" id="forum_id">{content}</div>'
}
4: Revelar (BBCode que imita o Spoiler):
- Código:
{
tag: 'reveal',
close: true,
defaultOption: 'Reveal',
replacement: '<dl class="reveal-box"><dt style="cursor: pointer;" onclick="$(this.nextSibling.firstChild).toggle();">{option}</dt><dd><div style="display:none" class="revealbox-content">{content}</div></dd></dl>'
}
5: Botão Download:
- Código:
{
tag: 'download',
replacement: '<a href="{ATTR}"><img src="https://i.imgur.com/WW2efTS.png"></a><br>Download Link: <a href="{ATTR}">{ATTR}</a>'
}
Se tiver alguma dúvida em relação ao tutorial, crie um tópico de mesmo nome.
Última edição por Daemon em Ter 26 Jun 2018 - 8:32, editado 28 vez(es)
![[K]oke](https://i.imgur.com/07ALhxb.png)
![x[C]oder](https://2img.net/u/1717/45/34/10/avatars/2822-62.jpg)
