[Guia] BBCodes, o que são?

O que é BBCode?

O BBCode é a abreviação de Bulletin Board Code. Consiste, na verdade, em uma implementação do HTML. O BBCode é, nele mesmo, similar ao estilo HTML, os seus elementos, balisas, são delimitados por colchetes [ e ] , ao invés de < e >, e oferecem um melhor controle sobre como a informação será visualizada. De acordo com o modelo de documento que você lê, você pode adicionar BBCode às suas mensagens através de uma interface de botões clicáveis acima da caixa de texto. Neste sentido, o guia abaixo será útil .

Serve para dar destaque a algo importante. Nas artes gráficas, o termo negrito indica o uso de um traço mais grosso que o comum, utilizado para dar maior realce às palavras.

Código:

Código:

Utilize o código [b] no inicio da palavra/frase que deseja usar, para finalizar o destaque, use o código [/b] no final.

Resultado: Frase de teste

Não há uma regra gramatical quanto ao uso do estilo de fonte itálico. Contudo, no Brasil, as normas ABNT recomendam o emprego do itálico para destacar palavras ou frases em língua estrangeira.

Código:

Código:

Utilize o código [i] no inicio da palavra/frase que deseja usar, para finalizar, use o código [/i] no final.

Resultado: Frase de teste

Serve para riscar o texto.

Código:

Código:

Utilize o código [strike] no inicio da palavra/frase que deseja usar, para finalizar, use o código [/strike] no final.

Resultado: Frase de teste

Serve para alinhar o texto selecionado para a esquerda.

Código:

Código:

Utilize o código [left] no inicio da palavra/frase/texto que deseja usar, para finalizar, use o código [/left] no final.

Resultado:

Serve para alinhar o texto selecionado para centralizar.

Código:

Código:

Utilize o código [center] no inicio da palavra/frase/texto que deseja usar, para finalizar o destaque, use o código [/center] no final.

Resultado:

Serve para alinhar o texto selecionado para a direita.

Código:

Código:

Utilize o código [right] no inicio da palavra/frase/texto que deseja usar, para finalizar o destaque, use o código [/right] no final.

Resultado:

Usa-se a lista para organizar os texto em tópicos.

Código:

Código:

Utilize o código [list] no inicio da palavra/frase que deseja usar, para finalizar, use o código [/list] no final. Cada novo tópico, utilize o código [*] para adicionar um novo tópico.

Resultado:

Frase de teste
• Frase de teste

Usa-se a lista para organizar os texto em tópicos. Com está lista você organiza em numeral ou em ordem alfabética.

Código:

Código:

Utilize o código [list=1] no inicio da palavra/frase que deseja usar em numeral ou [list=a] para alfabética, para finalizar, use o código [/list] no final. Cada novo tópico, utilize o código [*] para adicionar um novo tópico.

Resultado 1:

1. Frase de teste
2. Frase de teste
3. Frase de teste

Resultado 2:

1. Frase de teste
2. Frase de teste
3. Frase de teste

Utilize para fazer uma citação de um comentário, texto ou frase. Existem dois métodos para citar um texto, com ou sem referência.

Código:

O exemplo da referência, para citar um texto escrito pelo Sub, você deverá digitar:

Código:

[quote="Sub"]Aqui deverá ser digitado o texto escrito pelo Sub[/quote]

Resultado:

Sub escreveu:Aqui deverá ser digitado o texto escrito pelo Sub

O segundo método permite citar qualquer texto sem fazer referência ao autor. Para isso:

Código:

[quote]Citação sem referência[/quote]

Resultado:

Citação sem referência

