Puntero con texto animado que lo sigue en Blogger

Hace un tiempo te presenté cursores para el blog y también un atractivo cursor con destellos, hoy quiero compartir un código que hace que tras el cursor se muestre un texto que lo sigue.



Pero sin andar con más vueltas lo que lograrás es ver el efecto que estás viendo si mueves el puntero de tu mouse en esta página

<style type='text/css'> /* Texto giratorio que sigue al cursor */ #outerCircleText { font-style: italic; font-weight: bold; font-family: verdana, arial; /* Tipo de letra */ color: #000; /* Color del texto */ /* No editar esta area */ position: absolute;top: 0;left: 0;z-index: 3000;cursor: default;} #outerCircleText div {position: relative;} #outerCircleText div div {position: absolute;top: 0;left: 0;text-align: center;} </style> <script type='text/javascript'> //<![CDATA[ /* Circling text trail- Tim Tilton Website: http://www.tempermedia.com/ Visit: http://www.dynamicdrive.com/ for Original Source and tons of scripts Modified Here for more flexibility and modern browser support Modifications as first seen in http://www.dynamicdrive.com/forums/ username:jscheuer1 - This notice must remain for legal use */ ;(function(){ // Mensaje var msg = "PCZEROS te sigue a todas partes"; // Tamaño de la letra var size = 22; // Determina si es ovalado o circular, 1 es circular, 2 es ovalado var circleY = 0.75; var circleX = 2; // Espacio entre cada letra var letter_spacing = 5; // Diametro del circulo var diameter = 10; // Velocidad de rotacion var rotation = 0.4; // Velocidad de reaccion var speed = 0.3; ////////////////////// No editar nada mas ////////////////////// if (!window.addEventListener && !window.attachEvent || !document.createElement) return; msg = msg.split(''); var n = msg.length - 1, a = Math.round(size * diameter * 0.208333), currStep = 20, ymouse = a * circleY + 20, xmouse = a * circleX + 20, y = [], x = [], Y = [], X = [], o = document.createElement('div'), oi = document.createElement('div'), b = document.compatMode && document.compatMode != "BackCompat"? document.documentElement : document.body, mouse = function(e){ e = e || window.event; ymouse = !isNaN(e.pageY)? e.pageY : e.clientY; // y-position xmouse = !isNaN(e.pageX)? e.pageX : e.clientX; // x-position }, makecircle = function(){ // rotation/positioning if(init.nopy){ o.style.top = (b || document.body).scrollTop + 'px'; o.style.left = (b || document.body).scrollLeft + 'px'; }; currStep -= rotation; for (var d, i = n; i > -1; --i){ // makes the circle d = document.getElementById('iemsg' + i).style; d.top = Math.round(y[i] + a * Math.sin((currStep + i) / letter_spacing) * circleY - 15) + 'px'; d.left = Math.round(x[i] + a * Math.cos((currStep + i) / letter_spacing) * circleX) + 'px'; }; }, drag = function(){ // makes the resistance y[0] = Y[0] += (ymouse - Y[0]) * speed; x[0] = X[0] += (xmouse - 20 - X[0]) * speed; for (var i = n; i > 0; --i){ y[i] = Y[i] += (y[i-1] - Y[i]) * speed; x[i] = X[i] += (x[i-1] - X[i]) * speed; }; makecircle(); }, init = function(){ // appends message divs, & sets initial values for positioning arrays if(!isNaN(window.pageYOffset)){ ymouse += window.pageYOffset; xmouse += window.pageXOffset; } else init.nopy = true; for (var d, i = n; i > -1; --i){ d = document.createElement('div'); d.id = 'iemsg' + i; d.style.height = d.style.width = a + 'px'; d.appendChild(document.createTextNode(msg[i])); oi.appendChild(d); y[i] = x[i] = Y[i] = X[i] = 0; }; o.appendChild(oi); document.body.appendChild(o); setInterval(drag, 25); }, ascroll = function(){ ymouse += window.pageYOffset; xmouse += window.pageXOffset; window.removeEventListener('scroll', ascroll, false); }; o.id = 'outerCircleText'; o.style.fontSize = size + 'px'; if (window.addEventListener){ window.addEventListener('load', init, false); document.addEventListener('mouseover', mouse, false); document.addEventListener('mousemove', mouse, false); if (/Apple/.test(navigator.vendor)) window.addEventListener('scroll', ascroll, false); } else if (window.attachEvent){ window.attachEvent('onload', init); document.attachEvent('onmousemove', mouse); }; })(); //]]> </script>

Agregar el este efecto al puntero de tu blog es muy sencillo, sólo copias el código de arriba y lo pegas en tu blog en diseño >> html/javaScript (Aquí un tutorial si no sabes donde pegarlo)

Puedes cambiar esta parte del código para ajustar este truco a tus necesidades:

// Mensaje
var msg = "PCZEROS... te sigue a todas partes";

// Tamaño de la letra
var size = 22;

// Determina si es ovalado o circular, 1 es circular, 2 es ovalado
var circleY = 0.75; var circleX = 2;

// Espacio entre cada letra
var letter_spacing = 5;

// Diametro del circulo
var diameter = 10;

// Velocidad de rotacion
var rotation = 0.2;

// Velocidad de reaccion
var speed = 0.3;

Busca estas líneas en el código para modificar el color, estilo de la letra y otras cosas:

font-style: italic; (borra esta línea para que las letras no se muestren en cursiva)

font-weight: bold;(borra esta línea para que las letras no se muestren en negrita)

font-family: verdana, arial; (Tipo de letra)

color: #000; (Color del texto: lee Código de colores RGB)

Esto es todo espero les sea de utilidad.

Reloj cuenta regresiva para Blogger

En pczeros ya hace tiempo les presenté relojes analógicos 1 y relojes analógicos 2 para blogger y también relojes digitales para el blog, todos en flash! hoy les dejaré un reloj con cuenta regresiva para tu Bloggero web en general realizado en Java Script para que puedan mostrar los días que faltan para un evento cualquiera, como por ejemplo el cumpleaños de blog, el comienzo del 2012, el lanzamiento de una película, la asunción del nuevo presidente, el fin del mundo, o lo que tu quieras!

En el ejemplo se muestran los días que faltan para que empiece el 2012!



Código:

<center> <script language="JavaScript"> TargetDate = "1/1/2012 00:00 PM"; BackColor = "white"; ForeColor = "blue"; CountActive = true; CountStepper = -1; LeadingZero = true; DisplayFormat = "%%D%% Días, %%H%% Horas, %%M%% Minutos, %%S%% Segundos."; FinishMessage = "Feliz año nuevo!!!"; </script> <script language="JavaScript" src="http://scripts.hashemian.com/js/countdown.js"></script></center> Configuración:

1/1/2012: es el la fecha que finaliza el conteo, puedes cambiarla, pero manteniendo el formato de fecha. El formato para la fecha es el siguiente MES/DIA/AÑO, por ejemplo para saber los días que faltan para el 25 de ocutbre de 2021 la fecha que se debería poner en el scrip sería 10/25/2021

white: es el color de fondo del contador, puedes usar el nombre del color en inglés o bien el código RGB, clic en el enlace para aprender más sobre codigos de colores RGB

blue: Es el color del texto, también puedes cambiarlo.

Feliz año nuevo!!!: Es el texto que se mostrará cuando finalice el conteo, puedes poner el mensaje que quieras



Eso es todo, si no sabes donde pegar el código lee: Cómo agregar gadgets a blogger.