¿Qué son los BBCodes?

Normas, qué divertido, ¡yupi!

Moderador: Dragones crómaticos

Cerrado
Avatar de Usuario
Chess
Dragona de cobre
Kraken
Mensajes: 480
Registrado: 22 Ago 2017, 20:57
Género: Cactus
Ubicación: ☄️
Edad: 24

¿Qué son los BBCodes?

#1

Mensaje por Chess » 30 Ago 2017, 12:44

¿Qué son los BBCodes
¿y como @#~€%& los uso?

Un BBCode es básicamente una breve etiqueta que contiene dentro una etiqueta html un poco (o en algunos casos mucho) más larga. Y sirve para hacer los posts bonitos poniendo negritas, insertando imágenes... Presta atención a este tema y pronto sabrás usarlos todos. Además, tienes en este hilo un sitio perfecto para poner tus conocimientos en práctica antes de soltarte a usarlos por el foro adelante. Y si luego te sientes inseguro, siempre puedes darle al botón Vista previa antes de mandarlo, para asegurarte de que queda como tienes en mente.
Para aplicar un BBCode a una parte de tu mensaje, selecciónala con el ratón y haz click en el botón de la etiqueta correspondiente.

Puedes aplicar todos los que quieras a un tiempo, simplemente asegúrate de cerrar las etiquetas en el orden correcto. Si recuerdas los paréntesis de matemáticas, es igual. {[()]} es correcto, pero {[(]}) no significa absolutamente nada. Y siguiendo con la analogía de las mates, no todos los bbcodes se llevan bien entre sí y algunos solo se llevan bien si los pones en un orden concreto.

Recuerda que el foro es leído por gente de todo tipo y no abuses de las etiquetas, especialmente de las que ponen colorines. Nadie quiere leer un mensaje en amarillo neón, pero una persona con problemas de visión seguramente querrá matarte si encima es amarillo neón clarito.
hhhhhhhhhhhh ¡Comenzamos!hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh
Imagen
Este botón corresponde al botón de negrita y hace lo que acabas de ver. En la caja de mensaje se ve así:

Código: Seleccionar todo

[b]negrita[/b]
Imagen
Este otro pone el texto en cursiva, como ves. Y así lo verás al escribir un mensaje:

Código: Seleccionar todo

[i]cursiva[/i]
Imagen
El subrayado es un código que se ve de esta forma:

Código: Seleccionar todo

[u]subrayado[/u]
Imagen
Con esto podréis citar el mensaje de otro usuario (podéis hacerlo directamente usando el botón con comillas que aparece sobre su mensaje). Este código es un poquitín más complicado que los anteriores, pues tiene variables. Además, al principio de la cita aparecerá un link al post original en forma de la fecha en la que fue publicado.

Código: Seleccionar todo

[quote]Así se ve esta cita[/quote]
Así se ve esta cita

Código: Seleccionar todo

[quote="autor"]Y así se ve esta otra, en la que puedo poner lo que quiera donde dice autor[/quote]
autor escribió:Y así se ve esta otra, en la que puedo poner lo que quiera donde dice autor
Imagen
El code lo estáis viendo durante todo este post. Sirve para que el mensaje no aplique las ordenes de las etiquetas y se vean igual que en la caja de mensaje. Otra forma de lograrlo es escribirlas mal. A veces nos da problemas y deforma los posts, así que cuidado si metéis cosas con lineas de texto largas.

Código: Seleccionar todo

[float=left][glow=red][hidden][marq=left]No los reproduce al estar dentro de code[/marq][/hidden][/glow][/float]
Imagen
Esta etiqueta se parece a la siguiente y sirve para crear...
  • Una
  • lista
  • desordenada
¡Puedes meter listas dentro de listas hasta 10 veces!

Código: Seleccionar todo

[list]Una 
[*]lista
[*]desordenada[/list]
Imagen
Y esta otra sirve para crear, usando por ejemplo =a, =1 o =I
  1. Una
  2. lista
  3. ordenada

Código: Seleccionar todo

