Obs: Como isto é um anúncio, a tag List está a bugar, como tal a parte do tutorial que explica a tag list não funciona corretamente. Veja o tópico do tutorial clicando aqui, onde o BBCode está todo bem e onde poderá postar as suas dúvidas.

Ãndice

1. O que é o BBCode?
   
2. O básico do BBCode
   
3. Tags básicas
   • Negrito
     
   • Itálico
     
   • Sublinhado
     
   • Riscado
     
   • Sobrescrito
     
   • Subescrito
     
   • Centralizado
     
   • Alinhamento à direita
     
   • Justificado
     
   • Tag hr
     
   • Size
     
   • Cor
     
   • Tag H
     
   • Inserir Imagens
     
   • Inserir Links
     
   • Tag Code
     

[*]Tags complexas

• Tag Spoiler
  
• Tag Caixa
  
• Cabeçalhos
  
• Tags Jump e Anchor
  
• Tag List
  
• Tabelas
  

O que é o BBCode?

BBCode (abreviação de Bulletin Board Code) é uma pequena linguagem criada pelos fóruns phpBB e agora está presente na maioria dos fóruns do mundo. O BBCode utiliza "tags" para formatar ou adicionar efeitos nas mensagens (posts) em fóruns. As tags normalmente aparecem entre colchetes com uma letra ou palavra no meio. Para demonstrar que o BBCode está começando usa-se [] e para terminar [/]. Um sistema converte esses códigos aos meio entendíveis dos browsers, como HTML ou XHTML. A principal vantagem de se utilizar BBCode é a simplicidade do código facilitando novos usuários a usar os código de modo mais fácil.

O básico do BBCode

O BBCode ao início pode parecer um bicho de sete cabeças, mas na verdade é bastante fácil de masterizar. Com este guia, vai ficar a perceber o BBCode num instante e vai ficar pronto para fazer um ótimo guia!

Mas por outro lado ele pode ser bem chato, pois é muito fácil de bugar o BBCode. E se você buga uma tag, corre o risco de bugar também o resto do BBCode no post.

Para evitar ao máximo os bugs, escreva o seu guia no Bloco de Notas do seu PC e quando for passar para o fórum, antes de copiar e colar siga este método:

- No painel de edição de postagens, existirão vários ícones. Basta clicar no primeiro ícone (o que se parece com um interruptor), para entrar no modo de postagem manual. Caso não tenham entendido o que eu falei, basta clicar neste ícone aqui:

Ao clicar no ícone, todas as ferramentas serão desabilitadas, fazendo com que seja necessário a edição de todo e qualquer código manualmente, desde adição de vídeos, imagens, formatação de texto e aplicação de emoticons.

Agora pode copiar e colar o BBCode do seu guia, ou até mesmo fazer o guia na própria caixa de texto do fórum. Não recomendo fazer guias na caixa de texto do fórum, porque se buga uma tag, ela vai bugar outras tags, e depois tem de corrigir todas. Se fizer no Bloco de Notas, se buga uma tag porque, por exemplo, se esqueceu de fechar uma tag corretamente, ela não irá bugar as outras tags, basta fechá-la corretamente e pronto, problema resolvido!

Atrevo-me a dizer que 95% dos bugs do BBCode ocorrem por causa de tags mal fechadas. Por isso, muita atenção é também requerida para evitar os bugs no BBCode.

Se for fazer um guia muito grande, divida-o em vários posts. Digo isto porque, se o seu post exceder os 50000 (50 mil) caratéres, o BBCode vai começar a bugar. No entanto este número pode variar. Eu já tive posts cujo BBCode bugou depois dos 20000 (20 mil) caratéres. Veja um exemplo do que acontece se o post exceder esse limite:

Outra coisa importante, lembre-se que a caixa de edição de texto do fórum pode "sujar" o seu BBCode com tags inuteis. Por exemplo, ele pode adicionar a tag size=4 e a tag color com a cor preta. Essas tags são completamente inúteis, pois mesmo sem elas, o seu texto continua com tamanho 4 e com a cor preta a não ser que o altere. Como tal, elas só ajudam a exceder o número de caratéres e a bugar o seu BBCode. Exemplo de um BBCode "sujo" de tags inúteis:

