Efecto CBOX Pestaña Deslizante Flotante

Hola!! ahora les publicaré algunos tutos para sus bloggies ^^ ahora empieza con un efecto para cbox de una pestaña deslizante & flotante arriba del blog ^^ pasas el mouse y aparece la cbox :D como soy mala explicando no deben saber a ke me refiero XD por lo tanto aquí hay un preview... ^^

PREVIEW DEL EFECTO!!

Si te gusto el efecto y lo quieres, sigue los siguientes pasos...

1º - Asegurate de que el ancho de tu cbox sea de 160 pixeles de ancho y 205 pixeles de alto. Si no es asi, cambialo! de lo contrario el efecto no funcionara.


2º- Plantillas blogger: Pega el siguiente código justo arriba de ]]></b:skin>

Plantillas clásicas/blogskins: Pega el siguiente código justo arriba de </style>

#cbox {
margin-bottom: 100px;
font-size:8px;
color:#2e2e2e;padding-left:3px;
padding-right:3px;
margin-left:-520px;
position:fixed;
overflow:hidden;
margin-top:-612px;
-webkit-transition: opacity 0.9s linear;
-webkit-transition: all 0.9s ease-in-out;
-moz-transition: all 0.9s ease-in-out;
-o-transition: all 0.9s ease-in-out;
background: #BF00FF;z-index:999;
}
#cbox:hover {
margin-top:100px;
margin-left:-520px;
position:fixed;
overflow:visible;
background-color:#BF00FF;margin-top:-328px;
-webkit-transition: all 0.9s ease-in-out;
-moz-transition: all 0.9s ease-in-out;
-o-transition: all 0.9s ease-in-out;
}
#cboxu{
font-family:arial;
text-transform:uppercase;
color: #ededed;
font-size:10px;
text-align:center;
padding-left:3px;
background-color: #000;padding-right:3px;
padding-bottom:4px;
border-bottom:3px solid #FF00BF;margin-bottom:4px;
margin-top:6px;
}

Rojo: Color del texto de la pestaña normal.

Naranja: Color de los bordes y fondo de la pestaña normal.

Azul: Color de los bordes y fondo de la pestaña hover.

Fucsia: Color del fondo del cuadro que dice "cbox"

Amarillo: Color del borde inferior del cuadro que dice "cbox"


Guardas los cambios & ahora...



Plantillas blogger: Pega el siguiente código en un gadget html/javascript.

Plantillas clásicas/blogskins: Pega el siguiente código en alguna parte del código de tu sidebar.

<div id="cbox">
CÓDIGO DE TU CBOX!!
160 PIXELES DE ANCHO
205 PIXELES DE ALTO
</div>

<div id="cboxu">
Cbox</div>
</div>
</div>

Rojo: Ahi pones el código de tu cbox.

NOTA IMPORTANTE!! A veces luego de editar el ancho y alto de tu cbox, dice que se modifica el código. Cuando vas, lo copias y lo pegas te das cuenta de que no ha cambiado. Eso me ha pasado u.u o sea aqui una explicación en imágenes...

Si te pasa lo mismo, cambias el número que esta al lado de width por 160, y el número que esta el lado de height por 205.


Naranja: El texto que estará en la pestaña. Puede decir "cbox", "chat", "chat box", "taggie", etc. lo que vos quieras!


Es muy complejo el tutorial, pero si prestaste atención a cada parte & lo hiciste bien, todo te quedará perfecto! ^^


Este tutorial me costó mucho hacerlo, por lo tanto si lo usas DA LOS CRÉDITOS!! Si lo quieres publicar en tu blog, PIDE PERMISO!!!! Yo no muerdo ^^ Respeta mi trabajo como yo respeto el tuyo!