Páginas

sábado, 7 de junio de 2014

[TUTORIAL] Poner una CBOX oculta en una imagen

Konnichiwa, dear usagis!! Ya abreis visto que he puesto una CBOX, podeis abrirla pulsando en la imagen que hay a la esquina superior derecha. Aqui que os voy a enseñar como hacer esto.

Abre Diseño -> Widget HTML/Javaspript y pon este codigo:


<center>
<style type="text/css">
#at{
position:fixed;
right:250px;
z-index:+1000;
}
* html #at{position:relative;}
.attab{
height:100px;
width:30px;
float:left;
cursor:pointer;
background:url();
}
.atcontent{
float:left;
border:none;
background: repeat-x bottom center scroll ;
-moz-border-radius:20px;
padding:10px;
}
</style>
<script type="text/javascript">
function showHideAT(){
var at = document.getElementById("at");
var w = at.offsetWidth;
at.opened ? moveAT(0, -200-w) : moveAT(20-w, 0);
at.opened = !at.opened;
}
function moveAT(x0, xf){
var at = document.getElementById("at");
var dx = Math.abs(x0-xf) > 25 ? 35 : 1;
var dir = xf>x0 ? 1 : -1;
var x = x0 + dx * dir;
at.style.top = x.toString() + "px";
if(x0!=xf){setTimeout("moveAT("+x+", "+xf+")", 10);}
}
</script>
<div id="at">
<div class="attab" onclick="showHideAT()"> </div>
<div class="atcontent">
<div align="center">
<div style="background:url() no-repeat;">
<div style="text-align: center;">
CODIGO DE TU CBOX
</div>
</div>
<br />
<div align="right"><a href="javascript:void(0);" onclick="showHideAT()"><div >
<span ></span></div></a></div>
</div></div>
<script type="text/javascript">
var at = document.getElementById("at");
at.style.top = (-200-at.offsetWidth).toString() + "px";
</script>
<a href="javascript:void(0);"onclick="showHideAT()"/><img class="expando" src="IMAGEN DE CBOX" alt="PUSH" title="Click"style='position:fixed; top:0; right:50px;'/></a>
</div></center>

Edita el codigo, ve a la pagina de CBOX y crea una si aun no la tienes y pega el codigo de la CBOX en donde pone "CODIGO DE TU CBOX" en el codigo de antes.

Copia la url de la imagen que quieras poner (recuerda que debe de ser de internet, asi que puedes editarla y subirla a alguna pagina para sacar de ahi la url) y pegala en "IMAGEN DE CBOX".

Y ya esta lista, prueba a ver como quedo, puedes jugar con el tamaño de la imagen, es decir, si tapa parte de tu portada, puedes reducirla y volverla a subir mas pequeña. Bye bye.

1 comentario: