jueves, julio 31, 2014

Efecto CBOX con Pestaña Deslizante


Otro efecto para sus cbox ^^ me da fiaca escribir la descripción xDDDDDDDDDD para ver el preview... 

VE A UNO DE MIS BLOGS DE PRUEBA :D y fijate el de la pestaña rosa!

si te gusto el efecto & lo kieres sigue los siguientes pasos ^^

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>



.boxer {width: 250px;height: 110px; margin-top: -300px;position: fixed;left: 600px;-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: 250px;background: #fff;padding: 5px;overflow: hidden;height: 300px;font-family: calibri; font-size: 12px; color: #888;}
.close {top: 300px;position: absolute;background:#FFCAEA;color: #000 ;padding: 3px;width:255px;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;}


Rojo: Color de la pestaña.

Naranja: Color del texto de la pestaña.


Terminas de editar, guardas & ahora para aplicar el efecto pegas el siguiente código en ungadget html/javascript, pero si tienes plantilla clásica pégalo en alguna parte del código de tu sidebar :3


<div class="boxer">
<div class="close">
<e>TEXTO PESTAÑA</e> 
<f>TEXTO PESTAÑA HOVER</f>
</div>
<div class="box">
AQUÍ VA EL CÓDIGO DE TU CBOX

</div></div>


Reemplazas siguiendo las indicaciones, guardas & ya está!!! :3 super facil ^^

Da créditos si lo tomas!!! :3

No hay comentarios:

Publicar un comentario