Para iniciar este nuevo año 2012 voy a explicarles la manera de añadir un chat a un blog de blogger, utilizando CSS y JavaScript, sin afectar la carga del blog y sin ocupar espacio en necesario, es un método muy eficaz y sencillo.
Explicación
Lo primero y principal que vamos a realizar será crear nuestro chat, puedes utilizar uno de estos servicios:
Implementando del Chat
Vamos a añadir nuestro chat ya creado a nuestro blog de blogger, de manera que deberás seguir estos pasos:
Iniciar sesión en blogger.com/blogspot.com.
En su blog, haga clic en Diseño.
Haga clic en Añadir un gadget.
Elegir HTML/JavaScript, haga clic en el cuadro de contenido y pegue el siguiente código en él.
Ahora buscamos en el código y en dónde dice Añadir aqui el código del chat, obviamente será dónde vamos a añadir el código generado de alguno de los servicios de chat gratis que ya proporcione, Ahora guarde los cambios y listo ya tendremos nuestro chat en el blog.
Modificaciones
Si deseas realizar algunas modificaciones que realmente son necesarias para adaptar el diseño y todo lo demás a la apariencia de tu blog.
Vamos con el CSS, podemos añadirle al cuadro que contenera el chat, una imagen en vez de color, de la siguiente manera:
Reemplazando #ffffff por url(URL-DE-LA-AMAGEN), y con eso se generaría una imagen de fondo en el cuadro que contenera el chat.
Ahora una modificación opcional dependiendo del color y diseño de tu blog, deberás adaptar la imagen que dice Chat Aqui al estilo determinado, eso lo haces editando la imagen a tu gusto, dejare la imagen:
Editala a tu gusto, bien, ahora no queda más nada que hacer, espero este pequeño aporte pueda servirles para sus blogs.
Puedes ver un ejemplo de este artículo en otro blog.
Explicación
Lo primero y principal que vamos a realizar será crear nuestro chat, puedes utilizar uno de estos servicios:
supongo que esos son uno de los mejores y más reconocidos por eso los elegí para el artículo.Cbox.ws xat.com
Implementando del Chat
Vamos a añadir nuestro chat ya creado a nuestro blog de blogger, de manera que deberás seguir estos pasos:
[ <style type="text/css"> #fl{ position:fixed; left:150px; z-index:+1000; } * html #fl{position:relative;} .flcontent{ float:left; border:2px solid #676767; background:#ffffff repeat-x bottom center scroll; -moz-border-radius-topleft:15px; -moz-border-radius-topright:15px; -moz-border-radius-bottomleft:15px; -moz-border-radius-bottomright:15px; padding:0px; } </style> <script type="text/javascript"> function showHideFL(){ var fl = document.getElementById("fl"); var w = fl.offsetWidth; fl.opened ? moveFL(0, -100-w) : moveFL(20-w, 0); fl.opened = !fl.opened; } function moveFL(x0, xf){ var fl = document.getElementById("fl"); var dx = Math.abs(x0-xf) > 25 ? 35 : 1; var dir = xf>x0 ? 1 : -1; var x = x0 + dx * dir; fl.style.bottom = x.toString() + "px"; if(x0!=xf){setTimeout("moveFL("+x+", "+xf+")", 10);} } </script> <div id="fl"> <div class="fltab" onclick="showHideFL()"> </div> <div class="flcontent"> Añadir aquí el código del chat. <div style="text-align: right;"> <a href="javascript:showHideFL()"> [Cerrar] </a></div> </div> </div> <script type="text/javascript"> var fl = document.getElementById("fl"); fl.style.bottom = (-100-fl.offsetWidth).toString() + "px"; </script> <a href="javascript:showHideFL()"/><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCbPZMiJ4COgdrnkX5CPYUd-_IO0td9UNC08UChxULJ6yz3TlGWgldWMvCuLlAp2Xjwvq4OXjShu4vET0MXhl80HlzKXivLXR6WekKpJCXqbK9pji3b5XMeYtBEkmuQ_NEXkkWVDpFp9Q/s1600/tabs.png" alt="kode" title="Click para Abrir el Chat" style="display:scroll;position: fixed; top:15px;right:0px;cursor:pointer;style=" opacity:1;filter:alpha(opacity="100)&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;quot;" onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100" onmouseout="this.style.opacity=0.5;this.filters.alpha.opacity=50" ;" height="130px" width="40px" /></a>]
Ahora buscamos en el código y en dónde dice Añadir aqui el código del chat, obviamente será dónde vamos a añadir el código generado de alguno de los servicios de chat gratis que ya proporcione, Ahora guarde los cambios y listo ya tendremos nuestro chat en el blog.
Modificaciones
Si deseas realizar algunas modificaciones que realmente son necesarias para adaptar el diseño y todo lo demás a la apariencia de tu blog.
Vamos con el CSS, podemos añadirle al cuadro que contenera el chat, una imagen en vez de color, de la siguiente manera:
[.flcontent{ float:left; border:2px solid #676767; background:url(URL-DE-LA-AMAGEN) #ffffff repeat-x bottom center scroll; -moz-border-radius-topleft:15px; -moz-border-radius-topright:15px; -moz-border-radius-bottomleft:15px; -moz-border-radius-bottomright:15px; padding:0px; }]
Reemplazando #ffffff por url(URL-DE-LA-AMAGEN), y con eso se generaría una imagen de fondo en el cuadro que contenera el chat.
Ahora una modificación opcional dependiendo del color y diseño de tu blog, deberás adaptar la imagen que dice Chat Aqui al estilo determinado, eso lo haces editando la imagen a tu gusto, dejare la imagen:
Editala a tu gusto, bien, ahora no queda más nada que hacer, espero este pequeño aporte pueda servirles para sus blogs.
Puedes ver un ejemplo de este artículo en otro blog.
