Como añadir un chat a tu blog

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:
  • Cbox.ws
  • xat.com
  • supongo que esos son uno de los mejores y más reconocidos por eso los elegí para el artículo.

    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.
  • [ <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="http://1.bp.blogspot.com/-5dmczulpquA/TwECOqkjStI/AAAAAAAAATY/4z3JbNFhW5s/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;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.

    ¿Qué te pareció?

    Loading...
    Nombre

    Adblock Adobe Flash AJAX Algoritmos Anuncios API Blogger Blogging Buscadores chrome web store Código Fuente CSS CSS 3 CV Dart Depurar Desarrollo Web Diseño Diseño Grafico Diseño Web Documentación Efectos Facebook Firefox Foros Fotografias Frances Bean Cobain Gadgets General Geolocalizar Google Google Analytics Google Chrome Google Imágenes Google Music Google Reader Google+ Herramientas Hotmail HTML HTML5 Imágenes Información Informática Instagram Internet Internet Explorer Internet Explorer 10 Javascript jQuery Kurt Cobain Librerías Marketing Microsoft Monetización Web Mozilla Firefox 8 MySQL Navegadores Noticias Optimización Web PageSpeed Insights PayPal Personal Photoshop PHP Plantillas Programación Programas Programas Web Proyectos Redes Sociales ScreensHots Scripts Seguridad SEO Servicios Web Sesiones Snippets SoniTube Spam Steve Jobs Templates Themes Thumbalizr Tips Trucos Tutoriales Twitter Utilidades Vectores Virus Web Widgets Windows 7 Windows 8 Windows Mobile Windows XP WordPress XSS Youtube
    false
    ltr
    item
    OnSoni: Como añadir un chat a tu blog
    Como añadir un chat a tu blog
    http://4.bp.blogspot.com/-1BXDYc1UdE8/TwEN6mQe0nI/AAAAAAAAATk/gQbDsfUgyLI/s400/chat-blogger-tutorial-onsoni.jpg
    http://4.bp.blogspot.com/-1BXDYc1UdE8/TwEN6mQe0nI/AAAAAAAAATk/gQbDsfUgyLI/s72-c/chat-blogger-tutorial-onsoni.jpg
    OnSoni
    http://www.onsoni.com/2012/01/como-anadir-un-chat-tu-blog.html
    http://www.onsoni.com/
    http://www.onsoni.com/
    http://www.onsoni.com/2012/01/como-anadir-un-chat-tu-blog.html
    true
    8818836675902573334
    UTF-8
    Not found any posts Not found any related posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All RECOMMENDED FOR YOU Etiqueta ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back Home Contents Ver también Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS CONTENT IS PREMIUM Please share to unlock Copiar todo el codigo Seleccionar todo el Código Todo el código se ha copiado en el portapapeles Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy