PCZ: Dominá tu Blog!

Descuentos en dominios propios para el BLOG!

2013-05-16T15:49:00.001-07:00

Ya hace unas semanas te contamos como tener un dominio propio en tu blogger, o se un tusitio.com y no un tusitio.blogspot.com, en ese momento te contamos que el cambio de nombre tiene un costo aproximadamente de 10 dólares, precio que considero que vale la pena invertir si quieres tu blog :)

Hoy les dejo un cupón para que consigan los dominios a sólo 5.99 dólares!

La verdad vale la pena aprovechar ya que se trata de un muy buen descuento! Para acceder a este descuento al momento de pagar introduce el siguiente cupón:

buythedomain

y verás como se aplica el descuento a tu compra al instante!

Recomiendo aprovechar ahora, pues no se cuanto durará este descuento.

Tutorial para configurar el dominio | Comprar dominio ahora

Cambiar .blogspot.com por .COM o .net!

2013-02-17T17:26:00.001-08:00

Seguro que ya estás aburrido de tu blog se llame minombre.blogspot.com y te encantaría que se llame algo así como minombre.com o minombre.net o .org ¿Queda mucho más profesional no?

Hoy te enseñaré, lo más más detallado posible, como realizar el cambio de dominio.

Primero algunas ventajas de tener un .com o cualquier otro dominio propio.

El nombre es tuyo, ya deja de pertenecer a Google y jamás te lo podrá quitar.
Para todos los países tendrá el mismo nombre, ya no tendrás un blogspot.com.ar y un blogspot.com.es, etc.
Es más corto, fácil de recordar y mucho más profesional
Puedes pasarte a otra plataforma, como wordpress, sin que tu blog sufra modificaciones.

Ahora vamos con el procedimiento:

1) Elegir el nombre del dominio: Puedes elegir el mismo nombre de tu blog, por ejemplo si se llama mismanualiades.blogspot.com puedes pasarte a mismanualidades.com ¿Genial, no? Pero aquí hay puede haber algunos pequeños inconvenientes si a alguien ya se le ocurrió es nombre, si otra persona tiene ese nombre de sitio debes elegir otro, o bien optar por un .net .org .info .biz etc.

2) Acceder al dominio:

Ingresar a algún sitio que venda dominios, el que recomiendo es namecheap.com que es muy fácil de configurar y nunca tuvo problemas de ningún tipo.

Aquí debes verificar que tu nombre esté disponible o probar otros que te gusten

3) Comprar el dominio: Sí, estos nombres tienen muchas ventajas pero el tema es que hay que pagar por ellos, igual no te preocupes, pues no son caros, salen al rededor de 10 dólares por año por lo que vale la pena. Los puedes pagar por Paypal o por tarjeta de crédito entre otros. Si no tienes dinero, no te preocupes, también a esto hay solución, puedes acceder a Monedero Web y aprender a ganar dinero con tu blog y recibir los pagos en tu paypal, seguro que en menos de un mes ya habrás logrados tus 10 dólares!

4) Configurar tu nuevo nombre: Esta parece ser la parte más larga, pero no lo es, sólo te llevará unos minutos :)

Lo primero es en tu blog, entrar a Configuración > Básico > Publicación y damos click en + Añadir un dominio personalizado.

Ahí ponemos nuestro dominio con las WWW, por ejemplo:
www.divertext.com

En donde dice "¿Quieres utilizar un host para los archivos que faltan?" lo dejamos en No, damos click en Guardar y nos aparecerá un mensaje de error.

Ahora vamos a nuestra cuenta de namecheap.com...

En el panel principal hacemos clic sobre nuestro dominio
Luego clic en AllHostRecord (del menú lateral)
Y aquí debemos realizar las configuraciones.

En la imagen se muestran las lineas que se deben agregar y una que viene por defecto que debes eliminarla. Has clic en la imagen para verla en más grande.

En la sección que aparece recuadrada es donde debes pegar el código de error apareció en blogger.

En el siguiente video se puede ver el tutorial paso a paso:

Ahora sí, regresa a la ventana de Blogger y dale nuevamente Guardar, esta vez no te marcará ningún error.

Una vez que se guardó marca la casilla que dice:

Redireccionar tublog.com a www.tublog.com

Guarda los cambios de nuevo.

A partir de ese momento el dominio ya está configurado y debe estar funcionando correctamente, en caso de que no fuera así espera unos minutos u horas.

