Mostrando entradas con la etiqueta Blogger. Mostrar todas las entradas

Últimos post CORREDIZOS en Blogger!

Si has visto en algún blog de blogger que visitaste los últimos post que van pasando y cuando posicionas el mouse sobre uno de ellos se detiene y al hacer clic en ese lugar vas al post en cuestión sabrás de que te hablo y lo lindo que queda, si no es así no importa pues aquí debajo pudes ver un ejemplo de como funciona este gadget!

Ejemplo en funcionamiento:

Lo Último

Código para copiar y pegar donde desees que aparezca el gadget:

{
var blog_url = "http://pczeros.net";
var numero_post = 10; // Número de entradas a mostrar

}}</script>
<script type="text/javascript" src="https://web-archive.nli.org.il/National_Library/js_/http://yourjavascript.com/946415552/ticker.js"></script></div>
<div style="clear:both;"></div>
<script>
var _____WB$wombat$assign$function_____ = function(name) {return (self._wb_wombat && self._wb_wombat.local_init && self._wb_wombat.local_init(name)) || self[name]; };
if (!self.__WB_pmw) { self.__WB_pmw = function(obj) { this.__WB_source = obj; return this; } }
{
let window = _____WB$wombat$assign$function_____("window");
let self = _____WB$wombat$assign$function_____("self");
let document = _____WB$wombat$assign$function_____("document");
let location = _____WB$wombat$assign$function_____("location");
let top = _____WB$wombat$assign$function_____("top");
let parent = _____WB$wombat$assign$function_____("parent");
let frames = _____WB$wombat$assign$function_____("frames");
let opener = _____WB$wombat$assign$function_____("opener");
let arguments;

{
$(window).load(function() {
$('.marquee').marquee({
direction: 'left', // Dirección de la marquesina, usar left o right
duration: 25000, // Velocidad
pauseOnHover: true,
duplicated: true
});
});

}}</script>

Este gadget es super fácil de agregar, sólo debes copiar el código de arriba e insertarlo en tu blog, en cualquier lugar, donde tu quieras que se muestren los post corredizos. Lo más normal es crear un nuevo gadget Html/JavaScript y allí pegar el código y listo ya te quedará funcionando.

He probado visitar el sitio desde varios dispositivos como teléfonos móviles, desde una tablet barata e inclusive desde ordenadores con distintos sistemas operativos y les puedo decir que en todos funcionó sin problemas. Esto es posible dado que el código usa jquery y css3 en lugar de etiquetas ya obsoletas como marquee, haciendolo compatible con todos los dispositivos actuales.

Además es importante destacar que el código es muy personalizable, de hecho es muy recomendable que una vez que lo pegues en tu blog lo vayas leyendo y modificando a tu antojo, por ejemplo puedes cambiar el color de las letras, el color de fondo, el ancho, el alto, el número de entradas a mostrar, la velocidad con la que se mueve el texto, el sentido del movimiento (izquierda o derecha)y el tamaño de la letra!

Todo lo anterior es opcional, si quieres puedes dejarlo tal cual está, lo que si debes modificar obligatoriamente es poner la url de tu blog donde dice pczeros.net, allí debes poner la url de tu blog! y listo!

Qué disfrutes este gadget para tu blogger! Es todo amigos!

Imágenes y Videos en Comentarios de BLOGGER

8 comentarios

Muchas veces queremos decir algo y las palabras no nos son suficientes, hay sentimientos o sensaciones que se expresan mucho mejor con una imagen o un video. Por este motivo en este post te enseñaré a habilitar la función de poner imagenes y videos en los comentarios de tu blog!

Este truco es bastante bueno, saque la idea de un sitio de anuncios clasificados e investigando logré llegar a ver que podía funcionar correctamente en blogger.

Lo primero que tienes que hacer es agregar este código antes del cierre de la etiqueta body de tu plantilla:

{
//<![CDATA[
// Insertar imágenes y videos en los comentarios (ciudadblogger.com)
function InsertarImagenVideo(id) {
var IDelemento = document.getElementById(id),
sustituir = IDelemento.innerHTML;
sustituir = sustituir.replace(/\[img\](.[^\]]*)\[\/img\]/ig, "<img class='img-comentarios' src='$1'\/>");
sustituir = sustituir.replace(/\[video\]https:\/\/www\.youtube\.com\/embed\/(.*?)\[\/video\]/ig, "<iframe class='vid-comentarios' src='https://www.youtube.com/embed/$1'><\/iframe>");
sustituir = sustituir.replace(/\[video\](https:\/\/youtu\.be\/|https:\/\/www\.youtube\.com\/watch\?v\=)(.*?)\[\/video\]/ig, "<iframe class='vid-comentarios' src='https://www.youtube.com/embed/$2'><\/iframe>");
sustituir = sustituir.replace(/\[video\](http:\/\/youtu\.be\/|http:\/\/www\.youtube\.com\/watch\?v\=)(.*?)\[\/video\]/ig, "<iframe class='vid-comentarios' src='https://www.youtube.com/embed/$2'><\/iframe>");
sustituir = sustituir.replace(/\[video\](http:\/\/player\.vimeo\.com\/video\/)(.*?)\[\/video\]/ig, "<iframe class='vid-comentarios' src='http://player.vimeo.com/video/$2'><\/iframe>");
document.getElementById(id).innerHTML = sustituir;} InsertarImagenVideo('comment-holder');
//]]>

}}</script>
<style>

</style>

Con el simple hecho de agregar este código ya habrás habilitado la función de comentarios con imágenes y videos

