¿Cómo poner un chat?

Hola y bienvenidas a un nuevo viernes de tutoriales!!! 

A raíz de mis videos tutoriales de TikTok hay mucha gente que me pide ayuda y yo estoy super encantada de ayudaros a TODOS!! Además, muchísimas gracias por vuestro apoyo, sois un amor y me encanta todos los mensajes bonitos que me dejáis 💗.

Bien, vamos a centrarnos: hoy voy a explicar cómo se pone este chat tan mono en los sidebar de tu blog (es muy sencillo, no te preocupes):

Esta vez los procedimientos tienen un orden diferente, primer tendrás que crear el chat, pero no te preocupes porque ya existe una web encargada de eso: Cbox.

Esta web te va a dejar un espacio gratuito donde todo el mundo pueda escribir comentarios en tu blog, para personalizarlo hay que seguir estos pasos:

1) Al entrar te pone esta pantallita, aquí deberás poner tu correo para crearte una cuenta en cbox

2) Al darle a "Go!" te saldrá esta otra pantallita, rellena todo como tu quieras y en la parte donde pone "Website" deberás poner el URL de tu blog.

En la parte que pone "Theme" podrás elegir el color de tu blog (yo lo tengo en pink).

3) Al darle a "Create my Cbox!" te saldrá una pantalla nueva, esa ahora ya da igual. Arriba a la derecha hay unos apartaditos: tienes que darle a "Publish" y te saldrá esto

4) Aquí, en la parte de "Get your embed code" tienes que elegir la versión "Inline" y copiar el HTML que esta escrito abajo.

5) Una vez copiado puedes elegir dos caminos:

1º-> Dejarlo como está, que el fondo sea transparente y pegarlo así tal cual en tu blog (si esa es tu decisión avanza hasta el paso 7)

2º-> Decorar el fondo como lo tengo yo en algún color que elijas (si es esta tu opción sigue con el tutorial).

6) Este paso vuelve a ser sencillo, tienes que copiar este código en notas y modificar los colores y añadir el HTML de tu chat:

<div class="cbox-wrap">

[HTML del chat]

</div>

<style>

.cbox-wrap{

  background: linear-gradient(180deg,#00000,#00000);

  padding: 12px;

  border-radius: 25px;

  box-shadow: 0 0 18px rgba(000,000,000,.35);

}

.cbox-wrap iframe{

  border-radius: 18px;

}

</style>

IMPORTANTE: Cuando vayas a pegar el HTML tienes que separar todos los datos, o sea: te vienen así:

<iframe src="https://www5.cbox.ws/box/?boxid=numeros" width="100%" height="450" allowtransparency="yes" allow="autoplay" frameborder="0" marginheight="0" marginwidth="0" scrolling="auto"></iframe>

Y tienes que dejarlo así:

<iframe 
src="https://www5.cbox.ws/box/?boxid=números" 
width="100%" 
height="450" 
allowtransparency="yes" 
allow="autoplay" 
frameborder="0" 
marginheight="0" 
marginwidth="0" 
scrolling="auto">
</iframe>

En la parte donde pone "background: linear-gradient(180deg,#00000,#00000);" deberás elegir los dos colores que quieras para el fondo.

En la parte de "box-shadow: 0 0 18px rgba(000,000,000,.35);" elegirás el color para un suave sombreado.

Recuerda que para elegir los colores puedes mirar en HTMLcolorcode donde podrás elegir cualquier color y las formas de ajustarlo: hex para los colores con # y rgb para los colores entre paréntesis.

Una vez editado todo, cópialo y pasamos al siguiente paso:

7) En la parte de Diseño de Blogger buscaremos el sidebar donde queramos poner el chat y lo añadiremos en "añadir gadget", buscamos "HTML/JavaScrit" y pegamos nuestro código.

Recuerda darle a guardar tanto en el gadget como en la pantalla de Diseño abajo a la derecha para que no se borre nada.

Espero que te haya servido, si tienes algún problema no dudes en decirme por los comentarios!! Nos vemoss