[list=1]Una
[*]lista
[*]ordenada[/list]
Imagen
Esta etiqueta sirve para añadir nuevos elementos a una lista, como has podido ver en los dos apartados anteriores

Código: Seleccionar todo

[*]elemento de una lista
Imagen
Con esto insertarás una imagen, que no podrá tener un ancho superior a 700px (el alto da igual). Si tu imagen no cumple esas características, hay muchos programas que te ayudarán a solucionarlo, además de algún que otro hilo en Artes Gráficas.

Código: Seleccionar todo

[img]https://s5.postimg.org/v7s6v0f6v/image.png[/img]
Imagen
Si quieres poner un enlace a otra página, otro hilo del foro o incluso a otro post dentro de un mismo hilo, esta es tu etiqueta. Además, te hace todo el trabajo: pon en la descripción coóo quieres que se llame tu link para que no quede todo feo.
Encontrarás Dragones

Código: Seleccionar todo

[url=encontrarasdragones.net/foro/]Encontrarás Dragones[/url]
Imagen
Con esto puedes modificar el color de letra. Tienes una caja disponible con algunos de los colores más básicos, pero no son los únicos, de hecho, puedes usar cualquier color siempre que tenga una equivalencia en html. Si sabes el nombre universal de un color, la etiqueta también sabrá interpretarlo. También puedes crear texto transparente si escribes =transparent. Aquí puedes ver varios colores más.

Código: Seleccionar todo