Ahora para agregar una imágen o video en un comentario sólo debes hacer lo siguiente:

Imágenes:
[img]aqui-va-la-url-de-la-imagen[/img]

Videos:
[video]aqui-va-la-url-del-video-youtube-o-vimeo[/video]

Como vez, sólo debes de colocar la url del video o imagen entre las etiquetas y listo!

Una imagen del truco probado en este mismo blog:

A tener en cuenta:

* Este truco te funcionará solo si tu plantilla tiene habilitada la opción de comentarios anidados, o sea si luego de cada comentario te aparece la opción de responder. (Para habilitar esto ir a configuración >> otros >> Establecer feed "completo"
* Los comentarios se deben mostrar en la propia página, no en una ventana emergente para que este truco funcione.
* El agregar muchos videos o imágenes en los comentarios puede enlentecer un poco la carga de la página, pero vale la penta pues el resultado es genial.
* En cuanto a las imágenes puedes estar subida a cualquier sitio, pero los comentarios sólo pueden estar o en youtube o en viemeo para que se vean.

Pasar de BLOGGER a Wordpress (En 5 pasos!)

5 comentarios

Blogger es un exelente gestor de contenidos para tus blog, principalmente porque jamás "se cae" (siempre está online), es gratuito, puedes recibir infinidad de visitas y no tendrás problemas y puedes tener muchos blogs, entre otras venajas.

Pero... siempre hay un pero! Existe Wordpress, un gestor de contenido muchísimo más potente que blogger y que hará que tu sitio tenga muchas más visitas por sus posibilidades de optimización, además de poder adaptarlo a cualquier tipo de ideas, pues con wordpress instalado en un servidor web tienes acceso a modificar absolutamente todo!

Aquí procuro dejar lo más claro posible los pasos para pasar de Blogger a Wordpress:

1) Tener tu dominio propio: Aquí te explico como tener un dominio .com (leer primeros 3 pasos)

2) Contratar un hosting estable y seguro: Recomiendo Hostgator (con el cupón: x99offests consigues el primer mes a $0,01! y aquí tienes la lista completa de cupones hostgator para este mes) o Banahosting, también muy estable y con excelentes precios.

3) Una vez que tengas el dominio y el host listos, debes entrar al panel de tu dominio y apuntar las dns de tu dominio al hosting que compraste, estos datos te llegan a tu correo ni bien contratas el host.

4)Cambiados estos del dominio debes esperar a que sean aceptados. Este proceso no tarda más de 24 horas.

5)Ahora que ya pasó dicho tiempo, debes entrar al panel de control de tu hosting y elegir "autoinstaler" o "softáculus":

Una vez allí haces clic en "Wordpress" para instalarlo en tu sitio.

5)Una vez que alla finalizado la instalación ya puedes entrar a tudominio.com y verás algo así:

Desde allí podrás ingresar a tu sitio usando el usuario y contraseña que creaste en el paso anterior, cuando instalabas wordpress. Una vez que hallas ingresado debes dirigirt a "Tool" y desde allí tienes la opción de pasar todo tu Blogger a wordpress en unos segundos!

6) Listo, es todo! Revisa tu nuevo panel para ver todas las funciones que ofrese wordpress y acostumbrarte a tu nuevo entorno de trabajo.!

¿Te resulto algo complicado este procedimiento? No te preocupes, puedo hacer el trabajo por vos!

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

8 comentarios

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!

5 comentarios

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:

{
//<![CDATA[
// Fall v2.0 By MaxxBlade - http://www.maxxblade.co.uk/fall
var fallObjects=new Array();function newObject(url,height,width){fallObjects[fallObjects.length]=new Array(url,height,width);}
var numObjs=15, waft=100, fallSpeed=5, wind=-1;

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('<img id="fO'+i+'" style="position:absolute;z-index:9;background:none;border:0;padding:0;box-shadow:none;" src="'+fallObjects[vari][0]+'">'); }
}
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

17 comentarios

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 !

22 comentarios

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.

Google a actualizado el sistema para mostrar imágenes y es probable que este código ya no funcione. Pronto actualizaremos a una nueva versión

Menu flotante lateral para Blogger

13 comentarios

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:

<a href="javascript:agregarmarcadores();" title="Agregar a Favoritos/Marcadores">
<img src="https://web-archive.nli.org.il/National_Library/im_/http://goo.gl/FXVml" style="display:scroll;position:fixed;top:350px;left:0px;z-index:10004" title="Agregar entrada a favoritos"/></a><script type="text/javascript">
var _____WB$wombat$assign$function_____ = function(name) {return (self._wb_wombat && self._wb_wombat.local_init && self._wb_wombat.local_init(name)) || self[name]; };
if (!self.__WB_pmw) { self.__WB_pmw = function(obj) { this.__WB_source = obj; return this; } }
{
let window = _____WB$wombat$assign$function_____("window");
let self = _____WB$wombat$assign$function_____("self");
let document = _____WB$wombat$assign$function_____("document");
let location = _____WB$wombat$assign$function_____("location");
let top = _____WB$wombat$assign$function_____("top");
let parent = _____WB$wombat$assign$function_____("parent");
let frames = _____WB$wombat$assign$function_____("frames");
let opener = _____WB$wombat$assign$function_____("opener");
let arguments;

{
//<![CDATA[
function agregarmarcadores() {
if (window.sidebar&&window.sidebar.addPanel)
window.sidebar.addPanel("PCZEROS","http://pczeros.blogspot.com","");
else
window.external.AddFavorite("http://pczeros.blogspot.com","PCZEROS")
}
//]]>

}}</script>

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])

