Autor Tema: Post En BBCode  (Leído 2666 veces)

0 Usuarios y 1 Visitante están viendo este tema.

Pokexperto

  • Bot PxP
  • Ayudante de Entrenador
  • **
  • Mensajes: 97
  • Karma: +2/-0
    • Ver Perfil

  • Total Badges: 27
    Badges: (View All)
    Décimo aniversario Noveno aniversario Octavo aniversario
Post En BBCode
« en: 19 de Agosto de 2009, 02:34:39 pm »
Buenas aquí voy a dejar una guía básica y avanzada sobre los BBcodes y su uso.
Empecemos.
Si copian y pegan esta guía por favor pongan su fuente (esta) o la de mi otro foro (vale, ya no hago más spam)

Los BBcodes se llevan usando en los foros desde hace bastante tiempo, en los phbb al principio, pero al coger tanta fama "dominaron" más servidores de foros.
los BBcodes son como el HTML, pero más sencillo.

Reglas[/color][/font]
  • Recuerden siempre cerrar Tag, no es lo mismo que o .
  • muchos códigos html y css no son compatibles con bbcodes, por cuestiones de formato y a veces seguridad
______________________________________

Índice[/font]
  • Formato del texto

  • Tamaño del texto

  • Formato de fuente

  • Colores

  • Colores en hexadecimal

  • Links

  • Imágenes

  • E-mail

  • Quote, Code, HTML, SQL

  • List

  • Spoiler
______________________________________
Lista de BBcodes:[/font]
______________________________________

Formato del texto

Negrita - negrita, texto más grueso
Código: [Seleccionar]
[B]contenido del texto en negrita[/B]
Cursiva - Cursiva, texto más curvado
Código: [Seleccionar]
[I]contenido del texto en Cursiva[/I]
Subrayado - texto con línea abajo, para resaltar el texto
Código: [Seleccionar]
[U]contenido del texto en subrayado[/U]
tachado - texto con una línea en medio, no confundir con subrayado
Código: [Seleccionar]
[S]contenido del texto en tachado[/S]
superíndice - texto que está más arriba que normalmente
Código: [Seleccionar]
[sup]subíndice[/sup]
subíndice - texto más abajo que normalmente
Código: [Seleccionar]
[sub]subíndice[/sub]
-------------------------------------------

Tamaño de texto
básicamente hay tres: small (pequeña), large (grande) y largest (gigante)

ej:
texto small
texto large
[SIZE=14]texto largest [/SIZE]

Código: [Seleccionar]
[SIZE=1]texto small[/SIZE]
[SIZE=7]texto large [/SIZE]
[SIZE=14]texto largest [/SIZE]

y podria ponerse aún más grande, solo modificando los numeros del primer tag

[SIZE=23]texto a tamaño 36[/SIZE]
Código: [Seleccionar]
[SIZE=36]texto a tamaño 36[/SIZE]
------------------------

Formato de fuente

Times - texto en fuente Times
Código: [Seleccionar]
[FONT=times]times[/FONT]
Arial - Texto en fuente Arial
Código: [Seleccionar]
[FONT=ARIAL]Arial[/FONT]
courier - texto en fuente courier
Código: [Seleccionar]
[FONT=courier]courier[/FONT]
impact - texto en fuente Impact
Código: [Seleccionar]
[FONT=impact]impact[/FONT]
geneva - texto en fuente Geneva
Código: [Seleccionar]
[FONT=geneva]geneva[/FONT]
optima - texto en fuente optima
Código: [Seleccionar]
[FONT=optima]optima[/FONT]
comic sans ms - texto en fuente comic sans
Código: [Seleccionar]
[FONT=comic sans ms]Comic sans ms[/FONT]
calibri - texto en fuente calibri
Código: [Seleccionar]
[FONT=calibri]calibri[/FONT]
Franklin Gothic Medium - texto en fuente Franklin Gothic Medium
Código: [Seleccionar]
[FONT=Franklin Gothic Medium]Franklin Gothic Medium[/FONT]
Times new roman - texto en fuente Times new roman
Código: [Seleccionar]
[FONT=Times new roman]Times new roman[/FONT]