5) Esperar un rato y disfrutar! Cómo se dijo antes, luego de realizado este procedimiento pueden pasar varias horas hasta que tu nuevo nombre empiece a funcionar, en este tiempo se propaga información de tu cambio de nombre, por lo que a veces lleva más tiempo y otras menos.

Esto es todo, espero que esta información les sea de utilidad!

Muy pronto les traeré más tutoriales!

Truco HOJAS que caen por el BLOG!

2013-01-07T13:58:00.000-08:00

En varios países actualmente se está en verano, eso significa que pronto vendrá el otoño y para adelantarnos y preparar el blog para esta estación del año les dejaré un truco para que caigan hojas amarillas de árboles desde arriba hacia abajo de tu blog blogger.

Para agregar este efecto has lo siguiente:

newObject("http://lh5.googleusercontent.com/--jcOdbfXsBs/UGS2U_spSLI/AAAAAAAADCU/G-4XZ0mSEHg/s100/hoja1.png",29,15);
newObject("http://lh5.googleusercontent.com/-aE24R5QmbE4/UGS2U_hZj0I/AAAAAAAADCM/7Hb18sy3qfo/s100/hoja2.png",27,23);
newObject("http://lh6.googleusercontent.com/-9H8JyoZ6j3g/UGS2U2aOamI/AAAAAAAADCQ/6zY7uKgyV2A/s100/hoja3.png",46,15);
newObject("https://lh3.googleusercontent.com/-OhuXMSqpELQ/UGS2Vq8Qf0I/AAAAAAAADCg/UTCK1YQUZqA/s100/hoja4.png",36,33);
function winSize(){winWidth=(moz)?window.innerWidth:document.body.clientWidth;winHeight=(moz)?window.innerHeight:document.body.clientHeight;}
function fallObject(num,vari,nu){
objects[num]=new Array(parseInt(Math.random()*(winWidth-waft)),-30,(parseInt(Math.random()*waft))*((Math.random()>0.5)?1:-1),0.02+Math.random()/20,0,1+parseInt(Math.random()*fallSpeed),vari,fallObjects[vari][1],fallObjects[vari][2]);
if(nu==1){document.write(''); }
}
function fall(){
for(i=0;i<numObjs;i++){
var fallingObject=document.getElementById('fO'+i);
if((objects[i][1]>(winHeight-(objects[i][5]+objects[i][7])))||(objects[i][0]>(winWidth-(objects[i][2]+objects[i][8])))){fallObject(i,objects[i][6],0);}
objects[i][0]+=wind;objects[i][1]+=objects[i][5];objects[i][4]+=objects[i][3];
with(fallingObject.style){ top=objects[i][1]+winOffset+"px";left=objects[i][0]+(objects[i][2]*Math.cos(objects[i][4]))+"px";}
}
setTimeout("fall()",31);
}
var objects=new Array(),winOffset=0,winHeight,winWidth,togvis,moz=(document.getElementById&&!document.all)?1:0;winSize();
for (i=0;i<numObjs;i++){fallObject(i,parseInt(Math.random()*fallObjects.length),1);}
window.onresize=winSize;fall();
//]]>
</script>

Y luego ve a diseño > Edición HTML y pegas el código justo antes de </head>

Y listo ya tienes estas hojitas callendo en tu página!

Si quieres que caigan otras cosas en lugar de hojas, busca cerca del principio del código líneas como esta:

http://lh5.googleusercontent.com/--jcOdbfXsBs/UGS2U_spSLI/AAAAAAAADCU/G-4XZ0mSEHg/s100/hoja1.png

y sutitúyelas por la dirección otras imágenes que tu quieras, puedes hacer caer lo que más te guste!

Crear formularios para Blogger

2012-06-09T14:39:00.001-07:00

Dado los pedidos de muchos visitantes que preguntan como crear un formulario de contacto para Blogger, como el que se puede ver en contactar con Pczeros en el que se puede crear un mensaje que luego de pulsar el botón "enviar" este llega directamente al correo electrónico del destinatario.

Crear un formulario de cotacto así es muy sencillo y no necesitas saber programación ni ningún otro conocimiento extra, pues hay varias páginas que se dedican a crear este tipo de formularios y luego fascilitan un código para poder insertarlos en tu web.

El sitio en el que se creó el formulario que se puede ver en PCZEROS es EmailMeForm.com, pero hay otros sitios que realizan la misma tarea como foxyform.com, formsite.com o formlogix.com entre otros.

