abril 2013

Creando Un Blogger

codigo de Ojos que siguen al cursor IV

codigo de Ojos que siguen al cursor III

codigo de Ojos que siguen al cursor I

codigo de Ojos que siguen al cursor II

Diseño | Elementos de la página | Añadir gadget | HTML/Javascript. Y si usas la nueva interfaz entra en Diseño | Añadir gadget | HTML/Javascript. Ahí pega esto:

<script type='text/javascript'>
//<![CDATA[
// Ojos que siguen al cursor
// Script original de Oopstudios.com
// Adaptado por ciudadblogger.com

EYES = {};
EYES.stack = [];
//
EYES.follow = function (eye) {
var el1 = document.getElementById (eye);
var el2 = el1.getElementsByTagName ("IMG");
el2 = el2[0];
el2.centre = (el1.offsetWidth - el2.offsetWidth) / 2;
el2.style.margin = el2.centre + "px 0 0 " + el2.centre + "px";
el1.maxDist = 6 * el1.offsetWidth;
EYES.stack.push ([el1, el2]);
};
EYES.mousemove = function (e) {
if (!EYES.stack.length) {
return;
}
//
var mouseX = mouseY = 0;
if (!e) var e = window.event;
if (e.pageX || e.pageY) {
mouseX = e.pageX;
mouseY = e.pageY;
} else if (e.clientX || e.clientY) {
mouseX = e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;
mouseY = e.clientY + document.body.scrollTop + document.documentElement.scrollTop;
}
//

for (var e=0, l=EYES.stack.length; e<l; e++) {
var el = EYES.stack[e];
var elX = elY = 0;
if (el[0].offsetParent) {
obj = el[0];
do {
elX += obj.offsetLeft;
elY += obj.offsetTop;
} while (obj = obj.offsetParent);
}
el[0].centreX = elX + Math.round (el[0].offsetWidth / 2);
el[0].centreY = elY + Math.round (el[0].offsetHeight / 2);
var difX = mouseX - el[0].centreX;
var difY = mouseY - el[0].centreY;
var dTan = Math.atan2 (difX, difY);
var dist = Math.sqrt ((difX * difX) + (difY * difY));
dist = Math.sin ((dist > el[0].maxDist ? 1 : dist / el[0].maxDist));
var newX = el[1].centre + Math.round (Math.sin (dTan) * el[1].centre * dist);
var newY = el[1].centre + Math.round (Math.cos (dTan) * el[1].centre * dist);
el[1].style.margin = newY + "px 0 0 " + newX + "px";
}
};

if (window.attachEvent) document.attachEvent ("onmousemove", EYES.mousemove);
else document.addEventListener ("mousemove", EYES.mousemove, false);
//]]>
</script>

<div style="position:relative; height:145px; margin-bottom:30px;">
<div id="Ojo1" style="width: 132px; height: 143px; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhkMb0cZa55l-Tgv6xtUltWLC_r7Og6WrT8vLdPTGr6YdvkHjcLDuLywDDVjOXmQR8nVNo31Swt1kyY-telsiNjBuLskO5tdyN4nSIzad2ZGidnqrPDcMrClDKulPXbTaCGaAp8tnBJhbU/s143/ojo1.png) center center no-repeat; position:absolute; left: 377px; top: 20px;">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg6ni5xJe06d3gVYVmXrw3r5QrwXBYxnYG-hL3w8EL0A8J4EL9vHZmvErImhA66lpfNh4-yQ7t3a8PGbZ7Eqhg9hp80seNWIPWrRx8wrJVflE45W0i29sLvUyRaqZH7VVnW2hA4Gu0aeAY/s34/pupila.png" width="30" height="30" /></div>
<div id="Ojo2" style="width: 132px; height: 143px; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMHHmFrqBwPPp7Wy1EEA6D5g3c4vi2zLm5rO52oOF42rBlilSPzEUfcRweAFtwX7JNg_6UoeM2iHgXp568IzEnINeY3zl3T3LYr2AFBAcxkwkiHluzGWubJQWrlCZiAdUyOYeRi4AipMA/s143/ojo2.png) center center no-repeat; position:absolute; left: 485px; top: 20px;">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg6ni5xJe06d3gVYVmXrw3r5QrwXBYxnYG-hL3w8EL0A8J4EL9vHZmvErImhA66lpfNh4-yQ7t3a8PGbZ7Eqhg9hp80seNWIPWrRx8wrJVflE45W0i29sLvUyRaqZH7VVnW2hA4Gu0aeAY/s34/pupila.png" width="30" height="30" /></div>
</div>