[size=4][color=#000000]Texto aqui[/color][/size]

Resultado: Texto aqui

Exemplo de BBCode limpo, sem tags inúteis:

Texto aqui

Resultado: Texto aqui

Como pode ver, neste caso, a tag size=4 e color=#00000 não estão lá a fazer nada, pois isso está pré-definido no fórum. Se o seu guia tiver essas tags no texto, retire-as, pois elas vão causar bugs mais cedo ou mais tarde.

Mais uma coisa bem importante que pode causar bugs. A hierarquia de abrir e fechar tags. Vamos começar com um exemplo prático:

[b][i][color=red]Hierarquia das tags[/color][/i][/b]

Como pode ver, usei 3 tags diferentes aí. A tag b, que é o negrito, i, que é o itálico, e color=red para deixar o texto vermelho. E veja a ordem em que abri as tags e as fechei. Como pode ver, a primeira tag que abri (b), foi a última a ser fechada. A última tag que abri (color), foi a primeira a ser fechada.

Preste muita atenção a isso, se seguir essa hierarquia (primeira a ser aberta é a última a ser fechada), vai reduzir bastante as chances de evitar bugs no BBCode.

Por último, nunca use a Pré-Visualização! Ela pode bugar algumas tags em alguns casos, como por exemplo a tag List (que é uma das tags mais problemáticas do BBCode). Mais vale clicar logo em "Enviar Post Modificado" e ver como está a ficar o seu guia assim do que usar a Pré-Visualização.

Agora que já sabe os básicos de BBCode, é tempo de aprender quais são as tags ao seu dispôr e como usá-las!

Tags Básicas

Negrito

Formatação básica, deixa textos em negrito. Muito utilizado para dar destaque ou ressaltar alguma informação. Muito bom para títulos também. Porém deve-se ter o cuidado de não abusar desta ferramenta pois se usado excessivamente em textos pode deixar o testo cansativo de se ler. A sua tag é a letra b, de "bold", que significa negrito em inglês.

Como utilizar:

[b]Texto em negrito[/b]

Resultado: Texto em negrito

Itálico

Em tipografia, os tipos itálicos são fontes cursivas cujo desenho das letras minúsculas, baseia-se numa estilizada forma caligráfica e devido a isso esses tipos de letras inclinam-se ligeiramente para a direita. Seu uso e limitações são as mesmas que as do negrito. Muito cuidado ao usar ambos ao mesmo tempo ou próximos um do outro pois pode ficar esteticamente desagradável. A sua tag é a letra i, de italic, que significa itálico em inglês.

Como utilizar:

[i]Texto em itálico[/i]

Resultado: Texto em itálico

Sublinhado

Usado geralmente em titulos e subtitulos para diferenciar do texto em si. O uso excessivo deste recurso pode causar uma poluição visual muito grande. A sua tag é a letra u, de underlined, que significa sublinhado em inglês.

Como utilizar:

[u]Texto sublinhado[/u]

Resultado: Texto sublinhado

Riscado

Seu uso se popularizou devido à internet, muito usado para dar a sensação de que ia dizer algo e disse outra, muitas vezes associado à ironia. O seu uso nos guias é proibido. A sua tag é a letra s, de scribble, que significa riscado ou rabiscado em inglês.

Como utilizar:

[s]Texto Riscado[/s]

Resultado: Texto Riscado

Sobrescrito

Usado em diversas fórmulas, entretanto no guia pode ser usado para marcar observações que serão descritas mais abaixo no texto. Um exemplo disso é o ^*, ^#, ¹ e outros. Sua tag é sup, de superscript, que significa sobrescrito em inglês.

Como utilizar:

Sobrescrito[sup]1[/sup]

Resultado: Sobrescrito¹

Subescrito

Também é muito usado em diversas formulas, entretanto nos guias não costuma aparecer com frequência. Sua tag é sub, de subscript, que significa subescrito em inglês.

Como utilizar:

Subescrito[sub]1[/sub]

Resultado: Subescrito₁

Centralizado

Alinhamento centralizado. Muito usado nos guias, ótimo para títulos, subtítulos, vídeos, informações breves importantes, etc. A sua tag é center, que significa centralizado em inglês.

Como utilizar:

[center]Texto Centralizado[center][center][img=Link da imagem aqui][/center] <- Deixa a imagem centralizada[center]Link do vídeo aqui[/center] <- Deixa o vídeo centralizado

Resultado:

Alinhamento à direita

Pouco utilizado nos guias. Normalmente, é somente utilizado na seção Agradecimentos. A sua tag é right, que significa direita em inglês.

Como utilizar:

[right]Alinhamento à direita[/right]

Resultado:

Alinhamento à direita

Justificado

Alinhamento Justificado, usado normalmente na seção Sobre o Jogo. Uma das únicas tags em português, a sua tag é justificado. Créditos ao XicoDavid89 pelo exemplo:

Com a tag:

Sem a tag:

Como utilizar:

[justificado]Texto aqui[/justificado]

Obs: Se não notou na diferença entre com a tag e sem a tag, olhe para o final de cada linha.

Tag hr

Uma simples linha cinzenta, usada para separar informações e em títulos. Se quer que a linha fique por baixo do texto, coloca a tag depois do texto, se quer que fique por baixo do texto, coloca a tag antes do texto começar. A sua tag é hr, de horizontal rule, que significa linha horizontal em inglês.

Recomendo usar uma das tags cabecalho, pois ficam mais bonitas esteticamente porque pode selecionar a cor delas e não bugam tanto como a hr. Além disso, têm a mesma função que a tag hr.

Como utilizar:

Tag hr por baixo do texto [hr][hr]Tag hr por cima do texto[hr]Tag hr por cima e por baixo do texto[hr]

Não vou colocar o resultado pois ela assim causa conflitos com outras tags que usei aqui, como a H, daí eu não recomendar usá-la.

Size

Usado para definir o tamanho da fonte, sendo que X representa o tamanho da fonte, de 1 a 6, sendo 1 o mais pequeno e 6 o maior. Size=4 é o tamanho normal, ou pré-definido, do fórum, por isso usar o valor 4 torna-se obsoleto. A sua tag é size= como referido anteriormente, que significa tamanho em inglês.

Como utilizar:

[size=3]Texto em tamanho 3[/size][size=2]Texto em tamanho 2[/size]

Resultado: Texto em tamanho 3

Texto em tamanho 2

Cor

Usado mudar a cor da fonte. As cores pode usar o seu código hexadecimal, para ter uma maior variedade de cores, ou simplesmente escrevendo o nome da cor. Use somente em títulos ou informações importantes, para evitar que o seu guia se torne um festival de cores e consequentemente arruinando a estética dele. A sua tag é color, que significa cor em inglês.

Como utilizar:

[color=red]Texto vermelho usando o nome da cor, red[/color][color=#ff0000]Texto vermelho usando o hexadecimal da cor vermelha[/color]

Resultado: Texto vermelho usando o nome da cor, red

Texto vermelho usando o hexadecimal da cor vermelha

Este site é muito bom para obter qualquer hexadecimal da cor que desejar: http://www.w3schools.com/tags/ref_colorpicker.asp

Tag H

Usado para definir o tamanho de um título, sendo que X representa o tamanho do titulo, de 1 a 3, sendo 1 o maior e 3 o mais pequeno. Não recomendo usar esta tag pois pode dar conflito com outras, como a hr. A tag size é uma melhor opção. A sua tag é h, como já foi indicado, de height, que significa altura em inglês.

Como utilizar:

[h=1]Título com h=1[/h][h=2]Título com h=2[/h][h=3]Título com h=3[/h]

Resultado:

Título com h=1

Título com h=2

Título com h=3

Inserir Imagens

Inserir imagens num post é bem simples, basta usar a tag img=, seguido do link da imagem.

Como utilizar:

[img=http://forum.mypst.com.br/uploads/profile/photo-35990.jpg?_r=1410787450]

Resultado:

Inserir Links

Linkar textos ou palavras ou letras num post é bem simples, basta usar a tag url=, seguido do link que deseja, bem, linkar.

Como utilizar:

Aceda à seção Novos Guias do fórum do mypst [url=http://forum.mypst.com.br/index.php/forum/13-guia-de-trof%C3%A9us-novos-guias/]clicando aqui[/url]

Resultado: Aceda à seção Novos Guias do fórum do mypst clicando aqui

Tags Complexas

Tag Spoiler

Uma das tags mais importantes para se usar num guia. Em algumas ocasiões, terá que referir um ponto importante da história do jogo e que seja importante para a dica de um troféu por exemplo. Mas para um usuário não o ler por acidente enquanto lê o guia, coloca essa informação em spoiler para não estragar a surpresa.

Também é útil para colocar imagens, vídeos, textos muito grandes e listas muito grandes em spoiler, para não causar poluição visual. É bem simples usar a tag spoiler, mas não se esqueça de a abrir e fechar apropriadamente, pois é uma tag bem problemática e pode bugar o BBCode inteiro se não for bem utilizada.

Como utilizar:

[spoiler]Spoiler da história aqui[/spoiler] <- Texto em spoiler[spoiler]https://www.youtube.com/watch?v=9IbPrk-yuts[/spoiler] <- Vídeo em spoiler[spoiler][img=http://forum.mypst.com.br/uploads/profile/photo-35990.jpg?_r=1410787450][/spoiler] <- Imagem em spoiler

Resultados:

Lembre-se que a tag spoiler cria um espaçamento. Passo a explicar:

Imagine que está a escrever a dica de um troféu, e ela acaba com um spoiler. Você normalmente colocaria assim:

[anchor]137073[/anchor] [trophyimg]http://www.mypst.com.br/media/game/NPWR06037_00/trophy_6.png[/trophyimg] [trophyinfo][color=#A0522D]Rescue / Resgate[/color] :bronze: [jump=Indice][topo][/jump]In the "Ground Zeroes" mission, rescue the prisoner to be executed and extract him via chopper[/trophyinfo]Na missão "Ground Zeroes", resgate o prisioneiro prestes a ser executado e extraia-o por helicóptero.[spoiler][center]https://www.youtube.com/watch?v=M-IJ_dBp0Uc[/center][/spoiler][anchor]137067[/anchor] [trophyimg]http://www.mypst.com.br/media/game/NPWR06037_00/trophy_0.png[/trophyimg] [trophyinfo][color=#A0522D]Reunion / Reunião[/color] :bronze: [jump=Indice][topo][/jump]Reunite with Chico or Paz[/trophyinfo][color=#0000cd][b]Troféu relacionado à história.[/b][/color]Encontre Chico ou Paz.

Resultado:

Rescue / Resgate :bronze: [topo] In the "Ground Zeroes" mission, rescue the prisoner to be executed and extract him via chopper

Na missão "Ground Zeroes", resgate o prisioneiro prestes a ser executado e extraia-o por helicóptero.

 

 

 

 

 

 

Reunion / Reunião :bronze: [topo] Reunite with Chico or Paz

Troféu relacionado à história.

 

Encontre Chico ou Paz.

 

Como pode ver, existe um espaçamento a mais entre as duas dicas, devido à tag spoiler. Para evitar o espaçamento, junte o BBCode assim:

[anchor]137073[/anchor] [trophyimg]http://www.mypst.com.br/media/game/NPWR06037_00/trophy_6.png[/trophyimg] [trophyinfo][color=#A0522D]Rescue / Resgate[/color] :bronze: [jump=Indice][topo][/jump]In the "Ground Zeroes" mission, rescue the prisoner to be executed and extract him via chopper[/trophyinfo]Na missão "Ground Zeroes", resgate o prisioneiro prestes a ser executado e extraia-o por helicóptero.[spoiler][center]https://www.youtube.com/watch?v=M-IJ_dBp0Uc[/center][/spoiler][anchor]137067[/anchor] [trophyimg]http://www.mypst.com.br/media/game/NPWR06037_00/trophy_0.png[/trophyimg] [trophyinfo][color=#A0522D]Reunion / Reunião[/color] :bronze: [jump=Indice][topo][/jump]Reunite with Chico or Paz[/trophyinfo][color=#0000cd][b]Troféu relacionado à história.[/b][/color]Encontre Chico ou Paz.

Resultado:

Rescue / Resgate :bronze: [topo] In the "Ground Zeroes" mission, rescue the prisoner to be executed and extract him via chopper

Na missão "Ground Zeroes", resgate o prisioneiro prestes a ser executado e extraia-o por helicóptero.

 

 

 

 

 

Reunion / Reunião :bronze: [topo] Reunite with Chico or Paz

Troféu relacionado à história.

 

Encontre Chico ou Paz.

Pelo exemplo acima, a tag spoiler é uma das maiores causadoras de problemas de espaçamentos. Na verdade a maioria das tags causam isso, como a caixa, H, cabecalho, etc.

Tag Caixa

A tag Caixa é uma caixa que torna o seu guia muito bonito se usada nos sítios certos do guia. Fica bem no RoadMap, para colocar vídeos, para colocar listas, etc. Veja o meu guia do Metal Gear Solid V: Ground Zeroes como exemplo, ou o guia do Tales of Symphonia: Dawn of the New World do nosso amigo e Analista DesmaBR, que foi de onde eu tirei a ideia.

Como utilizar:

[caixa=Título da Caixa]Conteúdo aqui, pode colocar aqui o que quiser e bem entender[/caixa]

Resultado:

Tal como a tag spoiler, ela cria o espaçamento a mais, tendo que juntar o BBCode que vem por baixo dela para evitar espaçamentos desnecessários.

Cabeçalhos

Esta é a tag mais útil para títulos e subtítulos! Deixa o seu guia muito bonito se usada corretamente e em quantidades q.b. Existem 4 tipos de cabeçalhos, vamos aos básicos primeiro e depois explico-lhe funções mais avançadas deles.

É uma tag bem simples de usar. É usada como a tag color, mas sem usar o # ao escrever o número hexadecimal.

Como utilizar:

[cabecalho1=0000ff]Cabecalho1 usando hexadecimal 0000ff[/cabecalho1][cabecalho2=00ff00]Cabecalho2 usando hexadecimal 00ff00[/cabecalho2][cabecalho3=ff0000]Cabecalho3 usando hexadecimal ff0000[/cabecalho3][cabecalho4=ff00ff]Cabecalho4 usando hexadecimal ff00ff[/cabecalho4]

Resultados:

Os textos nos cabeçalhos podem ser formatados normalmente. Créditos ao Analista Catenho por me ter dito isto:

[cabecalho1=00ff00]Insira o texto aqui, [size=2][b]ele[/b][/size][size=4][u] pode[/u][/size] [color=red]ser[/color] [i]formatado[/i] normalmente[/cabecalho1]

[cabecalho2=00ff00]Insira o texto aqui, [size=2][b]ele[/b][/size][size=4][u] pode[/u][/size] [color=red]ser[/color] [i]formatado[/i] normalmente[/cabecalho2]

[cabecalho3=00ff00]Insira o texto aqui, [size=2][b]ele[/b][/size][size=4][u] pode[/u][/size] [color=red]ser[/color] [i]formatado[/i] normalmente[/cabecalho3]

[cabecalho4=00ff00]Insira o texto aqui, [size=2][b]ele[/b][/size][size=4][u] pode[/u][/size] [color=red]ser[/color] [i]formatado[/i] normalmente[/cabecalho4]

Tags Jump e Anchor

Estas duas tags são onde os usuários normalmente têm mais dúvidas, já recebi inúmeras MP de usuários a perguntarem-me como usá-las. Na verdade é bastante simples, só tem que fazer coincidir tudo. Passo a explicar.

A tag jump é utilizada para linkar diferentes partes do guia, você "salta" (jump) facilmente de uma parte do guia para a outra se a utilizar. Ela é usada por pré-definição no índice do guia por exemplo, e é por isso que ao clicar, por exemplo, em RoadMap no Ãndice, você salta imediatamente para o RoadMap no guia.

No entanto, a tag jump não funciona em a tag anchor, daí elas terem de ser utilizadas em conjunto. Vamos a exemplos práticos de como a utilizar. Coloquei uma tag anchor no Ãndice deste tutorial, mas já lá vamos. Por enquanto, fica aqui um link para saltar para o Ãndice:

Ãndice

BBCode utilizado:

[jump=Indice]Ãndice[/jump]

Ora, como eu disse anteriormente, isso só é possível porque eu coloquei uma tag anchor no Ãndice. E ela tem de ter o mesmo nome que coloque na tag jump=, neste caso é "Indice". Aqui vai o BBCode do título do Ãndice desse tutorial:

[anchor]Indice[/anchor][h=1] Ãndice [/h]

Como pode ver, o que está escrito dentro da tag anchor, é igual ao que está escrito na tag jump=. Daí eles os dois ficarem linkados. Tem de ser exatamente igual, tanto na acentuação como nas letras maisuculas/minusculas.

De uma forma básica, a tag jump cria o link, e a tag anchor cria o alvo desse link.

Tag List

Bem pessoal, finalmente chegámos a uma das tags mais chatas do BBCode, a tag list. É também uma das mais problemáticas, pois se buga por exemplo, a tag List do índice, que fica logo no inicio do guia, corre o risco de bugar o guia inteiro.

Preste muita atenção quando a usar. Recomendo até testar as listas que faz num post à parte antes de as colocar no guia. Se se enganar, vai ver logo o que está mal, corrige e assim não buga o guia.

Então vamos lá. Há varios tipos de lista, mas vamos ao mais simples primeiro, vamos fazer uma pequena lista sem muitas complicações. Há duas tags que tem de saber, que são List e *. List é a tag normal, abre e fecha a tag list, a tag * serve para fazer os diferentes pontos da lista. Certifique-se de abrir e fechar apropriadamente a tag *, pois assim a lista não vai funcionar. Aqui vai um exemplo:

[LIST][*]Ponto 1[/*][*]Ponto 2[/*][*]Ponto 3[/*][*]Ponto 4[/*][*]Ponto 5[/*][/LIST]

Resultado:

• Ponto 1
  
• Ponto 2
  
• Ponto 3
  
• Ponto 4
  
• Ponto 5
  

E pronto, assim fica criada uma lista bem simples. É ótima para listar os troféus num RoadMap. Vamos a um exemplo:

[LIST][*]:silver: [jump=87520] [color=#787878] Covenant: Gravelord Servant [/color][/jump] - Junte-se ao Covenant Gravelord Servant (tem de ser feito antes de derrotar Nito). Certifique-se que tem 10 Eyes of Death antes de se juntar ao Covenant! Clique no nome do troféu para mais informações[/*][*]:bronze: [jump=87537] [color=#A0522D] Rite of Kindling [/color][/jump] - Derrote Pinwheel e obtenha o Rite of Kindling[/*][*]:silver: [jump=87541] [color=#787878] Defeat Gravelord Nito [/color][/jump] - Derrote Gravelord Nito[/*][*]:silver: [jump=87542] [color=#787878] Defeat Bed of Chaos [/color][/jump] - Derrote a Bed of Chaos[/*][*]:silver: [jump=87544] [color=#787878] Defeat Seath the Scaleless [/color][/jump] - Derrote Seath em Crystal Cave (acedida através de Duke's Archives)[/*][*]:silver: [jump=87546] [color=#787878] Defeat Crossbreed Priscilla [/color][/jump] - Em Painted World of Ariamis, derrote Crossbreed Priscilla. Clique no nome do troféu para saber como aceder[/*][/LIST]

Resultado:

• :silver: Covenant: Gravelord Servant - Junte-se ao Covenant Gravelord Servant (tem de ser feito antes de derrotar Nito). Certifique-se que tem 10 Eyes of Death antes de se juntar ao Covenant! Clique no nome do troféu para mais informações
  
• :bronze: Rite of Kindling - Derrote Pinwheel e obtenha o Rite of Kindling
  
• :silver: Defeat Gravelord Nito - Derrote Gravelord Nito
  
• :silver: Defeat Bed of Chaos - Derrote a Bed of Chaos
  
• :silver: Defeat Seath the Scaleless - Derrote Seath em Crystal Cave (acedida através de Duke's Archives)
  
• :silver: Defeat Crossbreed Priscilla - Em Painted World of Ariamis, derrote Crossbreed Priscilla. Clique no nome do troféu para saber como aceder
  

Tudo simples até agora certo? Pois agora que sabe o básico dos básicos da tag list, vamos a formatações mais avançadas dela. Começemos pela maneira como uma lista de um Ãndice de um guia é feito:

[LIST=1][*][jump=Introducao]Introdução[/jump][/*][*][jump=Sobre]Sobre o jogo[/jump][/*][*][jump=RoadMap]RoadMap [/jump][/*][*][jump=Trofeus]Troféus[/jump][/*][LIST=2][*] :platinum: [jump=87506] [color=48D1CC] The Dark Soul [/color][/jump][/*] [*] :gold: [jump=87507] [color=FFC125] To Link the Fire [/color][/jump][/*] [*] :gold: [jump=87508] [color=FFC125] Dark Lord [/color][/jump][/*] [*] :silver: [jump=87509] [color=787878] Knight's Honor [/color][/jump][/*] [*] :silver: [jump=87510] [color=787878] Wisdom of a Sage [/color][/jump][/*] [/LIST][/LIST]

Resultado:

Como deve ter reparado, esta lista, na sua lista principal (LIST=1), ela fica numerada, e depois é criada uma sub-lista (LIST=2), com círculos cinzentos.

Você começa por abrir a LIST=1, quando acabar os itens da LIST=1, não a feche com /LIST! Comece de imediato a LIST=2, e quando acabar os itens dessa sub-lista, fecha as duas listas (/LIST/LIST) e pronto.

No entanto, se vai colocar uma seção de Agradecimentos no guia, o item Agradecimentos está incluido na LIST=1, mas ele tem de vir por baixo da sub-lista. E é bem simples de fazer isso. Observe:

[LIST=1][*][jump=Introducao]Introdução[/jump][/*][*][jump=Sobre]Sobre o jogo[/jump][/*][*][jump=RoadMap]RoadMap [/jump][/*][*][jump=Trofeus]Troféus[/jump][/*][LIST=2][*] :platinum: [jump=87506] [color=48D1CC] The Dark Soul [/color][/jump][/*] [*] :gold: [jump=87507] [color=FFC125] To Link the Fire [/color][/jump][/*] [*] :gold: [jump=87508] [color=FFC125] Dark Lord [/color][/jump][/*] [*] :silver: [jump=87509] [color=787878] Knight's Honor [/color][/jump][/*] [*] :silver: [jump=87510] [color=787878] Wisdom of a Sage [/color][/jump][/*] [/LIST][*][jump=Agradecimentos]Agradecimentos[/jump][/*][/LIST]

Resultado:

Como pode ver, aqui é um bocado diferente do caso anterior. Você abre normalmente a LIST=1, coloca todos os itens exceto Agradecimentos, abre a LIST=2, coloca todos os itens dela, e fecha a LIST=2 com o comando /LIST. Aí, você coloca o item Agradecimentos e fecha a LIST=1 com o comando /LIST. Feito!

Você pode ir bem longe com a lista. Não está limitada à LIST=1 e LIST=2. Pois segue um exemplo que eu tirei do tutorial anterior, criado pelo denis_a007.

[LIST=1][*]Meh (lista principal)[/*][*]Meh (lista principal)[/*][*]Meh (lista principal)[/*][LIST=2][*]Meh (sub lista 1)[/*][*]Meh (sub lista 1)[/*][*]Meh (sub lista 1)[/*][LIST=3][*]Meh (sub lista 2)[/*][*]Meh (sub lista 2)[/*][*]Meh (sub lista 2)[/*][LIST=4][*]Meh (sub lista 3)[/*][*]Meh (sub lista 3)[/*][*]Meh (sub lista 3)[/*][/LIST][*]Meh (sub lista 2)[/*][*]Meh (sub lista 2)[/*][/LIST][*]Meh (sub lista 1)[/*][*]Meh (sub lista 1)[/*][/LIST][*]Meh (lista principal)[/*][*]Meh (lista principal)[/*][*]Meh (lista principal)[/*][/LIST]

Resultado:

A ideia continua a ser a mesma das listas anteriores, só que agora tem mais sub-listas.

Se desejar, também pode fazer com que a lista numerada comece depois de uma lista não numerada. Exemplo:

[LIST][*]Lista não numerada[/*][*]Lista não numerada[/*][*]Lista não numerada[/*][LIST=1][*]Lista numerada[/*][*]Lista numerada[/*][/LIST][/LIST]

Resultado:

• Lista não numerada
  
• Lista não numerada
  
• Lista não numerada
  
• Lista numerada
  
• Lista numerada
  

Pratique usando os exemplos que eu dei e tente criar assim listas mais complexas para ficar à vontade com essa tag.

Tabelas

Ai as tabelas... é o comando de BBCode que me dá mais dor de cabeça. A MegumiTen tinha feito um tutorial muito bom, contudo, tem apenas o básico e aqui vou aprofundar um pouco mais. A parte do básico vai ser baseado no tutorial dela, mas depois disso vai ser com experiências que eu fiz e com tags que não foram referidas no tutorial anterior.

Vamos ao básico. Mas até mesmo o básico pode ser um pouco difícil pois há muitas tags envolvidas para criar uma simples tabela.

A primeira que tem de saber é a tag table. Ela abre e fecha a tabela. Simples como isso.

De seguida vai inserir a tag tr. Ela é a linha da tabela. Tudo o que estiver dentro de uma tag tr estará dentro de uma linha. Sempre pense numa tr como uma linha horizontal.

Por último insere a tag td. Ela é a célula da tabela. A quantidade de células (tag td) dentro de uma tag tr vai dizer quantas colunas a sua tabela vai ter.

Vamos fazer uma tabela com uma linha (uma tag tr) e 2 colunas/células (duas tags td):

[table][tr][td]Primeira Coluna[/td][td]Segunda Coluna[/td][/tr][/table]

Resultado:

Lembra-se da hierarquia das tags do BBCode? A primeira a ser aberta é a última a ser fechada? Pois aqui isso também se aplica, no entanto existe outra hierarquia. Começa por usar a tag table, de seguida a tag tr e de seguida a tag td. Se não colocar as tags nessa ordem, a tabela não vai funcionar.

Pegando no exemplo de cima, vamos agora fazer com 2 linhas e 3 colunas. É bem simples, basta pegar no exemplo anterior, colocar mais uma tag td na primeira tag tr, depois criar uma nova tag tr e colocar lá 3 tags td:

[table][tr][td]Primeira Coluna, Primeira Linha[/td][td]Segunda Coluna, Primeira Linha[/td][td]Terceira Coluna, Primeira Linha[/td][/tr][tr][td]Primeira Coluna, Segunda Linha[/td][td]Segunda Coluna, Segunda Linha[/td][td]Terceira Coluna, Segunda Linha[/td][/tr][/table]

Resultado:

Como já deve ter reparado, eu tenho o BBCode todo junto, sem espaçamentos. Pois é assim que o BBCode de uma tabela deve estar, senão vai haver espaçamentos horríveis nela. Pode separar o BBCode enquanto a faz (que é o que eu faço) para facilitar, mas no fim tem de juntar tudo.

Por causa disto, eu não recomendo criar as tabelas na caixa de texto do fórum. Se estiver a fazer um guia e já tiver feito a tabela, ao clicar no botão "Editar", a caixa de texto do fórum vai separar, sem razão aparente, o BBCode da sua tabela, spoilers, etc e tem de juntar tudo outra vez. Como tal, use sempre o Bloco de Notas ou o Notepad++.

Agora que já sabe o básico, vamos introduzir uma nova tag. A tdtitulo. Ela é como tag td, mas é muito melhor para a primeira linha da tabela que normalmente tem um título. Segue um exemplo:

[table][tr][tdtitulo][center]Flores amarelas[/center][/tdtitulo][tdtitulo][center]Flores vermelhas[/center][/tdtitulo][tdtitulo][center]Flores Brancas[/center][/tdtitulo][/tr][tr][td]Girassol (Amarela)[/td][td]Hibisco (Vermelha)[/td][td]Lírio Branco (Branca)[/td][/tr][tr][td]Margarida (Amarela)[/td][td]Rosa Vermelha (Vermelha)[/td][td]Boca de Leão (Branca)[/td][/tr][tr][td]Açafrão (Amarela)[/td][td]Açucena (Vermelha)[/td][td]Jasmin da Noite (Branca)[/td][/tr][tr][td]Calla (Amarela)[/td][td]Beri (Vermelha)[/td][td]Hortência Branca (Branca)[/td][/tr][/table]

[table][tr][tdtitulo][center]Flores amarelas[/center][/tdtitulo][tdtitulo][center]Flores vermelhas[/center][/tdtitulo][tdtitulo][center]Flores Brancas[/center][/tdtitulo][/tr][tr][td]Girassol (Amarela)[/td][td]Hibisco (Vermelha)[/td][td]Lírio Branco (Branca)[/td][/tr][tr][td]Margarida (Amarela)[/td][td]Rosa Vermelha (Vermelha)[/td][td]Boca de Leão (Branca)[/td][/tr][tr][td]Açafrão (Amarela)[/td][td]Açucena (Vermelha)[/td][td]Jasmin da Noite (Branca)[/td][/tr][tr][td]Calla (Amarela)[/td][td]Beri (Vermelha)[/td][td]Hortência Branca (Branca)[/td][/tr][/table]

Resultado:

Como deve ter percebido, a tag tdtitulo cria um negrito pré-definido e um fundo azul, daí ela ser ótima para a primeira linha de uma tabela, que é onde estão os títulos (neste caso, Flores amarelas, Flores Vermelhas e Flores Brancas).

Pode até adicionar uma tag center para deixar as coisas centralizadas e também ficam mais bonitas assim na maior parte dos casos.

Agora vamos às tabelas mescladas. Comecemos por introduzir uma nova tag. A tag tdrows=X. Ela serve para mesclar um X número de linhas em uma coluna. Vamos mesclar 5 linhas com uma coluna como exemplo:

[table][tr][tdrows=5]Coluna 1, que está mesclada[/tdrows][td]Linha 1, Coluna 2[/td][td]Linha 1, Coluna 3[/td][/tr][tr][td]Linha 2, Coluna 2[/td][td]Linha 2, Coluna 3[/td][/tr][tr][td]Linha 3, Coluna 2[/td][td]Linha 3, Coluna 3[/td][/tr][tr][td]Linha 4, Coluna 2[/td][td]Linha 4, Coluna 3[/td][/tr][tr][td]Linha 5, Coluna 2[/td][td]Linha 5, Coluna 3[/td][/tr][/table]

[table][tr][tdrows=5]Coluna 1, que está mesclada[/tdrows][td]Linha 1, Coluna 2[/td][td]Linha 1, Coluna 3[/td][/tr][tr][td]Linha 2, Coluna 2[/td][td]Linha 2, Coluna 3[/td][/tr][tr][td]Linha 3, Coluna 2[/td][td]Linha 3, Coluna 3[/td][/tr][tr][td]Linha 4, Coluna 2[/td][td]Linha 4, Coluna 3[/td][/tr][tr][td]Linha 5, Coluna 2[/td][td]Linha 5, Coluna 3[/td][/tr][/table]

Resultado:

E tenho mais duas tags para si. titulocols=X e tdcols=X. Estas servem para mesclar uma coluna em X linhas. O titulocols e o tdcols têm a mesma função, mas o titulocols é como se fosse um tdtitulo, tem negrito pré-definido e um fundo azul. Vamos mesclar 5 colunas em uma linha por exemplo:

[table][tr][titulocols=5]Linha 1, que está mesclada[/titulocols][/tr][tr][tdcols=5]Linha 2, que está mesclada[/tdcols][/tr][tr][td]Coluna 1, Linha 3[/td][td]Coluna 2, Linha 3[/td][td]Coluna 3, Linha 3[/td][td]Coluna 4, Linha 3[/td][td]Coluna 5, Linha 3[/td][/tr][/table]

[table][tr][titulocols=5]Linha 1, que está mesclada[/titulocols][/tr][tr][tdcols=5]Linha 2, que está mesclada[/tdcols][/tr][tr][td]Coluna 1, Linha 3[/td][td]Coluna 2, Linha 3[/td][td]Coluna 3, Linha 3[/td][td]Coluna 4, Linha 3[/td][td]Coluna 5, Linha 3[/td][/tr][/table]

Resultado:

E é tudo pessoal! Caso continuem com dúvidas acerca do BBCode, postem aí, eu até me posso esquecer de alguma coisa e assim atualizo o tutorial. Espero ter sanado muitas das vossas dúvidas quanto ao BBCode!

Tag Code

Obs: Coloquei esta tag no fim do tutorial para não bugar. A demonstração dela (a parte do Como utilizar) buga todo o texto por baixo dela, porque estou a colocar uma tag code dentro de uma tag code.

A tag code é a tag que estou a utilizar para vos mostrar como utilizar cada tag. O seu único uso é para mostrar como se usa o BBCode, ou para passar um certo BBCode para alguém, visto que os BBCodes dentro dessa tag não são ativados.

Precisa de mais uns testes para confirmar, mas tem um limite de caratéres para colocar dentro de essa tag. Se excede o limite, tem de abrir outra tag code.

Como utilizar:

[code=auto:0]BBCode aqui