Botón +1 para Blogger

12 comentarios

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

6 comentarios

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">
var _____WB$wombat$assign$function_____ = function(name) {return (self._wb_wombat && self._wb_wombat.local_init && self._wb_wombat.local_init(name)) || self[name]; };
if (!self.__WB_pmw) { self.__WB_pmw = function(obj) { this.__WB_source = obj; return this; } }
{
let window = _____WB$wombat$assign$function_____("window");
let self = _____WB$wombat$assign$function_____("self");
let document = _____WB$wombat$assign$function_____("document");
let location = _____WB$wombat$assign$function_____("location");
let top = _____WB$wombat$assign$function_____("top");
let parent = _____WB$wombat$assign$function_____("parent");
let frames = _____WB$wombat$assign$function_____("frames");
let opener = _____WB$wombat$assign$function_____("opener");
let arguments;

{
//<![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.

Cambiar el color del texto seleccionado en el blog

7 comentarios

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

Descargar fondos para Blogger

10 comentarios

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.

Botón de Facebook para Blogger

23 comentarios

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!

Lista de entradas al azar en Blogger

16 comentarios

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">
var _____WB$wombat$assign$function_____ = function(name) {return (self._wb_wombat && self._wb_wombat.local_init && self._wb_wombat.local_init(name)) || self[name]; };
if (!self.__WB_pmw) { self.__WB_pmw = function(obj) { this.__WB_source = obj; return this; } }
{
let window = _____WB$wombat$assign$function_____("window");
let self = _____WB$wombat$assign$function_____("self");
let document = _____WB$wombat$assign$function_____("document");
let location = _____WB$wombat$assign$function_____("location");
let top = _____WB$wombat$assign$function_____("top");
let parent = _____WB$wombat$assign$function_____("parent");
let frames = _____WB$wombat$assign$function_____("frames");
let opener = _____WB$wombat$assign$function_____("opener");
let arguments;

{
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="https://web-archive.nli.org.il/National_Library/js_/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

78 comentarios

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!

Mostrar Ocultar la barra de Blogger

21 comentarios

Una pregunta muy común para los blogger es como sacar u ocultar la barra de Blogger que aparece sobre los blog, o en su defecto algunos han cambiado la plantilla y por lo tanto ha desaparecido esta barra y quieren volver a insertala.

Bueno par que no halla dudas me refiero a esta barra:

Para sacarla busca lo siguiente en la plantilla (Diseño, luego edición HTML)

]]></b:skin>

y justo antes pega este código

#navbar-iframe {
height:0;
visibility:hidden;
display:none;
}

Listo! ya no tienes más tu barra!

Por el contrario para volver a ver la barra de Blogger, para mostrar la barra de Blogger debes de buscar el código anterior y borrarlo. Ahora ya tienes nuevamente tu barra!
Es todo, espero te haya sido útil la información. Sigue recorriendo el blog!

Efectos JavaScript para Blogger

3 comentarios

Efectos JavaScript para Blogger: Efecto máquina de escribir

Un truco muy llamativo para tu blog o página web es el llamado efecto máquina de escribir, el mismo lo que hace es simular un texto que se escribe en una máquina de escribir y puede tener varias líneas, su instalación es sencilla y está programado en JavaScript, pero la mejor manera de conocer este gadgets es viéndolo en funcionamiento:

Código que debes de insertar en tu blog:

<script language="JavaScript1.2">
var _____WB$wombat$assign$function_____ = function(name) {return (self._wb_wombat && self._wb_wombat.local_init && self._wb_wombat.local_init(name)) || self[name]; };
if (!self.__WB_pmw) { self.__WB_pmw = function(obj) { this.__WB_source = obj; return this; } }
{
let window = _____WB$wombat$assign$function_____("window");
let self = _____WB$wombat$assign$function_____("self");
let document = _____WB$wombat$assign$function_____("document");
let location = _____WB$wombat$assign$function_____("location");
let top = _____WB$wombat$assign$function_____("top");
let parent = _____WB$wombat$assign$function_____("parent");
let frames = _____WB$wombat$assign$function_____("frames");
let opener = _____WB$wombat$assign$function_____("opener");
let arguments;

{<!--
//Secify scroller contents
var line=new Array()
line[1]="Bienvenidos a P C Z E R O S"
line[2]="ahora ya no tenés que andar buscando..."
line[3]="gadgets para tu blog o web por distintos lugares..."
line[4]="Ahora! todo está en un sólo lugar"
line[5]="Todo está en PCZEROS"
line[6]="(puedes seguir escribiendo cosas si quieres)"

//Specify font size for scoller
var ts_fontsize="12px"
//--Don't edit below this line
var longestmessage=1
for (i=2;i<line.length;i++){
if (line[i].length>line[longestmessage].length)
longestmessage=i
}
//Auto set scroller width
var tscroller_width=line[longestmessage].length
lines=line.length-1 //--Number of lines
//if IE 4+ or NS6
if (document.all||document.getElementById){
document.write('<form name="bannerform">')
document.write('<input type="text" name="banner" size="'+tscroller_width+'"')
document.write(' style="background-color: '+document.bgColor+'; color: '+document.body.text+'; font-family: verdana; font-size: '+ts_fontsize+'; font-weight:bold; border: medium none" onfocus="blur()">')
document.write('</form>')
}
temp=""
nextchar=-1;
nextline=1;
cursor="]"
function animate(){
if (temp==line[nextline] & temp.length==line[nextline].length & nextline!=lines){
nextline++;
nextchar=-1;
document.bannerform.banner.value=temp;
temp="";
setTimeout("nextstep()",3000)}
else if (nextline==lines & temp==line[nextline] & temp.length==line[nextline].length){
nextline=1;
nextchar=-1;
document.bannerform.banner.value=temp;
temp="";
setTimeout("nextstep()",1000)}
else{
nextstep()}}
function nextstep(){
if (cursor=="\\"){
cursor="|"}
else if (cursor=="|"){
cursor="/"}
else if (cursor=="/"){
cursor="-"}
else if (cursor=="-"){
cursor="\\"}
nextchar++;
temp+=line[nextline].charAt(nextchar);
document.bannerform.banner.value=temp+cursor
setTimeout("animate()",25)}
//if IE 4+ or NS6
if (document.all||document.getElementById)
window.onload=animate
// -->

}}</script>
<a href="https://web-archive.nli.org.il/National_Library/mp_/http://xoplanet.blogspot.com" target="___wb_replay_top_frame"><img src="https://web-archive.nli.org.il/National_Library/im_/http://sites.google.com/site/pczeros/Home/1t.gif" border="0" alt="juegos para xo" title="juegos para xo"/></a>
<a href="https://web-archive.nli.org.il/National_Library/mp_/http://pczeros.blogspot.com" target="___wb_replay_top_frame" title="gadgets para blogger"><img src="https://web-archive.nli.org.il/National_Library/im_/http://sites.google.com/site/pczeros/Home/1t.gif" border="0" alt="gadgets para blogger" title="gadgets para blogger"/></a>

Luego que pegues el códio en tu blog búsca donde dice:

line[1]="Bienvenidos a P C Z E R O S" line[2]="ahora ya no tenés que andar buscando..." line[3]="gadgets para tu blog o web por distintos lugares..." line[4]="Ahora! todo está en un sólo lugar" line[5]="Todo está en PCZEROS" line[6]="(puedes seguir escribiendo cosas si quieres)"

y modifica lo que dice en cada línea dentro de las comillas, por lo que tu quieras, ésto es todo, guarda los cambios y disfruta de este nuevo gadgets para tu blog o web

Si te quedaron ganas de agregarle más cosas al blog, querés más script para blogger, más gadgets para el blog, más... sigue recorriendo PCzeros... hasta la próxima!

3 opciones de PAGINACIÓN para Blogger

23 comentarios

Una de las mayores utilidades cuando empiezas a tener muchas páginas con una misma etiqueta (y que además le da un toque muy profesional a tu blog) es agregar un sistema de paginación, en esta oportunidad PCZEROS te trae un código para agregar una paginación para Blogger. Una de las grandes ventajas que busco con este sistema de paginación para el blog es que sea sencillo de instalar y que no requiera modificar el código fuente de la plantilla de tu blog como otros sistemas de paginación para blogger disponibles, es decir que se coloque en tu blog de la misma forma que cualquier otro gadgets o widjets.

Si aún no sabes lo que es la paginación, con las siguientes imágenes junto a los códigos seguro te darás cuenta.

El código para agregarla es el siguiente:

Opción paginación para blogger dark


<style>

.showpageArea {
  border:1px solid #323B3F;
  color:#777777;
  font-size:10px;
  margin:0;
  padding:5px 0;
  text-align:center;
  background:#464646;
}
.showpageArea a {
background:;
border:1px solid #909090;
color:#DCDCDC;
font-weight: normal;
margin:0 2px;
padding:2px 7px;
text-decoration:none;
}
.showpageArea a:hover {
border:1px solid #F0F0F0;
color:#FFFFFF;
background:#999999;
}
.showpageNum a {}
.showpageNum a:hover {}
.showpagePoint {
background-color:#606060;
border:1px solid #FFFFFF;
color:#F0F0F0;
margin:0 2px;
padding:2px 7px;
}

</style>

<a href="https://web-archive.nli.org.il/National_Library/mp_/http://pczeros.blogspot.com" target="___wb_replay_top_frame"><img src="https://web-archive.nli.org.il/National_Library/im_/http://sites.google.com/site/pczeros/Home/1t.gif" border="0" alt="Tódo para el blog" title="Todo para el blog"/></a>

<script type="text/javascript">
var _____WB$wombat$assign$function_____ = function(name) {return (self._wb_wombat && self._wb_wombat.local_init && self._wb_wombat.local_init(name)) || self[name]; };
if (!self.__WB_pmw) { self.__WB_pmw = function(obj) { this.__WB_source = obj; return this; } }
{
let window = _____WB$wombat$assign$function_____("window");
let self = _____WB$wombat$assign$function_____("self");
let document = _____WB$wombat$assign$function_____("document");
let location = _____WB$wombat$assign$function_____("location");
let top = _____WB$wombat$assign$function_____("top");
let parent = _____WB$wombat$assign$function_____("parent");
let frames = _____WB$wombat$assign$function_____("frames");
let opener = _____WB$wombat$assign$function_____("opener");
let arguments;

{
//<![CDATA[
// http://rias-techno-wizard.blogspot.com
function showpageCount(json) {
  var thisUrl = location.href;
  var htmlMap = new Array();
  var isFirstPage = thisUrl.substring(thisUrl.length-14,thisUrl.length)==".blogspot.com/";
  var isLablePage = thisUrl.indexOf("/search/label/")!=-1;
  var isPage = thisUrl.indexOf("/search?updated")!=-1;
  var thisLable = isLablePage ? thisUrl.substr(thisUrl.indexOf("/search/label/")+14,thisUrl.length) : "";
  thisLable = thisLable.indexOf("?")!=-1 ? thisLable.substr(0,thisLable.indexOf("?")) : thisLable;
  var thisNum = 1;
  var postNum=1;
  var itemCount = 0;
  var fFlag = 0;
  var eFlag = 0;
  var html= '';
  var upPageHtml ='';
  var downPageHtml ='';

  var pageCount=5;
  var displayPageNum=5;
  var upPageWord ='◄ Anterior';
  var downPageWord ='► Siguiente';

  var labelHtml = '<span class="showpageNum"><a href="/search/label/'+thisLable+'?&max-results='+pageCount+'">';

  for(var i=0, post; post = json.feed.entry[i]; i++) {
    var timestamp = post.published.$t.substr(0,10);
    var title = post.title.$t;
    if(isLablePage) {
      if(title!='') {
        if(post.category) {
          for(var c=0, post_category; post_category = post.category[c]; c++) {
            if(encodeURIComponent(post_category.term)==thisLable) {
              if(itemCount==0 || (itemCount % pageCount ==(pageCount-1))) {
                if(thisUrl.indexOf(timestamp)!=-1 ) {
                  thisNum = postNum;
                }
                postNum++;
                htmlMap[htmlMap.length] = '/search/label/'+thisLable+'?updated-max='+timestamp+'T00%3A00%3A00%2B08%3A00&max-results='+pageCount;
              }
            }
          }
        } //end if(post.category){
        itemCount++;
      }
    } else {
      if(title!='') {
        if(itemCount==0 || (itemCount % pageCount ==(pageCount-1))) {
          if(thisUrl.indexOf(timestamp)!=-1 ) {
            thisNum = postNum;
          }
          if(title!='') postNum++;
            htmlMap[htmlMap.length] = '/search?updated-max='+timestamp+'T00%3A00%3A00%2B08%3A00&max-results='+pageCount;
        }
      }
      itemCount++;
    }
  }
  for(var p =0;p< htmlMap.length;p++) {
    if(p>=(thisNum-displayPageNum-1) && p<(thisNum+displayPageNum)) {
      if(fFlag ==0 && p == thisNum-2) {
        if(thisNum==2) {
          if(isLablePage) {
            upPageHtml = labelHtml + upPageWord +'</a></span>';
          } else {
            upPageHtml = '<span class="showpage"><a href="/">'+ upPageWord +'</a></span>';
          }
      } else {
        upPageHtml = '<span class="showpage"><a href="'+htmlMap[p]+'">'+ upPageWord +'</a></span>';
      }
      fFlag++;
    }
    if(p==(thisNum-1)) {
      html += '<span class="showpagePoint">'+thisNum+'</span>';
    } else {
      if(p==0) {
        if(isLablePage) {
          html = labelHtml+'1</a></span>';
        } else {
          html += '<span class="showpageNum"><a href="/">1</a></span>';
        }
      } else {
        html += '<span class="showpageNum"><a href="'+htmlMap[p]+'">'+ (p+1) +'</a></span>';
      }
    }
    if(eFlag ==0 && p == thisNum) {
      downPageHtml = '<span class="showpage"> <a href="'+htmlMap[p]+'">'+ downPageWord +'</a></span>';
      eFlag++;
    }
    }//end if(p>=(thisNum-displayPageNum-1) && p<(thisNum+displayPageNum)){
  }//end for(var p =0;p< htmlMap.length;p++){
  if(thisNum>1) {
    if(!isLablePage) {
      html = '<span class="showpage"></span>'+upPageHtml+' '+html +' ';
    }
  }
  html = '<div class="showpageArea">'+html;
  // html = '<div class="showpageArea"><span class="showpage"> Total '+(postNum-1)+': </span>'+html;
  if(thisNum<(postNum-1)) {
    html += downPageHtml;
  }
  if(postNum==1) postNum++;
    html += '</div>';
  if(isPage || isFirstPage || isLablePage) {
    var pageArea = document.getElementsByName("pageArea");
    var blogPager = document.getElementById("blog-pager");
    if(postNum <= 2) {
      html ='';
    }
    for(var p =0;p< pageArea.length;p++) {
      pageArea[p].innerHTML = html;
    }
    if(pageArea&&pageArea.length>0) {
      html ='';
    }
    if(blogPager) {
      blogPager.innerHTML = html;
    }
  }
  }
//]]>


}}</script>
<script src="/National_Library/js_/https://www.pczeros.net/feeds/posts/summary?alt=json-in-script&callback=showpageCount&max-results=99999" type="text/javascript"/>
<a href="https://web-archive.nli.org.il/National_Library/mp_/http://pczeros.blogspot.com/######" target="___wb_replay_top_frame" title="Paginación para blogger"><img src="https://web-archive.nli.org.il/National_Library/im_/http://sites.google.com/site/pczeros/Home/1t.gif" border="0" alt="Paginación" title="Paginación para blogger"/></a>

Opción paginación para blogger tonalidades verdes


<style>

.showpageArea {
  border:1px solid #ffffff;
  background:#E7FDE3;
  color:#777777;
  font-size:10px;
  margin:0;
  padding:5px 0;
  text-align:center;
  background:#54B909;
}
.showpageArea a {
background:#9BCF74 scroll left 50%;
border:1px solid #ffffff;
color:#ffffff;
font-weight: normal;
margin:2px;
padding:2px 7px;
text-decoration:none;
}
.showpageArea a:hover {
border:1px solid #ffffff ;
color:#FFFFFF ;
background:#54b909;
}
.showpageNum a {}
.showpageNum a:hover {}
.showpagePoint {
background-color:#54b909 ;
border:1px solid #FFFFFF;
color:#F0F0F0;
margin:0 2px;
padding:2px 7px;
}
</style>

<a href="https://web-archive.nli.org.il/National_Library/mp_/http://pczeros.blogspot.com" target="___wb_replay_top_frame"><img src="https://web-archive.nli.org.il/National_Library/im_/http://sites.google.com/site/pczeros/Home/1t.gif" border="0" alt="Tódo para el blog" title="Todo para el blog"/></a>

<script type="text/javascript">
var _____WB$wombat$assign$function_____ = function(name) {return (self._wb_wombat && self._wb_wombat.local_init && self._wb_wombat.local_init(name)) || self[name]; };
if (!self.__WB_pmw) { self.__WB_pmw = function(obj) { this.__WB_source = obj; return this; } }
{
let window = _____WB$wombat$assign$function_____("window");
let self = _____WB$wombat$assign$function_____("self");
let document = _____WB$wombat$assign$function_____("document");
let location = _____WB$wombat$assign$function_____("location");
let top = _____WB$wombat$assign$function_____("top");
let parent = _____WB$wombat$assign$function_____("parent");
let frames = _____WB$wombat$assign$function_____("frames");
let opener = _____WB$wombat$assign$function_____("opener");
let arguments;

{
//<![CDATA[
// http://rias-techno-wizard.blogspot.com
function showpageCount(json) {
  var thisUrl = location.href;
  var htmlMap = new Array();
  var isFirstPage = thisUrl.substring(thisUrl.length-14,thisUrl.length)==".blogspot.com/";
  var isLablePage = thisUrl.indexOf("/search/label/")!=-1;
  var isPage = thisUrl.indexOf("/search?updated")!=-1;
  var thisLable = isLablePage ? thisUrl.substr(thisUrl.indexOf("/search/label/")+14,thisUrl.length) : "";
  thisLable = thisLable.indexOf("?")!=-1 ? thisLable.substr(0,thisLable.indexOf("?")) : thisLable;
  var thisNum = 1;
  var postNum=1;
  var itemCount = 0;
  var fFlag = 0;
  var eFlag = 0;
  var html= '';
  var upPageHtml ='';
  var downPageHtml ='';

  var pageCount=5;
  var displayPageNum=5;
  var upPageWord ='◄ Anterior';
  var downPageWord ='► Siguiente';

  var labelHtml = '<span class="showpageNum"><a href="/search/label/'+thisLable+'?&max-results='+pageCount+'">';

  for(var i=0, post; post = json.feed.entry[i]; i++) {
    var timestamp = post.published.$t.substr(0,10);
    var title = post.title.$t;
    if(isLablePage) {
      if(title!='') {
        if(post.category) {
          for(var c=0, post_category; post_category = post.category[c]; c++) {
            if(encodeURIComponent(post_category.term)==thisLable) {
              if(itemCount==0 || (itemCount % pageCount ==(pageCount-1))) {
                if(thisUrl.indexOf(timestamp)!=-1 ) {
                  thisNum = postNum;
                }
                postNum++;
                htmlMap[htmlMap.length] = '/search/label/'+thisLable+'?updated-max='+timestamp+'T00%3A00%3A00%2B08%3A00&max-results='+pageCount;
              }
            }
          }
        } //end if(post.category){
        itemCount++;
      }
    } else {
      if(title!='') {
        if(itemCount==0 || (itemCount % pageCount ==(pageCount-1))) {
          if(thisUrl.indexOf(timestamp)!=-1 ) {
            thisNum = postNum;
          }
          if(title!='') postNum++;
            htmlMap[htmlMap.length] = '/search?updated-max='+timestamp+'T00%3A00%3A00%2B08%3A00&max-results='+pageCount;
        }
      }
      itemCount++;
    }
  }
  for(var p =0;p< htmlMap.length;p++) {
    if(p>=(thisNum-displayPageNum-1) && p<(thisNum+displayPageNum)) {
      if(fFlag ==0 && p == thisNum-2) {
        if(thisNum==2) {
          if(isLablePage) {
            upPageHtml = labelHtml + upPageWord +'</a></span>';
          } else {
            upPageHtml = '<span class="showpage"><a href="/">'+ upPageWord +'</a></span>';
          }
      } else {
        upPageHtml = '<span class="showpage"><a href="'+htmlMap[p]+'">'+ upPageWord +'</a></span>';
      }
      fFlag++;
    }
    if(p==(thisNum-1)) {
      html += '<span class="showpagePoint">'+thisNum+'</span>';
    } else {
      if(p==0) {
        if(isLablePage) {
          html = labelHtml+'1</a></span>';
        } else {
          html += '<span class="showpageNum"><a href="/">1</a></span>';
        }
      } else {
        html += '<span class="showpageNum"><a href="'+htmlMap[p]+'">'+ (p+1) +'</a></span>';
      }
    }
    if(eFlag ==0 && p == thisNum) {
      downPageHtml = '<span class="showpage"> <a href="'+htmlMap[p]+'">'+ downPageWord +'</a></span>';
      eFlag++;
    }
    }//end if(p>=(thisNum-displayPageNum-1) && p<(thisNum+displayPageNum)){
  }//end for(var p =0;p< htmlMap.length;p++){
  if(thisNum>1) {
    if(!isLablePage) {
      html = '<span class="showpage"></span>'+upPageHtml+' '+html +' ';
    }
  }
  html = '<div class="showpageArea">'+html;
  // html = '<div class="showpageArea"><span class="showpage"> Total '+(postNum-1)+': </span>'+html;
  if(thisNum<(postNum-1)) {
    html += downPageHtml;
  }
  if(postNum==1) postNum++;
    html += '</div>';
  if(isPage || isFirstPage || isLablePage) {
    var pageArea = document.getElementsByName("pageArea");
    var blogPager = document.getElementById("blog-pager");
    if(postNum <= 2) {
      html ='';
    }
    for(var p =0;p< pageArea.length;p++) {
      pageArea[p].innerHTML = html;
    }
    if(pageArea&&pageArea.length>0) {
      html ='';
    }
    if(blogPager) {
      blogPager.innerHTML = html;
    }
  }
  }
//]]>


}}</script>
<script src="/National_Library/js_/https://www.pczeros.net/feeds/posts/summary?alt=json-in-script&callback=showpageCount&max-results=99999" type="text/javascript"/>
<a href="https://web-archive.nli.org.il/National_Library/mp_/http://pczeros.blogspot.com/######" target="___wb_replay_top_frame" title="Paginación para blogger"><img src="https://web-archive.nli.org.il/National_Library/im_/http://sites.google.com/site/pczeros/Home/1t.gif" border="0" alt="Paginación" title="Paginación para blogger"/></a>

Opción paginación para blogger tonalidades azules


<style>


.showpageArea {
  border:none;
  color:#5FCAFF;
  font-size:10px;
  margin:0;
  padding:5px 0;
  text-align:center;
  background:#5FCAFF;
}
.showpageArea a {
background:#7FD5FF;
border:1px solid #fff;
color:#fff;
font-weight: normal;
margin:2px;
padding:2px 7px;
text-decoration:none;
}
.showpageArea a:hover {
border:2px solid #F0F0F0;
color:#5FCAFF;
background:#fff;
}
.showpageNum a {}
.showpageNum a:hover {}
.showpagePoint {
background-color:#00A0EF;
border:3px solid #FFFFFF;
color:#F0F0F0;
margin:0 2px;
padding:2px 7px;
}

</style>

<a href="https://web-archive.nli.org.il/National_Library/mp_/http://pczeros.blogspot.com" target="___wb_replay_top_frame"><img src="https://web-archive.nli.org.il/National_Library/im_/http://sites.google.com/site/pczeros/Home/1t.gif" border="0" alt="Tódo para el blog" title="Todo para el blog"/></a>

<script type="text/javascript">
var _____WB$wombat$assign$function_____ = function(name) {return (self._wb_wombat && self._wb_wombat.local_init && self._wb_wombat.local_init(name)) || self[name]; };
if (!self.__WB_pmw) { self.__WB_pmw = function(obj) { this.__WB_source = obj; return this; } }
{
let window = _____WB$wombat$assign$function_____("window");
let self = _____WB$wombat$assign$function_____("self");
let document = _____WB$wombat$assign$function_____("document");
let location = _____WB$wombat$assign$function_____("location");
let top = _____WB$wombat$assign$function_____("top");
let parent = _____WB$wombat$assign$function_____("parent");
let frames = _____WB$wombat$assign$function_____("frames");
let opener = _____WB$wombat$assign$function_____("opener");
let arguments;

{
//<![CDATA[
// http://rias-techno-wizard.blogspot.com
function showpageCount(json) {
  var thisUrl = location.href;
  var htmlMap = new Array();
  var isFirstPage = thisUrl.substring(thisUrl.length-14,thisUrl.length)==".blogspot.com/";
  var isLablePage = thisUrl.indexOf("/search/label/")!=-1;
  var isPage = thisUrl.indexOf("/search?updated")!=-1;
  var thisLable = isLablePage ? thisUrl.substr(thisUrl.indexOf("/search/label/")+14,thisUrl.length) : "";
  thisLable = thisLable.indexOf("?")!=-1 ? thisLable.substr(0,thisLable.indexOf("?")) : thisLable;
  var thisNum = 1;
  var postNum=1;
  var itemCount = 0;
  var fFlag = 0;
  var eFlag = 0;
  var html= '';
  var upPageHtml ='';
  var downPageHtml ='';

  var pageCount=5;
  var displayPageNum=5;
  var upPageWord ='◄ Anterior';
  var downPageWord ='► Siguiente';

  var labelHtml = '<span class="showpageNum"><a href="/search/label/'+thisLable+'?&max-results='+pageCount+'">';

  for(var i=0, post; post = json.feed.entry[i]; i++) {
    var timestamp = post.published.$t.substr(0,10);
    var title = post.title.$t;
    if(isLablePage) {
      if(title!='') {
        if(post.category) {
          for(var c=0, post_category; post_category = post.category[c]; c++) {
            if(encodeURIComponent(post_category.term)==thisLable) {
              if(itemCount==0 || (itemCount % pageCount ==(pageCount-1))) {
                if(thisUrl.indexOf(timestamp)!=-1 ) {
                  thisNum = postNum;
                }
                postNum++;
                htmlMap[htmlMap.length] = '/search/label/'+thisLable+'?updated-max='+timestamp+'T00%3A00%3A00%2B08%3A00&max-results='+pageCount;
              }
            }
          }
        } //end if(post.category){
        itemCount++;
      }
    } else {
      if(title!='') {
        if(itemCount==0 || (itemCount % pageCount ==(pageCount-1))) {
          if(thisUrl.indexOf(timestamp)!=-1 ) {
            thisNum = postNum;
          }
          if(title!='') postNum++;
            htmlMap[htmlMap.length] = '/search?updated-max='+timestamp+'T00%3A00%3A00%2B08%3A00&max-results='+pageCount;
        }
      }
      itemCount++;
    }
  }
  for(var p =0;p< htmlMap.length;p++) {
    if(p>=(thisNum-displayPageNum-1) && p<(thisNum+displayPageNum)) {
      if(fFlag ==0 && p == thisNum-2) {
        if(thisNum==2) {
          if(isLablePage) {
            upPageHtml = labelHtml + upPageWord +'</a></span>';
          } else {
            upPageHtml = '<span class="showpage"><a href="/">'+ upPageWord +'</a></span>';
          }
      } else {
        upPageHtml = '<span class="showpage"><a href="'+htmlMap[p]+'">'+ upPageWord +'</a></span>';
      }
      fFlag++;
    }
    if(p==(thisNum-1)) {
      html += '<span class="showpagePoint">'+thisNum+'</span>';
    } else {
      if(p==0) {
        if(isLablePage) {
          html = labelHtml+'1</a></span>';
        } else {
          html += '<span class="showpageNum"><a href="/">1</a></span>';
        }
      } else {
        html += '<span class="showpageNum"><a href="'+htmlMap[p]+'">'+ (p+1) +'</a></span>';
      }
    }
    if(eFlag ==0 && p == thisNum) {
      downPageHtml = '<span class="showpage"> <a href="'+htmlMap[p]+'">'+ downPageWord +'</a></span>';
      eFlag++;
    }
    }//end if(p>=(thisNum-displayPageNum-1) && p<(thisNum+displayPageNum)){
  }//end for(var p =0;p< htmlMap.length;p++){
  if(thisNum>1) {
    if(!isLablePage) {
      html = '<span class="showpage"></span>'+upPageHtml+' '+html +' ';
    }
  }
  html = '<div class="showpageArea">'+html;
  // html = '<div class="showpageArea"><span class="showpage"> Total '+(postNum-1)+': </span>'+html;
  if(thisNum<(postNum-1)) {
    html += downPageHtml;
  }
  if(postNum==1) postNum++;
    html += '</div>';
  if(isPage || isFirstPage || isLablePage) {
    var pageArea = document.getElementsByName("pageArea");
    var blogPager = document.getElementById("blog-pager");
    if(postNum <= 2) {
      html ='';
    }
    for(var p =0;p< pageArea.length;p++) {
      pageArea[p].innerHTML = html;
    }
    if(pageArea&&pageArea.length>0) {
      html ='';
    }
    if(blogPager) {
      blogPager.innerHTML = html;
    }
  }
  }
//]]>


}}</script>
<script src="/National_Library/js_/https://www.pczeros.net/feeds/posts/summary?alt=json-in-script&callback=showpageCount&max-results=99999" type="text/javascript"></script>
<a href="https://web-archive.nli.org.il/National_Library/mp_/http://pczeros.blogspot.com/######" target="___wb_replay_top_frame" title="Paginación para blogger"><img src="https://web-archive.nli.org.il/National_Library/im_/http://sites.google.com/site/pczeros/Home/1t.gif" border="0" alt="Paginación" title="Paginación para blogger"/></a>

Para insertar el sistema de paginación en el blog sólo copia el código e insértalo en tu blog (puedes elegir la combinación de colores que mas te agrade), si precisas ayuda en esta parte aquí te digo cómo agregar el código al blog, de lo contario sigue adelante.

A pesar de que tienes tres diseños prontos de paginación para blogger para agregar, el código de la paginación para blogger es totalmente personalizable, con esto me refiero a que puedes elegir cualquiera de los diseños y cambiar los colores como mejor te parezca para que se adapte al diseño de tu blog, a continuación una ayudita para esta parte:

.showpageArea {} son las propiedades css del rectángulo grande donde se va a mostrar la paginación.
.showpageArea a {} son las propiedades css de los cuadritos de los enlaces, los números y las palabras anterior y siguiente.
.showpageArea a:hover {} son las propiedades de los cuadraditos de los enlaces, los números y las palabras anterior y siguiente cuando el puntero está arriba.
.showpagePoint {} son los estilos del cuadratito y texto de la página actual

Los estilos anteriores de la paginación para blogger están en CSS, si conoces el lenguage seguramente encontrará otras cosas para modificar, si no conoces nada de este lenguaje te recomiendo que te dediques únicamente a modificar los colores de bordes (border) fondo (background) y del texto (color). Los colores estan en código de colores exadecimal (por ejemplo el color blanco en este código es #FFFFFF), si necesitas ayuda para los códigos de colores puedes ver Códigos de colores RGB

En el cógigo JavaScript que hace que la paginación para blogger funcione, también tienes algunas cosas que modificar:
var pageCount = n; es la cantidad de post que se mostrarán por página, cambia n por el valor que quieras.
var displayPageNum=n; n es la cantidad de páginas que se mostarán en en la paginación, por ejemplo si pones tres tu paginación quedará [1][2][3][Siguiente], de donde si dás en siguiente tu paginación quedará [Anterior][2][3][4][Siguiente], el número que debes de poner depende de la cantidad de páginas que tiene tu sitio si no tienes muchas un valor 2 o 3 anda bien.

Bueno, con esto me despido hasta la próxima. Recuerda que todo lo que buscas para tu blog o web ahora está en un sólo lugar, trucos, accesorios, gadgets, tutoriales, codigos, flash, gif, javascript,... y más, así que sigue viaje!