Caja de chat, lateral y flotante

En otro post hablamos de Páginas para poner un chat en tu blog.
Pero hoy vamos a enseñaros como podemos poner una caja flotante, en la parte lateral de nuestro blog, para que nuestros lectores puedan chatear con nosotros.

Instalarlo en nuestro blog

Lo primero que tenemos que hacer es irnos a nuestra plantilla para editarla.
Tema> Editar HTML
Con los botones Ctrl +F buscamos </Head>
 y justo antes pegamos este código

<script type="text/javascript" src="http://disemuchonet.blogcindario.com/ficheros/jquery-1-4-2-min.js">
</script>
<script type="text/javascript">
//<![CDATA[
var j = jQuery.noConflict();
j(function (){
j(".esthela").hover(function(){
j(".esthela").stop(true, false).animate({right:"0"},"medium");
},function(){
j(".esthela").stop(true, false).animate({right:"-400"},"medium");
},500);
return false;
});
//]]>
</script>
<style type="text/css">
/*<![CDATA[*/
.esthela {
float:right;
width:450px;
height:350px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1MDsh2cDeKqKbv9HgGAhLJbkru90qZArSsU52kgRvOjQtxxoBn3YQpZmaW7EbaMjjx1w-oenTE6BrwZ8JT5Lr0g5tUhubPpPRzPTI1H-cjqgozUw4fEzFk7zRxbz1g8GxUA5OQNSPGXw/s1600/image%5B1%5D.png) no-repeat !important;
display:block;
right: -400px;
padding:0;
position:fixed;
top: 56px;
z-index:1002;
}
/*]]>*/
</style>

 Guardamos y cerramos

Instalar el gadget

La segunda parte consiste en insertar este código en un gadget.
Nos dirigimos a 
Diseño > Añadir un Gaget

Dentro añadimos este código

<div class="esthela" style="right: -400px;">
    <div style="color: rgb(255, 255, 255); padding: 8px 5px 0pt 50px;">
        <div class="http://trucosgadgetsblogger.blogspot.com/">
            aqui tu chat o lo que desees
        </div>
    </div>
</div>

 Guardamos y cerramos.
Ya podemos disfrutar de nuestro chat¡¡