hay muchas más fuentes, solo hay que cambiar la fuente del código a una que se quiera. Las fuentes que no tengan los demás usuarios la verán distintas (ej: la fuente akbar, algunos la ven como times new roman

-----------------------
Alineación de texto

[align=right]texto a la derecha [/align]

Código: [Seleccionar]
[align=right]texto a la derecha [/align]
[align=center]texto centrado[/align]
Código: [Seleccionar]
[align=center]texto centrado[/align]
------------------------

Colores

Negro = negro
Código: [Seleccionar]

Marrón = marrón
Código: [Seleccionar]

Granate = granate
Código: [Seleccionar]

Rojo = rojo
Código: [Seleccionar]

Naranja = naranja
Código: [Seleccionar]

Amarillo = amarillo
Código: [Seleccionar]

Oliva = oliva
Código: [Seleccionar]

Verde claro = verde claro
Código: [Seleccionar]

Verde oscuro = verde
Código: [Seleccionar]

Verde azulado = verde azulado
Código: [Seleccionar]

Azul claro = azul claro
Código: [Seleccionar]

Azul marino = azul
Código: [Seleccionar]

----------------------------
Colores en hexadecimal
----------------------------

lo único que hay que hacer es reemplazar la palabra del color del tag (ej: blue, aqua, green, etc) por un número hexadecimal

ej:

texto en color hexadecimal #CC99FF
Código: [Seleccionar]
[COLOR=#CC99FF]texto en color hexadecimal #CC99FF[/COLOR]
Consulta esta lista de colores hexadecimales para hacer los codigos

------------------------------

Links
http://www.google.es/
http://www.pokexperto.net/
Código: [Seleccionar]
http://www.google.es/
http://www.pokexperto.net/

para poner links directamente se debe escribir el http:// para que se activen, sino, no funcionará

para ponerlo, click en
se abrirá una ventana nueva en la que deberás poner el link.
pulsa enter o aceptar y ahora deberás poner el titulo del link

ej:

Google
Código: [Seleccionar]
[URL=http://google.es]Google[/URL]
------------------------------

Imágenes

Deberás subir la imagen que deseas a un hosting para ponerlas URL como Photobucket o Imageshack
Las imágenes aquí van con url

pulsa en y coloca la URL de la imagen

o bien así


Código: [Seleccionar]
[IMG]http://i318.photobucket.com/albums/mm418/jimmy_95_2008/Dibujo32e.png[/IMG]
----------------------------------

E-mail
esto poco se usa, y es un link que al clickearlo aparece el .exe que se tiene para mandar correo (outlook, windows live mail, etc)
pulsa en y a continuación pon el e-mail.

-----------------------------------

Quote
Básicamente el Quote es exactamente decir algo que dijo otro.
Hay varias formas:

Pulsa y pon lo que quieras poner y vuelve a pulsar , para cerrar tag.

O bien pulsa en de un post tuyo  o de otro usuario de un topic para quotearlo entero (puedes modificarlo también)

Ej:

Citar
este es un quote. no olviden  cerrar el tag

----------------------------------
HTML
el tag HTML es para poner codigos HTML, no para hacer que hagan efecto, eso sería [doHTML] tag.

el botón es añadido, antes no estaba, se añadió con un script. El botón está justo debajo de @ y nada más que pone las tag. Pon el codigo HTML entre las tags

EJ:

este es el codigo HTML:
<span style="background-color: #FF0000">para que aprendan de HMTL</span>
-----------------------------------

Code

exactamente igual que el Quote, además está al lado de él

Ej:
Código: [Seleccionar]
contenido del code
-----------------------------------

SQL

para bases de datos con SQL

Ej:

[SQL]SELECT t.tid FROM a_table t WHERE t.val="This Value"[/SQL]

el las tags serían
Código: [Seleccionar]
[sql][/sql]
-------------------------------------

List

hay diferentes tipos de list:

así
  • List Item
  • List Item
Código: [Seleccionar]
[list][*]List Item [*]List Item[/list]
    o bien así
[LIST=1]
  • List Item
  • List Item
Código: [Seleccionar]
[list=1][*]List Item [*]List Item[/list]
    así
[LIST=a]
  • List Item
  • List Item
Código: [Seleccionar]
[list=a][*]List Item [*]List Item[/list]
    o así
[LIST=i]
  • List Item
  • List Item
Código: [Seleccionar]
[list=i][*]List Item [*]List Item[/list]
podría haber más tipos, pero dejenme investigar primero  :wink:

------------------------------

Spoiler

este es un tag opcional que va con scripts. Se lo di yo a Melkor  =P

simplemente, delen a spoiler y aparecerán las tag
Spoiler: mostrar
Contenido del spoiler

Código: [Seleccionar]
[spoiler]Contenido del spoiler[/spoiler]también se pueden hacer spoilers en cadena.
Spoiler: mostrar
hola
Spoiler: mostrar
Contenido del spoiler

Código: [Seleccionar]
[spoiler]hola[spoiler]Contenido del spoiler[/spoiler][/spoiler]
----------------------------
Código: [Seleccionar]