En cualquiera de ellos el prosedimiento es similar, aunque foxiform es el más sencillo de todos pues no es necesario registrarse en la web y los envíos y formularios son ilimitados, aunque no cuenta con muchas opciones de personalización de los mismos.
EmailMeForm y los otros sitios son muy completos, aunque tienen limitaciones en las versiones gratuitas por ejemplo de 100 envíos al mes, creación de 4 formularios como máximo, etc., ésto se debe a que estos sitios ofrecen además de la versión grutuita (limitada) un versión paga en la que estas limitaciones no existen.
Aunque si tu blog no tiene miles de visitas diarias, seguro que con 100 envíos al mes es más que suficiente.

No haremos un tutorial paso a paso de como crear los formularios, porque considero más enriquesedor que cada uno vaya probando las webs enlazadas y viendo las virtudes y contras de cada una y así poder elegir la que mejor se adapte a las necesidades de cada blog. Pero en todas ellas luego de configurar los campos del formulario se llega a un código que debes pegar en el lugar que quieres que se muestre el formulario, que puede se en la barra lateral (en un gadget) o bién en una nueva página como está en pczeros.

Esperando que la información sea de utilidad, les digo hata el próximo post!

Código saltar FRAME en Google Imágenes !

2012-05-16T15:03:00.005-07:00

Si utilizas este código es posible que luego no puedas cargar tu página de estadísticas o el editor de diseño en blogger. Si te sucede esto debes precionar escape ni bien la página empice a redireccionar para poder entrar a los paneles de blogger. A pesar de esto el código sigue funcionando perfectamente.

Una de las fuentes de tráfico para tu blog es Google Imagenes, es decir de gente que busca imágenes y que accede a tu sitio para visualizar esa imagen. Pero si sueles buscar imágenes en Google verás que cuándo uno accede a un blog que contiene una imagen se ve de la siguiente forma:

Como se puede ver en la imagen anterior (es una de las que aparecen en Google al buscar PCzeros) en realidad la gente no accede a tu blog, ya que copia o mira la image y se va, esto es porque la imagen queda en un frame (o sea un rectangulo en el cento de la pantalla con la imagen y el blog pálido detrás).

No sería mejor que la gente que acceda a tu blog por una imagen que le gustó realmente acceda y no que Google los frene con su frame antes de entrar, o sea que al hacer clic en la misma imagen anterior se acceda a una página cómo esta:

Código saltar frame en tráfico de Google Imagenes

Si aún no lograste entender de que se trata este truco para el blog o página web, busca el nombre de tu blog en Imágenes de Google y has clic en alguna imágen de tu blog, luego pega el código y repite el procedimiento.

Pasar de la página que se ve al buscar una imagen en la imagen 1 a la que se ve en la imagen 2 es muy sencillo, sólo debes copiar y pegar el siguiente código justo después de <head> (en diseño > edición HTML)en tu panel de Blogger

Con este simple código lograrás que todo el tráfico que viene de la busqueda de imagenes entre a tu blog, lo que es un aumento significativo de las visitas si tienes un blog con varias imágenes bien pocionadas.

Mensaje animado con AUDIO para el Blog

2011-12-04T03:59:00.002-08:00

Mensaje animado con AUDIO para el Blog!: Googleando me encontré con este divertido gadget para tu blog llamdo Woki, la verdad que me pareció bien interesante y decidí compartirlos con todos ustedes, sin más palabras delen play al gadget de abajo y comprenderán de que se trata!

Les cuento que tanto el personaje como el fondo, la ropa, los accesorios, color de piel, voz, etc son totalmente personalizables así que se pueden entretener un buen rato probando distintas opciones!

El audio se puede teclear o bien grabarlo o subirlo desde tu PC, pero a mi la primera opción me parece la más divertida.

Luego que teminen la personalización obtendrán un código para insertar este gadget en su blog (Ayuda: ¿Dónde pego el código HTML?)

Esto es todo y si les gustó Woki... comenten y dejen el enlace a sus wokis!

Menu flotante lateral para Blogger

2011-08-19T14:53:00.000-07:00

Menú flotante lateral para Blogger: A veces no es suficioente con agregar un menú superior, pues hay otras cosas que queremos enlazar. En este caso les dejo el código para colocar un menú lateral flotante para el blog, es decir que a pesar de hacer scroll en la página el menú permanecerá sin moverse en su Blogger.

Este menú lateral flotante tiene 5 botones que permiten al visitante: ir a la página de inicio o establecer como página de inicio (dependiendo del navegador), agregar una entrada a favoritos, pasar a la vista dinámica del blog, pasar a la vista para móviles y acceder al feed del blog.
Si sabes de HTML puedes agregar más botones o cambiar las imágenes por otras.

