Colocar Caja Flotante lateral para chat

En esta ocacion les dejo un tutorial de como colocar un a caja flotante de chat para su web blog Aki les dejo un tutorial de como colocar una caja flotante latetal para un chat en blogger espero que les guste y comenten

Primero para instalar vamos Plantilla - Editar HTML  copiamos el codigo de abajo y buscamos </head> y pegamos antes del head

<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/AVvXsEhxh6jyK-qXvhUp2BGv6eaosX3eoF-yaq1K77xMGQ3-gykaN0rU7NjbUMZ7ULx_iYIxqnn70sxWICAGR4nhPgSDmGtIVtEgrfcVLM6tANxYTCOEcT0v-rg0FVmJX2FY-XukxnsDNj9KwT4/s1600/image%5B1%5D.png) no-repeat !important;
display:block;
right: -400px;
padding:0;
position:fixed;
top: 56px;
z-index:1002;
}
/*]]>*/
</style>

Segundo ir a diseño y crear un gadget HTML/Javascript y pegar el codigo de abajo y listo

<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>