Image Map

domingo, 21 de abril de 2013

Recursos: Caja de texto "Up/Down".

Holis^^

Pues nada, hoy os traigo unos recursos. Esta vez cajitas de texto. Se suelen usar para dar la bienvenida al blog o para noticias aunque puedes poner lo que quieras en ellas.
Créditos por el código y las cajitas a Mell.

Si quieréis ver una vista previa, click aquí para ver el resultado en mi blog de pruebas.

Sólo tienes que colocar este código en un gadget de tipo HTML/Javascript:



<style>
.CajaUDmmc {
background: url(URL DE TU CAJITA);
width: 230px;
heigth: 300px;
color: #FFF;
font-family:calibri;
font-size:12px;
line-height:12px;
padding-top:63px;
padding-bottom:10px;
}
.CajaUDmmc a{
font-size:17px;
color: transparent;
text-decoration: none;
}
.lol a:hover{
color: transparent;
text-decoration: none;
text-shadow: none;
}
</style>
<div class="CajaUDmmc">
<div style="position:relative;height:185px;overflow:hidden;">
<div id="container" style="overflow:hidden;position:absolute;width:180px;margin-left:30px;">
<!--COMIENZA EL TEXTO-->
COLOCA AQUÍ TU TEXTO<!--FINALIZA-->
</div></div>
<table width="195px" style="right:0px;"><td>
<p align="right">
<a href="#" onmouseover="move('container',5)" onmouseout="clearTimeout(move.to)" title="sube!"> up</a>
<a href="#" onmouseover="move('container',-5)" onmouseout="clearTimeout(move.to)" title="baja!"> do</a>
</p>
</td>
</table>
</div>
<script type="text/javascript">
/******************************************
* Scrollable content script II- © Dynamic Drive (www.dynamicdrive.com)
* Visit http://www.dynamicdrive.com/ for full source code
* This notice must stay intact for use
******************************************/
// modified 17-October-2011
function move(id,spd){
 var obj=document.getElementById(id),max=-obj.offsetHeight+obj.parentNode.offsetHeight,top=parseInt(obj.style.top);
 if ((spd>0&&top<=0)||(spd<0&&top>=max)){
  obj.style.top=top+spd+"px";
  move.to=setTimeout(function(){ move(id,spd); },20);
 }
 else {
  obj.style.top=(spd>0?0:max)+"px";
 }
}
</script>

Y editas lo marcado: 
URL de tu cajita: pones el enlace de la cajita que quieres colocar.
#FFF: el color de la letra de tu cajita. Los principales son, negro (#000000) y blanco (#FFFFFF).
Coloca aquí tu texto: el nombre bien lo indica.


Cajas de texto


   
   

Eso es todo :33 ¡Un besote! <3

9 comentarios:

  1. Las intenté poner hace tiempo, y me salio fatal, XD!
    Gracias,
    ¡un besote!

    ResponderEliminar
    Respuestas
    1. Jajaja, intenta hacerlo ahora, igual te sale bien esta vez xDD
      Un besote <3

      Eliminar
  2. Hola !!! lo intente poner ,pero me sale mal ,es que al ponerlo, en lugar que salga una cajita salen 4 del mismo modelo ,no se por que
    besos :3

    aa y como pone lo del infosite ,es que quiero hacer uno pero no se como ,espero que me respondan pronto

    ResponderEliminar
    Respuestas
    1. ¡Hola! Ya está arreglado, prueba ahora :3
      Es muy sencillo. Cuando pueda hago un tutorial, que tenemos pedidos de tutoriales hasta arriba T.T
      Un beso <3

      Eliminar
  3. Y las cajitas se pueden hacer como se quiera o hay que usar esas?:3

    ResponderEliminar
  4. Lo hago todo y no me salen en el blog :C volveré a intentarlo... preciosas las cajitas, me encanta todo lo que haceis
    besos <3

    ResponderEliminar
    Respuestas
    1. Prueba de nuevo, y ten cuidado con el código :) Muchas gracias :33
      Un besote <3

      Eliminar
  5. no me deja coppiar la url de las cajitas, como puedo hacerlo??
    la de tu foto es jen Lawrence??si es asi me encanta soy gran fan de ella y de la trilogía thg^^

    ResponderEliminar