El código es el siguiente:

Pueden probarlo al lado izquierdo de este blog.

Notas:

* El código debe estar ubicado justo antes de la etiqueta </body> (ir a Diseño + Edición HTML y buscarla en el código [Ctr + F para buscar rápidamente])

* Debes cambiar en el Código todos los lugares que dice pczeros.blogspot.com por la dirección de tu blog

* "Agregar a favoritos" funciona en Firefox e Inernet Explorer

* Para que las vistas dinámicas funciones debe de estar habilitado el Feed completo del blog (Configuración + Feed del Sitio + Permitir feed del blog[Completo])

Entradas relacionadas con Miniaturas para Blogger

2011-07-16T19:28:00.000-07:00

Un gadget muy útil para aumentar la cantidad de páginas vistas es añadir el gadget de entradas relacionadas con miniaturas (thumbnails) a Blogger Añadir el gadget de entradas relacionadas con miniaturas a Blogger es muy sencillo y configurable, lo puedes hacer en dos simples pasos:

1)

En diseño >> Edición HTML selecciona la casilla "Expandir plantillas de artilugios" y pega el siguiente código justo antes de </head>

2)

Ahora búsca la siguiente línea: <div class='post-footer-line post-footer-line-1'> y pega justo debajo el siguiente código y guarda los cambios (si no está prueba con esta otra: <p class='post-footer-line post-footer-line-1'>):

<b:if cond='data:blog.pageType == "item"'> <div id='related-posts'> <b:loop values='data:post.labels' var='label'> <b:if cond='data:label.isLast != "true"'> </b:if> <b:if cond='data:blog.pageType == "item"'> <script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels_thumbs&max-results=6"' type='text/javascript'/></b:if></b:loop> <script type='text/javascript'> var currentposturl="<data:post.url/>"; var maxresults=5; var relatedpoststitle="Entradas relacionadas"; removeRelatedDuplicates_thumbs(); printRelatedLabels_thumbs(); </script> </div><div style='clear:both'/> </b:if>

Para no recargar la portada del blog las entrdas relacionadas se ven sólo en las entradas individuales.

Notas:

* Si quieres cambiar el número de post relacionados busca la siguiente línea en el código: var maxresults=5 y remplaza 5 por el número de entradas que quieres mostrar.

* Puedes modificar en donde dice var relatedpoststitle="Entradas relacionadas";/ cambiando "Entradas relacionadas" por el texto que tu quieras.

* Tienes que tener etiquetas en tus entradas para que el gadget funcione.

* El código JavaScript que hace que el gadget funcione es el siguiente, si quieres respaldarlo o subirlo a tu host lo puedes descargar desde aquí.

Actualización:

25/7/11: Modificación del código para hacerlo compatible con más plantillas de Blogger. Si ya has probado el código y no te ha dado resultado te recomiento que lo intentes ahora con los nuevos cambios.

Imagen fija en la esquina de Blogger

2011-07-09T15:41:00.000-07:00

Otro gadget interesante para tu blog es el de colocar una imagen fija en la esquina de tu Blogger (o sea que al hacer scroll la imagen no se mueva), la función que le puedes dar puede ser la que gustes, por ejemplo un saludar a los visitantes, invitarlos a que realicen un comentario, promover una nueva sección del blog, vincular tu Twitter, etc, etc.

Dejo algunos de ejemplo y el código para colocarlos, pero recuerda que este gadget es totalmente personalizable con la imagen que gustes.

http://www.blogger.com/img/blank.gif Notas:

* El código se pega en HTML/JavaScript (si necesitas ayuda en este punto lee cómo agregar gadgets a blogger)

* Para cambiar la imagen, tomando por referencia que utilizaste el primer código cambia donde dice: https://lh5.googleusercontent.com/-d7Y5RZ74SCw/ThzNaf13GWI/AAAAAAAAAWk/fTtqhYsXYco/s288/if-emoticoment.gif por la url de donde está tu imagen. Para aprender a subir imágenes lee: Cómo subir archivos para Blogger

* Para cambiar el enlace a donde irá el visititante una vez que ha hecho clic en la imagen cambia donde dice: http://pczeros.blogspot.com/2011/07/imagen-fija-esquina-blogger.html por la dirección que gustes.

* Puedes cambiar la pocición cambiando la parte del código que pegaste (en donde dice bottom:0px;right:0px;)por los siguientes valores según corresponda:
Esquina inferior izquierda: bottom: 0px; left: 0px;
Esquina inferior derecha: bottom: 0px; right: 0px;
Esquina superior izquierda: top: 0px; left: 0px;
Esquina superior derecha: top: 0px; right: 0px;
También puedes usar valores intermedios si lo deseas, por ejemplo: botton:0px; left: 350px;

