Caja de chat en forma flotante para tu blog

Hemos visto muchos gadgets que van de forma flotante, entre ellos botones sociales flotantes, cajas de suscripción flotantes, etc etc. Hoy les traigo otro gadget, sí, de forma flotante también y se trata de una caja de chat. Es un botón que irá al lado derecho de tu página que al presionar en él se despliega la caja de chat.

Casi la mayoría de los blogs ó páginas web cuentan con una caja ó sala de chat y es importante contar con uno ya que no sólo sirve para hacer amigos, sino para mantener contacto con tus lectores y visitantes.

VER DEMO 1

VER DEMO 2

Antes de empezar a añadir este gadget, debemos primero tener listo el código de nuestra caja de chat. Hay sitios gratuitos muy populares en donde puedes crear una sala de chat, tales como Chatango, Xat, Cbox, por ejemplo. En esta entrada he creado una lista con los mejores y más populares sitios para crear salas de chat gratuitamente. El chat que han visto en los blogs de pruebas son de Chatango, si les gusta pueden crear uno en esa página. Ó bien pueden elegir cualquier otro servicio que generen salas de chat, lo importante es que el servicio te genere el código del chat para añadirlo a tu blog.


Como lo dije previamente, he usado el servicio de Chatango. He ingresado a la página, me he registrado, luego creé una sala de chat, lo he personalizado con los colores que mejor van con mis blogs de pruebas, le he añadido título, mensaje, etc etc. Después de haber hecho todo el proceso, chatango me brindó el código de mi chat, listo para ser añadido a mi blog.


Dicho código generado es lo que añadiremos en el código de abajo, reemplazando lo que está de color rojo.


Teniendo listo el código del chat a la mano, vamos a crear el gadget que hará que el chat flote y se mantenga fija así subamos ó bajemos la página. Para ello sigamos estos pasos:


1) Nos vamos a Blogger > Diseño > Elementos de la página > Añadir un gadget > HTML/Javascript.

2) Ahora dentro del cuadro, pegamos el siguiente código:

<style>
#hcr {
position:fixed;
top:100px;
z-index:+1000;
}
* html #hcr {position:relative;}
.hcrtab {
height:100px;
width:30px;
float:left;
cursor:pointer;
background:url('http://3.bp.blogspot.com/-sEtHmYKGncM/T02KpU1d_BI/AAAAAAAAGws/uAfQzzSy0cQ/s1600/ChatBox1.png') no-repeat;
}
.hcrcontent {
float:left;
border:2px solid #333333;
background:#cccccc;
padding:10px;
}
.hc-credit {font-size:9px}
.hc-credit a {text-decoration:none}
</style>
<script type="text/javascript">
function showHidehcr(){
var hcr = document.getElementById("hcr");
var w = hcr.offsetWidth;
hcr.opened ? movehcr(0, 30-w) : movehcr(20-w, 0);
hcr.opened = !hcr.opened;
}
function movehcr(x0, xf){
var hcr = document.getElementById("hcr");
var dx = Math.abs(x0-xf) > 10 ? 5 : 1;
var dir = xf>x0 ? 1 : -1;
var x = x0 + dx * dir;
hcr.style.right = x.toString() + "px";
if(x0!=xf){setTimeout("movehcr("+x+", "+xf+")", 10);}
}
</script>
<div id="hcr">
<div class="hcrtab" onclick="showHidehcr()"> </div>
<div class="hcrcontent">

<!-- EL CODIGO DEL CHAT VA AQUI -->

<br />
<div class="hc-credit">
<span style="float:left">
<a href="http://bloggeameblogger.blogspot.com/2012/02/caja-de-chat-en-forma-flotante-para-tu.html" target="_blank">
[?]
</a>
</span>
<span style="float:right">
<a href="javascript:showHidehcr()">
[Cerrar]
</a>
</span>
</div>
</div>
</div>
<script type="text/javascript">
var hcr = document.getElementById("hcr");
hcr.style.right = (30-hcr.offsetWidth).toString() + "px";
</script>

3) Realizamos ahora los siguientes cambios:


> Lo que está de color rojo: <!-- EL CODIGO DEL CHAT VA AQUI --> lo reemplazas por el código de tu chat que has generado.




> Lo que está de color verde:


- top:100px: Este es lugar del botón que oculta y muestra la caja de tu chat. Si aumentas su valor; es decir, el número 100 a un número mayor, verás que el botón se irá más abajo. Si por el contrario disminuyes su valor, el botón se irá más arriba. Puedes cambiar el valor por defecro al valor que desees para tu blog.


- border:2px solid #333333: Este es el ancho y color del borde. Si deseas cambiar el ancho del borde de la caja de chat, aumenta ó disminuye los 2px. Si deseas cambiar el color del borde, cambia el #333333. Puedes usar una paleta de colores online.


- background:#cccccc: Este es el fondo de la caja del chat, no el color que está dentro del chat sino el fondo dentro del borde anterior que vimos. Por defecto tiene un color plomo #cccccc, pero puedes cambiarlo por el color que quieras. De igual manera puedes usar una paleta de colores online.




> Lo que está de color azul, es la URL de la imagen del botón que dice "Chat", por defecto tiene un color negro, pero puedes reemplazarlo por cualquier otro botón que desees para tu chat. He creado el mismo botón pero con otros colores, por si deseas emplear uno de ellos y vaya con el color de tu blog:

http://3.bp.blogspot.com/-3bSiIPjxilY/T02QOPK1s4I/AAAAAAAAGw0/FUsM4PWhkFg/s1600/ChatBox10.png

http://1.bp.blogspot.com/-NjF_sf-Q-b4/T02QOgrhpuI/AAAAAAAAGw8/rq0oDfY1eyA/s1600/ChatBox2.png

http://3.bp.blogspot.com/-hklH6g1ZvlY/T02QPDO3AWI/AAAAAAAAGxE/ZntAvVd8rE8/s1600/ChatBox3.png

http://1.bp.blogspot.com/-4paJqD9zOB0/T02QPkd1yEI/AAAAAAAAGxM/g7aCcRINsJY/s1600/ChatBox5.png

http://1.bp.blogspot.com/-ivWKQNd26i4/T02QPxOKNMI/AAAAAAAAGxU/LcGpclcSwBE/s1600/ChatBox6.png

http://2.bp.blogspot.com/-DiLtYWmrMCw/T02QQUvbN0I/AAAAAAAAGxc/e9QR-f-V6F4/s1600/ChatBox7.png

http://2.bp.blogspot.com/-MmBmgn2_KzQ/T02QQ3aL0TI/AAAAAAAAGxk/huany5lU5fU/s1600/ChatBox8.png

http://2.bp.blogspot.com/-g7I8HK4b0bw/T02QRaUZ16I/AAAAAAAAGxs/G3v4P3-0jOY/s1600/ChatBox9.png

4) Hecho los cambios respectivos, guardas los cambios de tu gadget y voyla! eso sería todo. 




Espero les haya servido este tutorial. ¡Saludos!... Imprimir artículo