<script type="text/javascript">
EYES.follow ('Ojo1');
EYES.follow ('Ojo2');
</script>

Ojos que siguen al cursor

Una forma graciosa de mantener entretenidos a los lectores pequeños (y no tan pequeños) en nuestro blog, es con unos ojos que siguen al cursor por donde éste se mueva. El objetivo es meramente de entretenimiento para quitarle un poco de seriedad al blog y hacer que los lectores se diviertan.
Puedes ver el ejemplo aquí mismo, mueve el cursor por la página y los ojos te seguirán.

Ver Codigo de Ojos I

Ver Codigo de Ojos II

Ver Codigo de Ojos III

Ver Codigo de Ojos IV

Poner un Botón al lado Derecho o Izquierdo del Blog | Para Facebook

Para añadirlo a tu blog ve a Plantilla > Edición de HTML > con la ayuda del buscador de tu navegador (Ctrl + F) busca la etiqueta </body> y justo antes pega el siguiente código:

<a href='http://www.facebook.com/usuario' target='_blank' title='Sígueme en Facebook'><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgm1OQWYwPsOVz_eZNZxpbbhoaFSkZwBitgJzjCl7FRpAhN7ppjgx_i3wceoW3042GC1IeYW3GaEVKeYPg-C6Ob2JBiJppCDPM3ydC1oEtAkBZ31iATFhSK2yQTMPgfEhDQjlxeOE88_5E/s320/Facebook-2.jpg" style="width:30px; display:scroll;position:fixed;bottom:225px;right:0px" /></a>

Lo que está en color azul cámbialo por la dirección de tu Facebook, Twitter, Icono RSS, etcétera. En este caso tenemos facebook.
Si quieres poner tu propia imagen, cambia lo que está en color rojo por la url de tu imagen.
Lo que está en color celeste cámbienlo por el texto que ustedes quieran.
Si el botón te tapa parte del borde de tu plantilla ajusta los pixeles en width:30px se los dejo en color amarillo.
También pueden ajustar la altura a la que se verá el botón en bottom:225px y la alineación si lo quieren al lado izquierdo cambien right por left.

Pajarito de twitter en blogger

PASOS
1. ir a Diseño
2. Añadir Un Gadget
3. HTML/Javascrip`
4. Copias El Codigo

<script src="http://oloblogger.googlecode.com/files/tripleflap.js" type="text/javascript"></script><script type="text/javascript">var birdSprite='http://oloblogger.googlecode.com/files/birdsprite.png';var targetElems=new Array('img','hr','table','td','div','input','textarea','button','select','ul','ol','li','h1','h2','h3','h4','p','code','object','a','b','strong','span');var twitterAccount = 'http://twitter.com/muemev';var twitterThisText ='';tripleflapInit();</script>

Frase o texto que sigue al cursor

PASOS
1. ir a Diseño
2. Añadir Un Gadget
3. HTML/Javascrip`
4. Copias El Codigo

mensaje = 'COLOCAR AQUI LA FRASE QUE SIGUE AL CURSOR';

font = 'Verdana,Arial';

size = 2;

color = 'black';

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>

Angry Birds

Hola, les quiero recomendar este excelente y entretenido juego disponible gratuitamente en versiones DEMO y también para todos los usuarios deCHROME y Facebook, se instala muy fácilmente y su jugabilidad es super sencilla.

Para instalarlo en CHROME ingresa al enlace. Si tienes una cuenta abierta de gmail, lo puedes instalar inmediatamente, si sólo ves "Acceder" deberás ingresar a tu cuenta de gmail para realizar la instalación.

« Download Angry Birds Space PC - the game - Demo »
Angry Birds PC, Android y Apple
Angry Birds Facebook
Angry Birds Chrome

