Cbox deslizante en tu blog [actualizado]

Hola a todos  Bueno dentro de poco me iré y aprovecho para dejaros este tutorial que me pidió Ceila-chan (visiten su hermoso blog) y en fin, trata sobre como poner un chat deslizante como tengo yo en la esquina. Es un tutorial muy facil, comencemos GO Go go!!

Tenemos que tener creado nuestro Cbox. Entonces nos vamos a diseño y vamos a:   

                                       

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 (evidentemente xD)

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.