Bueno por hoy es todo, espero les sea de utilidad.

Gadget pajaro de Twitter volando por el Blogger

2011-06-25T08:03:00.002-07:00

Te gustaría tener el pájarito de twitter volando por todo el blog, es muy sencillo hacerlo! Simplemente debes agregar el Gadgets del pajaro de Twitter y lo tendrás volando por todo tu blogger

Simplemente copia el código del pajaro de twitter volando y pegalo en tu Blogger o web. En blogger sigue el siguiente tutorial para agregarlo: Agregar gadget a Blogger

Si quieres vincularlo con tu página en twitter debes cambiar la siguiente url del código: http://pczeros.blogspot.com/2011/06/gadget-pajaro-twitter-volando-blogger.html por la url de tu twitter.

Botón imprimir página para Blogger

2011-06-19T06:30:00.001-07:00

Botón imprimir pagina para blogger: Si tienes un blog en el que consideras que a los visitantes les quedará más cómodo imprimir la página para luego leerla con tranquilidad, un blog con mucho texto, un blog de poemas o canciones, o algún otro tipo de blog que creas necesaria esta función puedes agregar el botón imprimir página para Blogger (Es un pequeño código JavaScript por lo que también es válido para cualquier blog o página web)

Su funcionamiento muy simple: Al hacer clic en el botón se abre la ventana de la impresora y el visitante está a un clic de imprimir tu página!