Actualización:
Para los usuarios de Google + no se muestra tanta publicidad como en la versión para Chrome.

Gracias, espero que lo disfruten.

Microsoft Flight

Desde el 2006 Microsoft no sacaba un Simulador de vuelo (Flight Simulator X) y ahora su nuevo producto, el Microsoft Flight se puede descargar gratuitamente

Se puede jugar con los controles/mandos de la XBOX 360

Requerimientos mínimos:

CPU: Dual Core 2.0 GHz

GPU: Tarjeta gráfica 256 MB compatible con DirectX 9

D.D: 10 GB de espacio disponible

S.O : WinXP SP3 o superior

RAM: 2 GB

Hardware Recomendado:

CPU: Dual Core 3.0 GHz

GPU: ATI Radeon HD 5670 1024 MB o NVIDIA GEFORCE 9800 GT 1024 MB o su equivalente.

D.D: 30 GB de espacio disponible

S.O : Win7 SP1 64-bits

RAM: 6 GB

Descargar Microsoft Flight

Espero que esta información les sea muy útil.

Gracias.

Simulador de vuelo gratuito, simulador de vuelo gratis para windows 7, descargar simulador de vuelo gratuito, simulador de vuelo moderno, simulador de vuelo para PC avanzada, descargar gratis simulador de vuelo.

Comentarios de facebook en blogger

Es recomendable que si se van a usar los comentarios desde facebook, se oculten los de blogger desde la configuración y se use solo un método para publicar comentarios. Gracias.

Lo primero que se debe hacer para poner la caja de comentarios en una entrada a través de facebook es conseguir su código, para ello, deben ir a esta página Aplicaciones para Facebook Recuerden que todo el procedimiento se debe hacer con una cuenta de usuario (El usuario de la cta de sus páginas de facebook).

Crear el código es muy sencillo, introducen la URL de su página, luego el número de comentarios que quieren que sean visibles, el ancho de la caja de los comentarios, y el color (claro u oscuro), luego hacen clic sobre el botón "Get Code" (Obtener el código) y listo.

Ahora, el que nos interesa es el primero, uno largo, ya que el segundo debemos cambiarlo, porque si lo dejamos como viene nos saldrá un mismo comentario en todas las entradas, y además se agregarán comentarios de otras páginas que se hayan realizado en la fecha en la que se publicó el tema.

El primer código debemos colocarlo debajo de la etiqueta:

crtl + f: el buscador
------------------------------

<body>

<body expr:class='"loading" + data:blog.mobileClass'>

------------------------------

La ruta sería: Plantilla / Editar HTML

Ahora como les comenté anteriormente, vamos a cambiar el segundo código, usen este: [más adelante está con el código condicional para que la caja de comentarios se muestre solo en las entradas si lo prefieren así].

</div>

En amarillo está el color, pueden dejar dark para oscuro o light para claro, en verde está el número de comentarios, y en rojo está el ancho de la caja de comentarios.

Pero debemos agregar un código más para que los comentarios se vean solo en las entradas o temas específicos, ya que si lo dejamos así como está, el código aumentaría el tiempo de carga de la página principal en 1 o 2 segundos. El código final quedaría así:

------------------------------

<b:if cond='data:blog.pageType == "item"'>

</div>

</b:if>

------------------------------

Este código debemos colocarlo debajo del código donde se encuentra ubicada la siguiente parte, les muestro varias formas como puede salir su inicio o primera línea, con las imágenes de más adelante se guiarán mejor:

------------------------------

<div class='post-share-buttons'>

<div class='post-share-buttons goog-inline-block'>

<div class='post-share-buttons goog-inline-block' style='padding:0 0 0 1px;margin:0;'>

------------------------------

La ruta sería: Plantilla / Editar HTML

Video tutorial Nuevo diseño Plantilla de Blogger

Pueden colocar en el buscador (Control + F): post-share-buttons
y verán opciones del lugar donde podría estar este código, la mayoría de veces sale en la parte del "quick edit pencil" pero también puede salir en otra, como: <div class='post-footer'> eso depende de la plantilla. Con las imágenes lo entenderán mejor ;)

Páginas