domingo, 2 de junio de 2013

[B] Crear un Chatbox con cbox

Aqui os enseñare a poneros un Chatbox como el que tengo yo aqui en el blog. ¿Para que sirve? Un chatbox es un chat integrado al blog, en el cual tanto nosotros como los usuarios que visiten el blog, podrán dejarnos un mensaje que podremos leer en cualquier momento.

Vamos a la pagina Cbox

Le damos a Sign Up ( registrarse):

Nos saldrá una nueva ventana y rellenamos todos los campos:


+Cbox Name : El nombre de nuestro chat. Podemos utilizar el nombre del blog.
+Email Adress: nuestro e-mail.
+Password: La contraseña que usaremos cada vez que entremos en Cbox.
+Confirm Password: Confirmamos la contraseña.
+Website: La URL de nuestra WEB.
+Language: Elegimos nuestro idioma ( Spanish)
+Style: Elegimos un estilo ( después podremos personalizarlo) para el Chat.

Aceptamos los términos, y le damos a Create my Cbox!.

Estaremos en nuestro panel de control. Ahora pasaremos a personalizar nuestro chat.


Tamaño

Vamos al menú Look & Feel > Layout Options y nos saldrá esta ventana:


--> Width and Height
Width es el ancho que queremos poner para el chatbox.
Height es el alto.
Form Height no lo tocaremos, pero es para cambiar el alto de la vista de los mensajes.

-->Form Layout
Message Lines: nº de lineas que puede tener un mensaje.

-->Messages
Nº of messages to display : es el numero de mensajes que se podrán mostrar en el chatbox de una tirada ( después saldrá el mensaje de cargar más mensajes). Podremos poner un máximo de 20 ( los demás son de pago).

In order: es el orden en que queremos que aparezcan nuestros mensajes. Newest at top es poner los mensajes más recientes arriba y los más antiguos abajo. Oldest at top es al contrario, los más antiguos arriba  y los más recientes abajo.

Cuando acabemos damos a Save ( guardar).

Estilos

En un principio tuvimos que elegir un estilo para crear el chat, pero ahora podremos cambiarlo por uno de los que nos ofrece Cbox en Look & Feel > Style Presets.

Color y tipo de letra

Vamos a Look & Feel>Colours & Fonts:


Nosotros tocaremos solo estas partes:

-->Post Frame

Main BG : Color principal de fondo.      
Main Text: Color de texto principal.        
Main Date: Color de fecha principal        

Alt. BG: Color de fondo alternativo
Alt. Text: color de texto alternativo
Alt. Date: Color de fecha alternativo

Los colores que usemos en MAIN son los colores que tendrá el primer mensaje, el siguiente mensaje dejado en el chat serán los colores de ALT, da igual si los escribe el propietario del blog o no, eso no influye.

-->Form Frame

Field BG: Color de fondo de campo a rellenar.              
Button BG: Color de los botones.                                
Form BG: Color de fondo de formulario.                      

Field text: Color del texto a rellenar.
Button Text: Color del texto de los botones.
Field Borders: Color del borde de los campos.


Border: Color del borde del Chat.
Link ( Active): Color del enlace al pasar el ratón por encima.
Link ( Normal): Color del enlace.



-->Fonts

Font: Nombre de la fuente que queremos en el chat. Viene por defecto Arial.

Main : Tamaño de la fuente.        
Date: Tamaño de la fuente de la fecha.          
Form: Tamaño de la fuente del formulario.

El tamaño de las fuentes viene por defecto y se ven bien, pero siempre lo podemos modificar.

Una vez modificado, damos a Apply ( aplicar).

Cuando lo tengamos como queremos, finalmente vamos a publicarlo en nuestro blog. Vamos al menú Publish! :


Nos saldrá una ventana como esta. Bajamos hasta donde sale el código de nuestro chat. Lo copiamos y lo pegamos en un gadget HTML / Javascript en nuestro blog y guardamos. ¡ Ya tendremos nuestro ChatBox!

Espero que os haya servido de ayuda. ¡Ya sabéis, cualquier duda dejad un comentario o en el chatbox!

Ja nee <3

1 comentario :

Related Posts Plugin for WordPress, Blogger...