1/6/14

[Tutorial]Poner boton de Normas Flotantes //Abre/Cierra


Holaaaya estoy aquí con un nuevo tutorial que impacto mucho a la genteeso me gusta que impactejajaja antes de comenzar con el tutorial decir que no se os olvide pasar por la nueva seccion que hice {preguntas a kumy} me ecantaria que os pasarais a dejar vuestra pregunta si queréis claroimageahora si que empiece el tuto




  • Diseño
  • Añadir Gadget // HTML/JavaScript
  • Pegar dentro este código
 <center>
<style type="text/css">
#at{
position:fixed;
right:200px;
z-index:+1000;
}
* html #at{position:relative;}
.attab{
height:100px;
width:30px;
float:left;
cursor:pointer;
background:url();
}
.atcontent{
float:left;
-webkit-border-top-right-radius: 0px;
-webkit-border-top-left-radius: 0px;
-webkit-border-bottom-right-radius: 30px;
-webkit-border-bottom-left-radius: 30px;
border-bottom: 6px #77dad7 solid;
border-top: 4px #c690ff solid;
background:#FFFFFF 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: left;">
TEXTO QUE QUIERES PONER EN ESTE CASO ''NORMAS''</div>
</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 DEL BOTON" alt="PUSH" title="TEXTO DEL TOLTIP"/></a>
</center>

Estos son los colores del borde de arriba & de abajo de las normas
Este es el color central de las normas
Esto ha sido todo por hoy no se si publicare mas porque estoy super agobiada con los exámenes xdd me consumen ya sabéis cualquier duda me la preguntáis por mail o en la sección de dudas & la responderé lo antes posible un beso & buen finde <3

11 comentarios:

  1. Justo te lo iba a preguntar xDD!! Muchísimas gracias!!!
    Muchos besos y suerte en los exámenes!!!
    <3<3<3

    ResponderEliminar
    Respuestas
    1. muchas gracias por desearme suerte la necesito ;o; sobre todo en ingles xdd

      Eliminar
  2. Muchas gracias por el tutorial! En definitiva lo usaré ;)

    ResponderEliminar
  3. Sabes te iba a preguntar que como lo hicistes,que bueno que hisistes la tutorial~!!!waaaa
    saludos~

    ResponderEliminar
  4. Muchas gracias por el tutorial, espero que descanses bien de los exámenes.
    Saludos.

    ResponderEliminar
  5. Tienes Un Premio En MI bLOG
    http://mundochinnixarchi.blogspot.com/2014/06/premio-al-blog-mas.html

    salus
    beshines~

    te quieroo kumy

    ResponderEliminar
  6. Gracias por el tuto Kumy!, esas caritas que pones en tus entradas siempre me sacan una sonrisa, quiza ponga una que otra abecés en mi blog, pero obvio van a ser diferentes -Saludos n.n

    ResponderEliminar

Holaa!! muy buenos días-tardes-noches espero que te haya gustado la entrada & si me dejas una huellita estaría muy agradecida.
Si tienes alguna duda no te olvides de mandarme un mail a mi correo o bien hacerlo por medio de la sección de dudas
candelaaisiska@gmai.com