Con [color=#000000]esto[/color] puedes [color=#808000]mod[/color]ificar el color de [color=#FF4040]le[/color]tra
Imagen
Aquí puedes cambiar el tamaño de la letra, esos son los cuatro tamaños más básicos, pero puedes usar cualquier número siempre que esté en un rango que vaya del 1 al 200. Aumenta en relación a un porcentaje y por eso no todos los tipos de letra ocupan lo mismo aunque en teoría tengan el mismo tamaño.

Código: Seleccionar todo

[size=50]esos[/size] [size=85]son[/size] los [size=150]cuatro[/size] [size=200]tamaños[/size]
Imagen
Si seleccionas un texto y haces click en este botón, se copiará a tu portapapeles...
Imagen
... y podrás usar este botón para pegarlo.
Imagen
Este botón te permite borrar el formato de un mensaje, es decir, los BBCodes. ¿Tienes una frase con mil etiquetas que no se muestra bien pero no logras encontrar el fallo? Selecciónala con todos sus códigos, haz click en este botón para borrarlos y empieza de nuevo.
Imagen
El subrayado de colorines de tus apuntes, ahora también en el foro. Por defecto es amarillo, pero puedes poner el color que más te guste usando el código html o la etiqueta universal.

Código: Seleccionar todo

[highlight=yellow]subrayado[/highlight] [highlight=#FFB6C1]de[/highlight] [highlight=chartreuse]colorines[/highlight]
Imagen
Usa esto para alinear tu texto. Es como los partidos políticos, pero de hecho hace algo. Cuidado con el de izquierda, porque elimina la justificación que el foro tiene de forma automática. a la izquierda, al centro o a la derecha.

Código: Seleccionar todo

[align=left]a la izquierda, [/align]
[align=center]al centro[/align]
[align=right]o a la derecha. [/align]
Imagen
El menú de fuentes te da una elección bastante amplia de fuentes que puedes usar en el foro. Además de esas, puedes usar básicamente cualquier fuente que pueda reproducirse en internet de forma nativa. Es decir, cualquiera que te venga en word o en open office y no hayas tenido que pagar aparte. De nuevo, con sentidiño, no uses una fuente llena de florituras para tus mensajes.

Código: Seleccionar todo

[font=Curlz MT]te da una[/font]
Imagen
Con esta etiqueta puedes flotar el texto al rededor de una imagen, otro texto o etiquetas como offtopic y soundcloud (en este caso ocuparán menos espacio, pero cuidado, porque si usas este truco mucho en un mismo mensaje puede deformarse). Tienes ejemplos en todo este post y se ven así.También podéis usar =right para que la imagen se quede a la derecha. Si usais =center no dará ningún error, pero tampoco se quedará en medio con el texto rodeándola.

Código: Seleccionar todo

[float=left][img]https://s5.postimg.org/cqxs46z8n/image.png[/img][/float]Con esta
Imagen
Este es el botón de texto preformateado. No, no sirve para que las negritas del word se copien aquí. Es para conservar los espacios.
Así           se                ve              con               pre
Así se ve sin pre

Código: Seleccionar todo

[pre]Así           se                ve              con               pre[/pre]
Así           se                ve              sin               pre
Imagen
Para tachar un texto, usa este botón. Y recuerda, ahora ya no existe como código en el foro.

Código: Seleccionar todo

[s]tachar un texto[/s]
Imagen
Este botoncito sirve para poner unsuperíndice

Código: Seleccionar todo

un[sup]superíndice[/sup]
Imagen
Este otro para poner unsubíndice

Código: Seleccionar todo

un[sub]subíndice[/sub]
Imagen
Con este puedes ponerle un resplandor a tu texto. Por defecto es rojo, pero puedes cambiarlo como se explica en el apartado de color de texto.

Código: Seleccionar todo

[glow=red]resplandor[/glow]
Imagen
Utiliza esto para ponerle una sombra relativamente separada y difuminada al texto. Recuerda, no tienes por qué dejar el color por defecto. Además, si quieres cambiar el color al texto (se quedará blanco) has de usar la etiqueta de color de texto por dentro de la de resplandor. Si la pones por fuera no tendrá efecto.

Código: Seleccionar todo

[shadow=blue]sombra[/shadow]
Imagen
Si quieres que tu sombra esté pegada al texto, utiliza este otro botón. ¿Ves cómo no me he conformado con el azul que me da por defecto?

Código: Seleccionar todo

[dropshadow=red]sombra[/dropshadow]
Imagen
Para difuminar un texto, usa este otro botón. Truco: si le pasas el ratón por encima y lo seleccionas, se lee perfectamente. Y sí, también puedes poner el color que más rabia te dé.

Código: Seleccionar todo

[blur=green]difuminar un texto[/blur]
Imagen
Si usas esta etiqueta, harás desaparecer el texto en una pequeña animación. Puedes ponerle colores usando la etiqueta de color de texto

Código: Seleccionar todo

[fade]desaparecer el texto[/fade]

Código: Seleccionar todo

Puedes [fade][color=#BF8080]ponerle[/color][/fade] [color=#FF00FF][fade]colores [/fade][/color]usando la etiqueta de color de texto
Imagen
Con esta etiqueta puedes hacer que el texto se dé la vuelta y se lea en espejoespejo

Código: Seleccionar todo

[dir=rtl]espejo[/dir][dir=ltr]espejo[/dir]
Imagen
Y esta otra hace que el texto se mueva en distintas direcciones. Ten en cuenta que el espacio que ocupa la animación es fijo (puedes modificar las horizontales con float) y que el código no siempre interpreta bien los saltos de línea.
izquierda
derecha
arriba
abajo

Código: Seleccionar todo

[marq=left]izquierda[/marq]
[marq=right]derecha[/marq]
[marq=up]arriba[/marq]
[marq=down]abajo[/marq]
Imagen
Usa este código (o ese sin botoncito que pone spoiler). ¿Sabes que puedes colocar hasta nueve spoilers uno dentro de otro? Hasta hace no mucho, en los foros no se podía hacer eso.
► Mostrar Spoiler
Mensaje oculto:
y no decirnos que era agua destilada !!!

Código: Seleccionar todo

[spoil]para no hacernos un spoiler sobre el capitulo tres de Regando las plantas[/spoil]

Código: Seleccionar todo

[spoiler]y no decirnos que era agua destilada !!![/spoiler]
Imagen
Si quieres que un texto sea secreto y solo pueda verse por aquellos usuarios conectados y registrados al foro usa esta etiqueta. Hay subforos como escritores o dracoquedadas que son privados por defecto y desde luego esta etiqueta no es una excusa para ir poniendo vuestros teléfonos por el foro.
Contenido Oculto
Este foro requiere que este registrado e identificado para ver el contenido oculto.

Código: Seleccionar todo

[hidden]¿A que no me veías sin registrarte?[/hidden]
Imagen
Que tengamos un código que se llama offtopic no significa que podáis hacerlo (fuera del subforo correspondiente, eso es). Pero sí lo podéis usar por ejemplo para un fuera de rol o para un breve aparte en un debate.
Off Topic
FdR: Madre mía la obsesión con los incendios

Código: Seleccionar todo

[offtopic]FdR: Madre mía la obsesión con los incendios[/offtopic]
Imagen
Esto es un texto de alerta y sirve para dar avisos. Úsalo por ejemplo para anunciar que ya has publicado las puntuaciones de tu concurso en el primer post. Y haz mucho caso si ves que un moderador lo usa. Pone tu nick de forma automática, pero puedes cambiarlo.
 ! Mensaje de: Equipo de moderación
Por favor, respeta las normas del foro.

Código: Seleccionar todo

[mod=Equipo de moderación]Por favor, respeta las normas del foro.[/mod]
Imagen
También tenemos un botón que sirve para representar arte ascii. Puedes modificar el tamaño usando size, ya que no dejan de ser símbolos que puedes escribir con un teclado, pero ten cuidado de que no se apriete mucho y se deforme.
               ( \/ ) 
            .---.      \  /   .-"-. 
           /   o_o    \/   / o o \ 
           \_  (__\       \_ v _/ 
           //   \\        //   \\ 
          ((     ))      ((     )) 
    =======""===""==""===""======= 
             |||            ||| 
              |              | 
ASCII Art for AOL Chat[/nfo]

Código: Seleccionar todo

[nfo]   ( \/ ) 
            .---.   \  /   .-"-. 
           /   o_o   \/   / o o \ 
           \_  (__\       \_ v _/ 
           //   \\        //   \\ 
          ((     ))      ((     )) 
    =======""===""==""===""======= 
             |||            ||| 
              |              | [/nfo]
Imagen
Este otro código sirve para poner grabaciones de soundcloud. Ten en cuenta que deben de ser legales.

Código: Seleccionar todo

[soundcloud]https://soundcloud.com/user-753869441/bienvenida[/soundcloud]
Imagen
Estamos ya casi en el final, este código lo mencioné casi al principio. Se llama BBvideo y sirve para insertar, pues eso, vídeos en los mensajes. Recordad dos cosas: 1) que cumplan las normas del foro 2) que no puedes ponerlos más anchos de 700px. Y, sí, hay tantos sitios disponibles que casi marea un poco.
https://www.youtube.com/watch?v=gMhMaNAmT-U

Código: Seleccionar todo

[BBvideo=400,200]https://www.youtube.com/watch?v=gMhMaNAmT-U[/BBvideo]
mention
Este no aparece en la caja de mensajes, pero te va a encantar. ¡Sirve para mencionar gente! @Chess Y puedes escribirlo @nombreusuario siempre que justo después uses la tecla entrar y no la tecla espacio. Si el espacio es parte del nick no hay problema, eso sí. Además, al escribir @A, por ejemplo, debería aparecerte una lista con toda la gente que tiene nicks que empiezan por esa letra. A veces tarda lo suyo, eso sí. @esta menda se ve como una mención también, pero no funciona. Es posible que en un futuro... /silba.

Código: Seleccionar todo

[mention]Chess[/mention]

Código: Seleccionar todo

[mention=Chess]esta menda[/mention]
Recuento de palabras: 2381
hhhhhhhhhhImagen
h
Tengo un monstruo
bajo la piel.
Una bestia que me acaricia
las entrañas.



hhhhhhhhhhhhhLady Ambar ❤
Revisad las Normas (y estudiad los BBCodes).
Mps moderiles prefijados con [MD] o [AD], por favor.


🦑

Cerrado