Para modificar a cor do seu texto, você pode especificar seja o nome da cor reconhecida (ex: red, blue, yellow, etc.), ou através de código cor hexadecimal (ex: #FFFFFF, #000000):

CÓDIGO:

Código:

[color=red]Cor vermelha (red)[/color] ou [color=#FF0000]Cor vermelha (#FF0000)[/color]

Resultado: Cor vermelha (red) ou Cor vermelha (#FF0000)

Para modificar o tamanho do seu texto realizado, você deve especificar o tamanho do texto em pixels, de 1 (tão que pequeno que não será visível) até 29 (muito grande):

CÓDIGO:

Código:

[size=9]PEQUENO[/size] ou [size=24]ENORME[/size]

Resultado: PEQUENO ou ENORME

Para modificar a fonte, você deve especificar uma fonte reconhecida (ex.: Verdana, Arial), se um usuário não dispõe desta fonte uma outra lhe será disponibilizada par défaut :

CÓDIGO:

Código:

[font=Arial]Fonte Arial[/font] ou [font=Comic Sans Ms]Fonte Comic Sans Ms[/font]

Resultado: Fonte Arial ou Fonte Comic Sans Ms

O BBCode suporta vários métodos para criar hiperlinks, os mais conhecidos são a sigla URLs.

Código:

Código:

O primeiro método usa balisas [url=][/url], tudo que você digitar após o sinal = será considerado como nome do link. Por exemplo, para criar um link para familiafoox-fx.webnode.pt deve usar : Visite familiafoox ! Isso vai dar o link como segue: Visite familiafoox ! Perceba que o link abre uma nova janela, o usuário pode então continuar a visitar a primeira página se ele desejar. [url=http://familiafoox-fx.webnode.pt/]Visite familiafoox[/url]

Resultado: Visite familiafoox

Se você quiser que o link visualize diretamente o a URL, basta usar :

Código:

[url]http://familiafoox-fx.webnode.pt/[/url] Isso vai dar o link que segue, http://familiafoox-fx.webnode.pt/

Resultado: http://familiafoox-fx.webnode.pt/

Código:

E mais, se o fórum possui uma funcionalidade chamada Magic Links, esta convertirá automaticamente uma URL em um link sem ser necessário inserir uma balisa BBCode ou http://.
 Por exemplo, digitando www.facebook.com em sua mensagem, esta será automaticamente convertida para www.facebook.com quando você ler. A mesma coisa acontece para os emails, você pode escrever um endereço eletrônico explicitamente, por exemplo: [email]nome@dominio.com[/email] que dará no.one@domain.adr, ou seja, digitando nome@dominio.com em sua mensagem, ele será automaticamente convertido quando você o ler.

O BBCode possui uma balisa para incorporar imagens à suas mensagens. Saiba que para utilizar esta balisa dois pontos são importantes:

Primeiro, muitos usuário não apreciam muitas imagens em uma mensagem.
Segundo, as imagens que você quer divulgar já devem estar disponíveis na internet (elas não podem exister somente em seus computadores por exemplo, salvo se o seu computador for um servidor de internet!).
Você pode hospedar as suas imagens na internet graças aos hospedadores de imagens tais como: www.servimg.com / imageshack.us / tinypic.com

Código:
Para visualizar uma imagem, você deve proceder desta forma:

Código:

[img]http://img194.imageshack.us/img194/5927/flex2.png[/img]

Resultado:

Você pode colocar uma imagem em um link se você quiser (cabe a você de garantir a ordem de abertura e fechamento das balilsas), por exemplo:

Código:

[URL=http://imageshack.us/photo/my-images/194/flex2.png/][IMG]http://imageshack.us/thumbnmail.png[/IMG][/URL]

Resultado:

Você pode colocar vídeos em suas mensagens.

Código:

Para os vídeos Youtube copie o código que se encontra no campo Embed e proceda assim:

Código:

[youtube]code - Embed[/youtube]

Para os vídeos Dailymotion, você precisa copiar o código localizado no campo Lecteur portable e faça assim :

Código:

[dailymotion]code - lecteur portable[/dailymotion]

Não esqueça de copiar o cógido entre as duas balisas BBCode correspondentes ao hospedador que você escolheu.

Você tem à sua disposição dois métodos para inserir uma animação em flash em suas mensagens.

Código:

Premeiro método com o BBcode flash:

Código:

[flash(200,40)]Link do flash[/flash]

Segundo método BBcode embed-flash:

Código:

[embed-flash(200,40)]Link do flash[/embed-flash]

Não esqueça de colocar a largura e a altura da animação flash entre os parenteses da balisa BBcode utilizada.

Com o BBCode, para inserir uma tabela em uma mensagem é como as balisas utilizadas em HTML. Para criar uma tabela, você deve começar definindo uma "tabela" em seguida inserir uma linha 'tr'. Esta linha pode conter numa ou várias células 'td', como uma tabela pode conter vários 'tr'.

Código:

Por exemplo, para criar uma tabela de duas linhas e de três colunas, você deve fazer assim:

Código:

[table] [tr][td] Linha 1 - Célula 1 [/td] [td] Linha 1 - Coluna 2 [/td] [td] Linha 1 - Coluna 3 [/td][/tr] [tr][td] Linha 2 - Coluna 1 [/td] [td] Linha 2 - Coluna 2 [/td] [td] Linha 2 - Coluna 3 [/td][/tr][/table]

Resultado:

Linha 1 - Célula 1	Linha 1 - Coluna 2	Linha 1 - Coluna 3
Linha 2 - Coluna 1	Linha 2 - Coluna 2	Linha 2 - Coluna 3

Você pode ainda adicionar argumentos nos BBCode 'table'. Estes são iguais àqueles utilizados para HTML. Você pode por exemplo adicionar um contorno à tabela acima graças à balisa 'border'.

Código:

[table border=1] [tr][td] Ligne 1 - Coluna 1 [/td] [td] Linha 1 - Coluna 2 [/td] [td] Linha 1 - Coluna 3 [/td][/tr] [tr][td] Linha 2 - Coluna 1 [/td] [td] Linha 2 - Coluna 2 [/td] [td] Linha 2 - Coluna 3 [/td][/tr][/table]

Resultado:

Ligne 1 - Coluna 1	Linha 1 - Coluna 2	Linha 1 - Coluna 3
Linha 2 - Coluna 1	Linha 2 - Coluna 2	Linha 2 - Coluna 3

Outros atributos disponíveis : cellspacing, cellpadding, width, etc.
As tabelas devem ser manipuladas com atenção, queira respeitar a abertura e o fechamento das balisas BBCode. Um simples erro de abertura ou fechamento pode afetar os resultados esperados.

Eu considero esses os mais legais de se fazer.

Código:

Se você quiser fazer um desfilamento horizontal, você deve utilizar o seguinte BBCode:

Código:

[scroll]Frase de teste[/scroll]

Resultado: Frase de teste

A segunda maneira de desfilar um texto é verticalmente graças ao seguinte BBcode:

Código:

[updown]Frase de teste[/updown]

Resultado: Frase de teste

Insere uma linha separando duas mensagens

Código:

Se você desejar inserir linhas em suas mensagens, você pode utilizar o BBcode:

Código:

Minha primeira mensagem[hr]Minha segunda mensagem

Resultado: Minha primeira mensagem

---

Minha segunda mensagem

Colocar um índice ou um expoente. Se você desejar colocar um texto em índice ou expoente (útil para matemática), dois BBcodes são dados.

Código:

Primeiro método, para adicionar em índice:

Código:

x[sub]a+b[/sub]

Resultado: x_a+b

Segundo método, colocar em expoente:

Código:

2[sup]º[/sup] dia

Resultado: 2^º dia

Se você deseja obter um número aleatório de acordo com um intervalo, você pode utilizar o seguinte BBcode.

Código:

Primeiro caso de uso, o intervalo é especificado ao mínimo e ao máximo:

Código:

[rand]50,100[/rand]

Resultado:

Quantidade aleatória (50,100) : 64

Segundo caso de uso, o intervalo é especificado ao máximo:

Código:

[rand]50[/rand]

Resultado:

Quantidade aleatória (1,50) : 17