miércoles, 16 de marzo de 2011

Como Poner El Cursor En Forma De Cruz

Anteriormente vimos cómo tener un cursor con texto en movimiento dentro del blog. Ahora cambiaremos el cursor tradicional por un cursor en forma de cruz. Para que tengas este cursor y le des un toque personalizado a tu blog  debemos ir a Plantilla y luego a Editar HTML y pulsamos control+f y buscamos esta etiqueta : </body> , y   pega antes de  </body> lo siguiente:
<style type='text/css'>
<!--
body { cursor: crosshair}
-->
</style>

Con esto cuando tus lectores entren a tu blog el cursor cambiará  esto:
Crossair

martes, 15 de marzo de 2011

Como Poner Cursor Con Texto En Movimiento

Este truco es para que un texto siga el cursor del mouse. El texto puede ser el título de su blog o lo que ustedes elijan. Pueden ver un ejemplo de cómo el texto sigue al cursor aquí.
Para ponerlo en su blog tienen que crear un elemento HTML/Javascript (ver cómo insertar elementos) y ahí pegar el siguiente código:

<script language="JavaScript" type="text/javascript">

mensaje = 'EL TEXTO QUE QUIERAN';
font = 'Verdana,Arial';
size = 2;
color = 'orange';
velocidad = 0.7;

n4 = (document.layers);
ie = (document.all);
n6 = (document.getElementById);

mensaje = mensaje.split('');
n = mensaje.length;

a = size*10;
ymouse = 0;
xmouse = 0;
props = "<font face="+font+" color="+color+" size="+size+">";

if (n4)
{
for ( i = 0; i < n; i++)
document.write('<layer left="0" top="0" width="+a+" name="n4mensaje'+i+'" height="+a+"><center>'+props+mensaje[i]+'</font></center></layer>');
}
else if (ie)
{
document.write('<div id="padre" style="position:absolute;top:0px;left:0px"><div style="position:relative">');
for (i=0; i < n; i++)
document.write('<div id="iemensaje" style="position:absolute;top:0px;left:0;height:'+a+';width:'+a+';text-align:center">'+props+mensaje[i]+'</font></div>');
document.write('</div></div>');
}
else if (n6)
{
document.write('<div id="padre" style="position:absolute;top:0px;left:0px"><div style="position:relative">');
for (i = 0; i < n; i++)
document.write('<div id="iemensaje'+i+'" style="position:absolute;top:0px;left:0;height:'+a+';width:'+a+';text-align:center">'+props+mensaje[i]+'</font></div>');
document.write('</div></div>');
}

if(n4)
window.captureEvents(Event.MOUSEMOVE);

function Mouse(evento)
{
if(ie)
{
xmouse = event.x+20;
ymouse = event.y+20;
}
else if(n4 || n6)
{
xmouse = evento.pageX+20;
ymouse = evento.pageY+20;
}
}

if(n4)
window.onMouseMove = Mouse
else if(ie || n6)
document.onmousemove = Mouse;

y = new Array();
x = new Array();
Y = new Array();
X = new Array();
Yaux = new Array();
Xaux = new Array();

for (i=0; i < n; i++)
{
y[i] = 0;
x[i] = 0;
Y[i] = 0;
X[i] = 0;
Yaux[i] = 0;
Xaux[i] = 0;
}

function asigna()
{
if (ie)
padre.style.top = document.body.scrollTop;

for (i = 0; i < n; i++)
{
if(n4)
{
document.layers['n4mensaje'+i].top = y[i];
document.layers['n4mensaje'+i].left = x[i]+(i*(a/2));
}
else if(ie)
{
iemensaje[i].style.top = y[i];
iemensaje[i].style.left = x[i]+(i*(a/2));
}
else if(n6)
{
eval("document.getElementById('iemensaje"+i+"').style.top = '"+y[i]+"px'");
eval("document.getElementById('iemensaje"+i+"').style.left = '"+(x[i]+(i*(a/2)))+"px'");
}
}
}

function ondula()
{
y[0]=Math.round(Y[0] +=((ymouse)-Y[0])*velocidad);
x[0]=Math.round(X[0] +=((xmouse)-X[0])*velocidad);

for (var i = 1; i < n; i++)
{
Yaux[i] = Math.round(Y[i]);
Xaux[i ]= Math.round(X[i]);
y[i] = Math.round(Y[i]=Yaux[i]+(y[i-1]-Y[i])*velocidad);
x[i] = Math.round(X[i]=Xaux[i]+(x[i-1]-X[i])*velocidad);
}
asigna();
setTimeout('ondula()',50);
}

window.onload = ondula;

</script>



Para personalizarlo deben cambiar el mensaje que dice EL TEXTO QUE QUIERAN, si quieren otro tipo de letra cambian donde dice font, para el tamaño de la letra en size, el color donde dice orange, pueden poner el color que quieran (black, red, green, etc) incluso pueden modificar la velocidad.
Copyright © 2011 Tricks-Blogs. Todos Los Derechos Reservado-Plantilla Creada Por Diego Robles.