Para agregar el botón imprimir a blogger buscar la siguiente linea en Diseño >> Edición HTML (con artilugios expandidos:

<div class='post-body entry-content'>

y pegar debajo algunos de los siguientes códigos según el diseño que elijas:

Notas:

* En este caso el botón imprimir para blogger quedará en la parte superior y a la derecha de la página pero puedes colocarlo en otro lugar si lo deseas.

* Está configurado para que se muestre sólo en las entradas y no en la portada del blog o en las páginas de archivo pues en estas no tendría tanta utilidad.

Botón +1 para Blogger

2011-06-04T14:41:00.000-07:00

El botón +1 es el nuevo botón social que se ha aparecido, el botón para compartir +1 es muy parecidos a otros botones como el de Facebook o el de Twitter, pero el BOTÓN +1 es de Google, lo que lo hace muy importante. En este post te enseñaré a colocar el botón +1, usando el código del botón +1 para Blogger.

Se dice que el botón +1 para Blogger también contribuirá el posicionamiento de las páginas en Google, de acuerdo a la cantidad de votos que estas reciban, por lo que este es otro motivo más para agregar el botón +1 a tu blog.

Este código debes agregarlo inmediatamente después de la etiqueta <head> de la plantilla de tu blog
(diseño >> edición HTML)

Código para agregar el Botón +1 al Blog Blogger u otro. (Este código debes ubicarlo en el lugar que quieres que se vea el botón+1)

Los botones +1 de arriba son funcionales así puedes probarlos para ver como funciona (y de paso votas este post!)

Notas:

* Si quieres agregar el botón +1 en la parte superior de los post, pega el código del botón correspondiente luego de <div class='post-body entry-content'> (Diseño >> Edición HTML >> Expandir artilugios)

* Si prefieres el botón +1 en la parte inferior de los post busca: <div class='post-footer'> y pega el código debajo.

* Si quieres agregar el botón +1 en la Barra lateral debes ir a diseño y agregar nuevo Gadgets y elegir HTML/JavaScrip y pegar allí el código.

Puntero con texto animado que lo sigue en Blogger

2011-05-29T16:15:00.000-07:00

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

/* 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

2011-05-12T05:24:00.000-07:00

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:

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.

Cambiar el color del texto seleccionado en el blog

2011-03-27T15:47:00.000-07:00

Hola amigos pczeros, en este post les explicaré como cambiar el color del texto seleccionado. Habrán notado que al seleccionar cualquier texto para copiar de una página web el fondo queda color gris o negro dependiendo del navegador.

Este color se puede cambiar gracias a ::-moz-selection
Pero antes de continuar mejor ver algunos ejemplos, selecciona los siguientes textos para probar:

Texto seleccionado fondo rojo y letra blanca

Texto seleccionado fondo amarillo y letra azul

Texto seleccionado fondo verde y letra negra

El código para agregar este efecto lo tienes que pegar justo antes de:

]]></b:skin> (en blogger ir a "Diseño", "Edición HTML" y allí buscarlo)

y es el siguiente:

*::-moz-selection { background:#FF0000; color:#ffffff; }

#FF0000 Cámbialo por el código del color que quieres de fondo
#ffffff Cámbialo por el código del color que quieras de texto

Esto es todo espero les sea de utilidad para personalizar sus blogs.

Notas: * Sólo funciona en Firefox, esperemos muy pronto también lo haga en Internet Explorer. * Para obtener códigos de colores lee codigo de colores RGB

Botón para que enlacen nuestro Blogger

2011-01-26T06:19:00.000-08:00

Botón para que enlacen nuestro blog en blogger. Hace un tiempo me dijaron un comentario sobre como se hacía para tener un botón con una imagen y que el el visitante al hacer clic en él pueda directamente enlazar su blog al nuestro.

Bueno, sin tantas palabras, al gadget que me refiero es al siguiente:

Tómate tu tiempo para probarlo y si te gusta este sistema para que otros blog te enlacen copia el siguiente código y agrégalo a tu blog (si tienes problemas en este paso lee como agregar gadgets a blogger:

Luego que lo pegaste debes de modificar algunas partes del código para que se adapte a tu blog:

1) http://1.bp.blogspot.com/_Rdr2fyjWN00/TBowIzxddEI/AAAAAAAAALQ/suX-3R8U7pA/s1600/125pcz.jpg es la ruta de la imagen que se mostrará. Cambial por la url de la imagen que quieras mostrar. Si tienes problemas para subir una imagen y obtener su url lee: como subir imágenes a googlesites. Ten encuenta que esta URL aparece dos veces en el código.

2)http://pczeros.blogspot.com debe ser sustituído por la url de tu blog

3)PCZEROS sutitúyelo por el nombre de tu blog

4)"Enlázanos" es el texto que se muestra en el botón, si quieres cambiarlo hazlo.

5)"Blog recomendado" es el título que se mostrará en el gadget cuando otro blog te enlace, puedes cambiarlo si deseas.

Esto es todo, espero les haya servido este nuevo gadget que te trae pczeros para tu blog!

Descargar fondos para Blogger

2011-01-06T06:32:00.000-08:00

Descargar fondos para Blogger. Desde hace unos meses blogger tiene la posibilidad de acceder al "Diseñador de plantillas" (diseño >> diseñador de plantillas), desde aquí tu puedes ir a la pestaña fondo y luego hacer clic en cambiar fondo para justamente cambiar el fondo de tu blog.

Aquí puedes encontrar varios diseños divididos en categorías, pero también es probable que ninguno se ajuste a tus gustos, es por este motivo que he decidido realizar una recopilación de fondos para blogger para todos los gustos, los mismos están muy bien diseñados y fueron realizados por bloggers amigos.
Para subir tu propio fondo debes hacer clic en "subir imagen" y luego seleccionarla desde tu PC y listo. Luego puedes probar dejando la imagen fija, alineándola a la izquierda, o a la derecha, o... bueno, puedes probar distintas opciones a ver cuál se ajusta mejor. En la imagen anterior puedes ver el botón para subir la imagen que mencionaba al principio del párrafo.

Algunos de los diseños los puedes ver en la siguiente imagen (clic para agrandar la imagen):
Los fondos para blogger son varios y hay para todo tipo de blog y los puedes descargar desde el siguiente link:

Descargar

Espero les gusten, luego voy a ir agregando más diseños.

Fuegos artificiales en Blogger

2010-12-07T05:42:00.000-08:00

Fuegos artificiales en Blogger: Estaba esperando estar más próximo a las fiestas de fin de año para traer este gadget para Blogger. Se trata de un código java script que hace que en la pantalla se vean fuegos artificiales.

Ideal para las fiestas de fin de año o cualquier otro acontecimiento que quieras festejar.

El código es el siguiente:

var dx, xpos, ypos, bangheight;
var Xpos=new Array();
var Ypos=new Array();
var dX=new Array();
var dY=new Array();
var decay=new Array();
var colour=0;
var swide=800;
var shigh=600;
function write_fire() {
var b, s;
b=document.createElement("div");
s=b.style;
s.position="absolute";
b.setAttribute("id", "bod");
document.body.appendChild(b);
set_scroll();
set_width();
b.appendChild(div("lg", 3, 4));
b.appendChild(div("tg", 2, 3));
for (var i=0; i<bits; i++) b.appendChild(div("bg"+i, 1, 1));
}
function div(id, w, h) {
var d=document.createElement("div");
d.style.position="absolute";
d.style.overflow="hidden";
d.style.width=w+"px";
d.style.height=h+"px";
d.setAttribute("id", id);
return (d);
}
function bang() {
var i, X, Y, Z, A=0;
for (i=0; i<bits; i++) {
X=Math.round(Xpos[i]);
Y=Math.round(Ypos[i]);
Z=document.getElementById("bg"+i).style;
if((X>=0)&&(X<swide)&&(Y>=0)&&(Y<shigh)) {
Z.left=X+"px";
Z.top=Y+"px";
}
if ((decay[i]-=1)>14) {
Z.width="3px";
Z.height="3px";
}
else if (decay[i]>7) {
Z.width="2px";
Z.height="2px";
}
else if (decay[i]>3) {
Z.width="1px";
Z.height="1px";
}
else if (++A) Z.visibility="hidden";
Xpos[i]+=dX[i];
Ypos[i]+=(dY[i]+=1.25/intensity);
}
if (A!=bits) setTimeout("bang()", speed);
}

Para agregarlo: muy sencillo, vás a diseño, agregar un nuevo gadgets, HTML/JavaScript y pegas el código. Si aún te quedan dudas puedes leer: cómo agregar gadgets a blogger.

Si lo deseas también puedes modificar algunas cosas como la intensidad de los fuegos artificiales, su velocidad e inclusive los colores. Para este último punto puedes ver códigos de colores RGB para obtener los distintos códigos de colores.

Y si en estas fiestas en tu país nieva, aquí el gadget de nieve para el blog.

Es todo, espero les guste.

Botón de Facebook para Blogger

2010-12-01T06:55:00.000-08:00

Hace tiempo que Facebook es la red social más importante del mundo y por ello es importante que incorpores en tu blog un botón para que todos aquellos que les gusta lo que escribes pueda recomendar tu post o blog en Facebook.

Antes de comenzar te recomiendo que compartas este post en Facebook, usando el botón de arriba para probar como funciona. Luego sigue con el siguiente paso.

Para agregar el botón de Facebook a blogger es muy sencillo.

Sólo hay que ir a Diseño, Edición HTML (marcar casilla expandir artilugios) y buscar la siguiente línea:

Para buscar un código rápidamente puedes usar ctrl+F

y justo debajo agregar:

Luego guada los cambios y listo!

Ahora los visitantes podrán compartir tus entradas en Facebook con un sólo clic!

El gadget instalado quedará como se muestra a continuación:

Igualmente lo puedes ver en funcionamiento en este mismo blog.

Espero les guste este nuevo gadget! y gracias por visitar PCZEROS!

Cursor con destellos en Blogger

2010-11-01T06:17:00.000-07:00

Anteriormente hemos visto como cambiar el cursor en Blogger, ahora les presento un scipt para que al mover el cursor se generen pequeños destellos. (Puedes mover el cursor en una parte oscura del blog y ver como funciona)

Para agregar este efecto al cursor es muy sencillo, sólo debes copiar el siguiente código y pegarlo en tu blog:

El código va pegado en diseño > añadir gadgets > Html/JavaSript.

Si no encuentras esta sección acá te dejo un tutorial con imágenes sobre como agregar gadgets a blogger

Entrada al Azar para Blogger

2010-10-01T14:40:00.000-07:00

Una forma de que los visitantes vean aquellas entradas que talvés publicaste hace tiempo y muchos no vieron es colocando un botón que al hacer clic en él muestre una entrada al azar de todos las entradas que tienes en tu blog.

Puedes probarlo a continuación:

Ver una entrada al azar

El código para agregar este gadget de entradas al azar para blogger es el siguiente:

El código lo copias y lo pegas donde quieras que aparezca el gadget, si quiere agregarlo a la sidebar de tu Blogger y no sabes como lee: Como agregar gadgets a blogger Esto es todo, espero les resulte útil.

Lista de entradas al azar en Blogger

2010-09-01T15:39:00.000-07:00

Ahora puedes mostrar una lista con entradas al azar en Blogger, ésto te servirá para que tus visitantes tenga acceso a entradas que tal vez hace tiempo publicaste y no todos vieron o recuerdan.

El gadget selecciona al azar algunas de esas entradas y la muestra en una lista, puedes ver un ejemplo aquí:

El código para agregar el gadget de entradas al azar en Blogger es el siguiente:

<div id="random-posts">
<script type="text/javascript">
function getRandomPosts(json) {
var maxEntries = 5;
var numPosts = json.feed.openSearch$totalResults.$t;
var indexPosts = new Array();
for (var i = 0; i < numPosts; ++i) {
indexPosts[i] = i;
}
indexPosts.sort(function() {return 0.5 - Math.random()});
if (maxEntries > numPosts) {
maxEntries = numPosts;
}
var container = document.getElementById('random-posts');
var ul = document.createElement('ul');
for (i = 0; i < maxEntries; ++i) {
var entry = json.feed.entry[indexPosts[i]];
var li = document.createElement('li');
var a = document.createElement('a');
a.title = entry.title.$t;
for (var j = 0; j < entry.link.length; ++j) {
if (entry.link[j].rel == 'alternate') {
a.href = entry.link[j].href;
break;
}
}
a.appendChild(document.createTextNode(entry.title.$t));
li.appendChild(a);
ul.appendChild(li);
}
container.appendChild(ul);
}
</script>
<script src="http://el-nombre-de-tu-blog.blogspot.com/feeds/posts/summary?alt=json-in-script&callback=getRandomPosts&max-results=999" type="text/javascript"></script>
</div>

Para agregar el gadget copia el código y pégalo en tu blog ¿No sabes donde? Lee ésto

Para que quede en funcionamiento cambia donde dice: el-nombre-de-tu-blog por el nombre de tu blog, en mi caso sería pczeros. También puedes cambiar donde dice var maxEntries = 5; cambiando el 5 por el número de entradas que quieres que se muestren.

Esto es todo, espero les guste!

Top 10 visitantes en Blogger

2010-08-01T16:28:00.000-07:00

Top 10 visitantes en Blogger: PCzeros te presenta este fabuloso gadget para que puedas crear un ranking de visitantes para tu blogger, sí, un top 10 de visitantes en Blogger.

¿Cómo funciona? Senicillo, cada vez que un visitante entra a tu blog con su cuenta de google abierta suma un punto, en base a estos punto se elabora el ranking.

A continuación una captura del ranking, como se veía hace unos días, también lo puedes ver en funcionamiento en la sidebar.

Para agregar el gadget es muy sencillo,

1) Entra a Blogger y ve a la pestaña "diseño"

2) Clic en "Agregar gadget"

3) Clic en "Añade tu propio"

4) Pega la siguiente URL de destino:

http://sites.google.com/site/pczeros/Home/RankingdevisitantesPCZ.xml

5) Clic en "Añadir por URL"

La siguiente imagen y la flecha azul te ayudarán si no sabes donde ir:
Eso es todo! Ya puedes disfrutar de este maravilloso ranking en tu blog!

Poner un indice en Blogger

2010-07-23T15:49:00.000-07:00

Poner un índice en Blogger es de gran utilidad para tu blog, pues en una sola página los visitantes podrán ver todo lo que tiene tu blog y además dividido en categorías.

Para agregar el índice en tu blog sólo copia el siguiente código y pégalo en una nueva entrada o página.

Una vez que pegues el código cambia donde dice ACA-EL-NOMBRE-DE-TU-BLOG por el nombre de tu blog.

Sólo esto y ya tienes un índice en tu blog. Este índice para blogger además tiene un sistema que detecta las nuevas entradas y les pone Nuevo! a su lado para que sean fácilmente indentificables.

Puedes ver un ejemplo de como queda funcionando aquí

Gadget visitantes recientes Blogger

2010-07-06T09:56:00.000-07:00

Gadget visitantes recientes Blogger: ¿Te gustaría tener las imágenes de los últimos que visitaron tu blog?
PCzeros te trae este fabuloso gadgets de visitantes recientes para blogger, se trata de un gadget que muestra los avatares de los últimos que visitaron tu sitio.
El gadget se ve como el de la imágen y además tiene distintas configuraciones.

Para agregar este gadget a Blogger:

1) Entrar a Blogger e ir a la pestaña diseño

2) Clic en Añadir un Gadget

3) Clic en Añade tu propio

4) Escribe la siguiente URL en el espacio que aparece

http://sites.google.com/site/pczeros/Home/ultimos-visitantes-pcz.xml

Listo ya tienes tu gadget pronto para esperar nuevas visitas!

Nota
Si sale un mensaje que diga que tiene caracteres no permitidos o que tiene errores recuerda que: Por defecto en el espacio donde va la URL aparece http:// el código que les dejé arriba ya tiene http:// por lo que deben de borrar el http:// que aparece por defecto para evitar que les quede http://http:// que es lo que hace que aparezca el mensaje de error.