News
Site map
SitemapIndex
RSS Feed
Lo primero a tener en cuenta es que prácticamente todos los BBcodes pueden ser usados al mismo tiempo, teniendo siempre en cuenta que para que no creen conflicto cerrar el BBcode en orden inverso al que lo has abierto.
Ejemplo:
- Code: Select all
[b][i][u]ahora fijaros el orden de cierre[/u][/i][/b]
Si os fijáis, el primer BBcode que he abierto es el de negrita (b), que es el último en cerrar; el segundo en abrir ha sido cursiva (i), que es el penúltimo en cerrar......
Todos los BBcodes, los tenéis accesibles en la botonera de creación de mensaje, aún así no viene mal saber hacerlos "a mano".
A continuación, paso a detallar el funcionamiento de las etiquetas que tenemos implantadas en el foro.
- Como mostrar un codigo.
Esto sirve para mostrar los codigos que ponemos en el foro. Se usa por ejemplo para lo que voy a hacer yo, enseñaros a usar los codigos.- Code: Select all
[code][/code]
- Como poner negrita
Es bien facil, el codigo es:- Code: Select all
[b]tu texto[/b]
esto es negrita - Como poner cursiva
Es el siguiente codigo:- Code: Select all
[i]tu texto[/i]
esto es cursiva - Como subrayar
- Code: Select all
[u]tu texto[/u]
esto es subrayado - Como tachar un texto
- Code: Select all
[s]tu texto[/s]
esto es tachado - Como citar un texto
Esto se usa para citar textos de otras personas, normalmente se usa en un mismo tema, dandole al botón "citar" pero en caso que quieras citar algo que no puedas hacerlo de esa manera se utiliza este codigo:- Code: Select all
[quote]tu texto[/quote]
Esto quedaria así.esto es una cita de un texto
Puedes añadirle quien hizo ese comentario, fecha.... Seria de esta manera:- Code: Select all
[quote="cita de Enock el 14/09/2008"]tu texto[/quote]
y quedaria así:cita de Enock el 14/09/2008 wrote:puedes poner hasta la hora
no os olvideis de las comillas. - Como hacer una lista
Hay varias formas de hacerlas, numeradas, con letras o normales. Lo primero es dar la orden de hacer la lista:
- Code: Select all
[list][*]un texto [*]otro texto [*]otro texto[/list]
Esta seria para hacerla normal se veria así:
- un texto
- otro texto
- otro texto
Fijaros que en cada linea hay que meter
- Code: Select all
[*]
Luego teneis la opción de numerarlas y seria así:
- Code: Select all
[list=1][*]texto [*]mas texto...[/list]
Quedando así:
- texto
- otro texto
Y por último tenemos la opción de nombrarlas con letras:
- Code: Select all
[list=a][*]texto[*]mas texto...[/list]
Asi se ve:
- texto
- más texto
Tenemos la posibilidad de combinar todas juntas o un par.
- Code: Select all
[list][*]Torneos[list=1][*]Torneos OLW [list=a][*]Mario Kart[*]We Lovwe Golf[/list][/list][/list]
- Torneos
- Torneos OLW
- Mario Kart
- We Love Golf
- Torneos OLW
- Como insetar una imagen
Lo primero, debemos de saber la url de la imagen en cuestión o subirla a algún sitio de hospedaje gratuito.- Code: Select all
[img]url de la imagen[/img]
haciendolo se veria la imagen:
- Para crear un vinculo o link
Sirve para hipervincular lo que queramos con el siguiente codigo:- Code: Select all
[url=direccion]texto que queramos[/url]
quedaria así:
Pincha para ir al indice del foro
También podemos hipervincular una imagen de esta forma:- Code: Select all
[url=dirección a vincular][img]imagen que mostrar[/img][/url]
quedando asi: - Como ocultar texto, imagenes....
- Code: Select all
[spoiler]texto a ocultar[/spoiler]
probadloSpoiler:
con imagenes:- Code: Select all
[spoiler]url de la imagen[/spoiler]
Spoiler:
este es el código usado:- Code: Select all
[spoiler][img]http://www.onlinewii.es/foro/download/file.php?avatar=3.jpg[/img][/spoiler]
y así con todo lo que quieras. - Poner un video de youtube
- Code: Select all
[youtube]dirección del video[/youtube]
si cogeis la url de un video embedido, en vez de ser así:- Code: Select all
http://www.youtube.com/watch?v=VmhpGH_w2xg
- Code: Select all
http://www.youtube.com/watch?v=VmhpGH_w2xg&feature=player_embedded
De esa forma no es válida, para que valga solo teneis que borrarle lo siguiente:- Code: Select all
&feature=player_embedded
- Poner color al texto
Es bien sencillo:- Code: Select all
[color=color que queramos]texto[/color]
podemos poner tanto el nombre en inglés (red, blue, orange...) como el color en hexadecimal (#FF0000)
este color es raro? - Como hacer más grande o pequeño el texto
Pues tan sencillo como esto:- Code: Select all
[size=tamaño en porcentaje]texto[/size]
ENORME
GRANDE
PEQUEÑO
el codigo que he puesto es el siguiente:- Code: Select all
[size=300]ENORME[/size][size=167]GRANDE[/size] y [size=50]PEQUEÑO[/size]
Saber que todo esto se puede mezclar en un texto:
de la forma que queramoscomo queramos
el codigo que he usado es este:- Code: Select all
[color=red][b][i][u][size=150]de la forma que queramos[/size][/u][/color][color=blue][size=67]como queramos[/size][/color][/b][/i]
- Linea horizontal simple
- Code: Select all
[hr][/hr]
- Linea horizontal en color y grosor seleccionable
- Code: Select all
[hrc=color en CSS o HEX]grosor en número[/hrc]
Código usado:- Code: Select all
[hrc=red]5[/hrc][hrc=#00bdaa]3[/hrc]
- Marquesina con contenido en movimiento
Bien, con este código hacemos una especie de marco invisible en donde el contenido se desplaza hacia el punto que tu selecciones (solo izquierda, derecha, arriba o abajo)- Code: Select all
[marquee=dirección en inglés]tu contenido[/marquee]
codigo usado:- Code: Select all
[marquee=down][img]http://img33.imageshack.us/img33/8973/forotutorialesolw.png[/img]
y la imagen
va para abajo
este texto[/marquee]
sencillo, y si en vez de "down" le marcas "right":
si poneis el cursor encima, el contenido se detiene. - Marcar texto (estilo fluorescente)
- Code: Select all
[highlight=#FFFFAA]tu texto[/highlight]
este texto es importante!! - Alinear imagen a un lado con texto al otro
- Code: Select all
[img2=left o right]url de la imagen[/img2]
Como podéis ver, aquí sale mi avatar a la izquierda y el texto alineado a la derecha.
El texto seguirá aquí hasta que pase la imagen.
En cuanto pase la imagen el texto seguirá con normalidad.
La imagen puede ser de cualquier tamaño, hasta el máximo permitido en el foro.
Recomendado para una buena presentación del post.
Código usado:- Code: Select all
[img2=left]http://www.onlinewii.es/foro/download/file.php?avatar=3.jpg[/img2]Como podéis ver, aquí sale mi avatar a la izquierda y el texto alineado a la derecha. El texto seguirá aquí hasta que pase la imagen.
En cuanto pase la imagen el texto seguirá con normalidad.
La imagen puede ser de cualquier tamaño, hasta el máximo permitido en el foro.
Para alinear la imagen a la derecha, simplemente cambia el "left" por "right" - Resaltar edición del post
Este viene perfecto para resaltar la nueva información que has añadido al editar un post.- Code: Select all
[edit]aquí tu texto[/edit]
Edito: de esta manera resaltamos el texto que hemos incluido al editar nuestro mensaje
Código usado:- Code: Select all
[edit]de esta manera resaltamos el texto que hemos incluido al editar nuestro mensaje[/edit]
- Crear una tabla
Con BBcode, podemos crear una tabla de las filas y columnas que queramos. Para ello lo mejor es utilizar el siguiente código, añadiendo lo que te haga falta:- Code: Select all
[corners=forumbg forumbg-table][table=tablebg table1][thead][tr=][th=2]esto es la cabecera[/th][/tr][/thead][tbody][tr=bg1][td=1,]esto es la celda izquierda[/td][td=1,]esto es la celda derecha[/td][/tr][tr=bg2][td=1,]esta es otra fila[/td][td=1,]estaes la segunda celda[/td][/tr][/tbody][/table][/corners]
Se ve así:esto es la cabeceraesto es la celda izquierda esto es la celda derecha esta es otra fila esta es la segunda celda
A este código le podéis añadir tanta filas y columnas como queráis. Solo debéis de entender la nomenclatura del código.- Code: Select all
[th=][/th]
esta etiqueta solo se usa en la cabecera y el número que se pone después del igual, ha de ser el número de columnas que tenga en total la tabla. Como esta de ejemplo tiene 2 columnas, después del igual, se ha puesto un 2.- Code: Select all
[tr=][/tr]
esta etiqueta es para crear una fila. Como podéis ver en el ejemplo, después del igual, en una tenemos puesto "bg1" y en otra "bg2". Esto se pone alternándolo, para darle un tono de color al fondo de la linea, para distinguirlas.- Code: Select all
[td=1,][/td]
esta etiqueta sirve para añadir una columna a la fila. Debe ir entre la etiqueta "tr".
Para añadir a la tabla de ejemplo una nueva fila, después de del cierre de la última etiqueta "tr" [ /tr] tienes que añadir otra etiqueta "tr".
Para añadir a la tabla de ejemplo una columna nueva (mejor añadirla a todas las filas), dentro de cada etiqueta "tr", ha de añadirse una nueva "td", detrás del cierre de la última etiqueta [ /td], dentro de cada "tr".
Ejemplo:Titulo de la tablafila 1 columna A fila 1 columna B fila 1 columna C fila 1 columna D fila 2 columna A fila 2 columna B fila 2 columna C fila 2 columna D fila 3 columna A fila 3 columna B fila 3 columna C fila 3 columna D fila 4 columna A fila 4 columna B fila 4 columna C fila 4 columna D - Code: Select all
[corners=forumbg forumbg-table][table=tablebg table1][tr=][th=4][align=center]Titulo de la tabla[/align][/th][/tr][tbody][tr=bg1][td=1,]fila 1 columna A[/td][td=1,]fila 1 columna B[/td][td=1,]fila 1 columna C[/td][td=1,]fila 1 columna D[/td][/tr][tr=bg2][td=1,]fila 2 columna A[/td][td=1,]fila 2 columna B[/td][td=1,]fila 2 columna C[/td][td=1,]fila 2 columna D[/td][/tr][tr=bg1][td=1,]fila 3 columna A[/td][td=1,]fila 3 columna B[/td][td=1,]fila 3 columna C[/td][td=1,]fila 3 columna D[/td][/tr][tr=bg2][td=1,]fila 4 columna A[/td][td=1,]fila 4 columna B[/td][td=1,]fila 4 columna C[/td][td=1,]fila 4 columna D[/td][/tr][/tbody][/table][/corners]
Ejemplo añadiendo encabezados a cada columna:
Aquí añado unos encabezados a las columna, para especificar, por ejemplo, para que es cada columna (nombre, puesto, código....)Titulo de la tablaTítulo columna A Título columna B Título columna C Título columna D fila 1 columna A fila 1 columna B fila 1 columna C fila 1 columna D fila 2 columna A fila 2 columna B fila 2 columna C fila 2 columna D fila 3 columna A fila 3 columna B fila 3 columna C fila 3 columna D fila 4 columna A fila 4 columna B fila 4 columna C fila 4 columna D - Code: Select all
[corners=forumbg forumbg-table][table=tablebg table1][tr=][th=4][align=center][color=#BF0000][size=150]Titulo de la tabla[/size][/color][/align][/th][/tr][tbody][tr=bg4][td=1,][color=#FFFFFF]Título columna A[/color][/td][td=1,][color=#FFFFFF]Título columna B[/color][/td][td=1,][color=#FFFFFF]Título columna C[/color][/td][td=1,][color=#FFFFFF]Título columna D[/color][/td][/tr][tr=bg1][td=1,]fila 1 columna A[/td][td=1,]fila 1 columna B[/td][td=1,]fila 1 columna C[/td][td=1,]fila 1 columna D[/td][/tr][tr=bg2][td=1,]fila 2 columna A[/td][td=1,]fila 2 columna B[/td][td=1,]fila 2 columna C[/td][td=1,]fila 2 columna D[/td][/tr][tr=bg1][td=1,]fila 3 columna A[/td][td=1,]fila 3 columna B[/td][td=1,]fila 3 columna C[/td][td=1,]fila 3 columna D[/td][/tr][tr=bg2][td=1,]fila 4 columna A[/td][td=1,]fila 4 columna B[/td][td=1,]fila 4 columna C[/td][td=1,]fila 4 columna D[/td][/tr][/tbody][/table][/corners]
Bueno, hasta aqui el tutorial de etiquetas BBcode, en cuanto implementemos más lo añadiré.
Un saludo
