Cbox deslizante en tu blog

Hola a todos, Bueno dentro de poco me iré y aprovecho para dejaros este tutorial que me pidió Ceila y en fin, trata sobre como poner un chat deslizante como tengo yo en la esquina. Es un tutorial muy facil, comencemos...

Tenemos que tener creado nuestro Cbox. Entonces nos vamos a diseño y vamos a Añadir un gadget

                                     

Una vez en HTML/JAVASCRIPT ponemos este código:

<style>

.boxer {width: 250px;height: 110px; margin-top: -130px;position: fixed;right: 50px;-webkit-transition: all 1s ease-in-out;-moz-transition: all 1s ease-in-out;-o-transition: all 1s ease-in-out;z-index: 100;top: 0px;}

.boxer:hover {margin-top: 0px;-webkit-transition: all 1s ease-in-out;-moz-transition: all 1s ease-in-out;-o-transition: all 1s ease-in-out;}

.box {width: 246px;background: #fff;padding: 5px;overflow: hidden;height: 130px; font-family: calibri; font-size: 12px; color: #c7c7c7;}

.close {top: 130px;position: absolute;background: #000000;color: #fff ;padding: 3px;width:250px;text-align:center;border-radius: 0px 0px 10px 10px;-moz-border-radius: 0px 0px 10px 10px;-webkit-border-radius: 0px 0px 10px 10px;left: px;}

.close e, .boxer:hover f {display: inline;opacity:.8;}

.close f, .boxer:hover e {display: none;opacity:.8;}

</style>

<div class="boxer">

<div class="close"> <e>C-box</e> <f>¿Alguna duda?</f> </div>

<div class="box">

<center>

Aqui va el código de tu c-box

</center>

</div></div>

Donde pone codigo de tu c-box es donde debe estar el código tu cbox 

PARTE A EDITAR

Color del botón:

Cámbialo por cualquier otro que quieras.

Lado:

Cabia right por left si lo prefieres a la izquierda

Importante:

El C-box debe medir 240px de ancho y 100 px de alto en total.