El Blog de elSant0 -: ARTICULOS-DE-INTERES-PARA-BLOGUEROS

Sociabilizar el blog (I) - "Followers" y botones "Follow"

Con mi adhesión a las redes sociales me he visto en la necesidad de añadir nuevas herramientas al blog con el fin de "sociabilizarlo". Para ello iré indicando post a post cada paso realizado o herramienta añadida para integrar esta web en ese mundillo.

En primer lugar, para que las redes sociales resulten útiles a la web es necesario conseguir un número considerable de "followers" o seguidores. Un "follower" o seguidor es una persona que sigue el blog a través de una red social.

TWITTER:

En Twitter un "follower" es una persona que recibe tus tweets en su página de inicio de Twitter (o en su cliente para Twitter).

En Twitter la solicitud de un follower no es mútua. Es decir tú no tienes que aprobar que alguien te pueda "seguir" y tampoco tienes la obligación de ser follower (seguidor) suyo.

Elementos añadidos al blog

He añadido al blog un botón "Follow" que al ser pulsado redirige a la página de Twitter del usuario que pulsó, para activar la suscripción de seguimiento de mis mensajes en su página.

Este botón lo he hecho flotante para que así permanezca en pantalla y accesible al usuario sea cual sea su movimiento por el blog.

Para ello, en Blogger, se hace lo siguiente:
1. Vamos a Personalizar y luego a Diseño->Edición de HTML. Entonces damos a Expandir plantillas de artilugios.
2. Ahora, en el código de nuestra plantilla buscamos la siguiente etiqueta:
```
</body>
```
3. Justo antes añadimos el siguiente código:
```
<a href="http://www.twitter.com/elblogdeelSant0"><img border="0" src="URL-IMAGEN-DEL-BOTÓN" style="width:50px; height:50px; position:fixed; top:383px; right:0px;"/></a>
```
  Donde:
  - http://www.twitter.com/elblogdeelSant0 es la página principal de Twitter para la web a seguir (en este caso pongo la mía).
  - border="0" indica que la imagen del botón se insertará en la página sin bordes (Blogger añade bordes de forma predeterminada).
  - URL-IMAGEN-DEL-BOTÓN es la URL donde se encuentra alojada la imagen del botón (puedes usar un servicio de alojamiento de imágenes externo como http://www.xooimage.com/fr/).
  - width:50px y height:50px indican el ancho y alto del botón en píxeles.
  - position:fixed indica que, aunque se desplace el scroll de la ventana, el botón permanecerá inmóvil en su posición.
  - top:383px y right:0px indica la posición en pantalla. Con "top" indicamos la distancia en píxeles al margen superior y con "right" la distancia al margen derecho (también podemos usar "bottom" para el margen inferior y "left" para el izquierdo).
4. Salimos guardando los cambios y ya podemos comprobar el efecto en el blog.
FACEBOOK:

En Facebook un "follower" o "fan" es una persona que recibe en el "muro" de su página de Facebook (o en su cliente para Facebook) los mensajes que tú publicas y/o regalos (gifts) que le haces.

En Facebook no sólo se puede ser "follower" o "fan" de otro usuario, sino que se puede ser de multitud de elementos: de una determinada página de otro usuario, de un grupo social creado por otro usuario, de un determinado mensaje de otro usuario,... Y los mensajes que recibirá en su muro serán los relacionados con dicha suscripción.

Para hacerte seguidor de algo en Facebook basta con pulsar el botón "ME GUSTA".

Al igual que en Twitter, no es necesario que tú sigas a tus seguidores. Sin embargo, cuando alguien decide seguirte a ti o a algún contenido de tu cuenta de Facebook recibes una notificación y, para completar su suscripción es necesario que aceptes la solicitud incluída en esa notificación.

Elementos añadidos al blog

He añadido al blog un botón "Follow" que al ser pulsado redirige a la página que creé para "El Blog de elSant0" en mi perfil de Facebook (usuario "El Santo"). Una vez allí el usuario puede pulsar "ME GUSTA" para activar la suscripción de seguimiento de los mensajes que publico en el muro de dicha página.

al igual que con el botón de Twitter, éste también lo he hecho flotante para que así permanezca en pantalla y accesible al usuario sea cual sea su movimiento por el blog.

Los pasos a seguir son:
1. Vamos a Personalizar y luego a Diseño->Edición de HTML. Entonces damos a Expandir plantillas de artilugios.
2. Ahora, en el código de nuestra plantilla buscamos la siguiente etiqueta:
```
</body>
```
3. Justo antes añadimos el siguiente código:
```
<a href="http://www.facebook.com/pages/el-Blog-de-elSant0/161769207226702?sk=info"><img border="0" src="URL-IMAGEN-DEL-BOTON" style="width:50px; height:50px; display:scroll; position:fixed; top:337px; right:0px;"/></a>
```
  Donde:
  - http://www.facebook.com/pages/el-Blog-de-elSant0/161769207226702?sk=info es la página de "El blog de elSant0"(en mi perfil de Facebook), la cual contiene el botón "ME GUSTA" para realizar la suscripción.
  - border="0" indica que la imagen del botón se insertará en la página sin bordes (Blogger añade bordes de forma predeterminada).
  - URL-IMAGEN-DEL-BOTÓN es la URL donde se encuentra alojada la imagen del botón (puedes usar un servicio de alojamiento de imágenes externo como http://www.xooimage.com/fr/).
  - width:50px y height:50px indican el ancho y alto del botón en píxeles.
  - position:fixed indica que, aunque se desplace el scroll de la ventana, el botón permanecerá inmóvil en su posición.
  - top:337px y right:0px indica la posición en pantalla. Con "top" indicamos la distancia en píxeles al margen superior y con "right" la distancia al margen derecho (también podemos usar "bottom" para el margen inferior y "left" para el izquierdo).
4. Salimos guardando los cambios y ya podemos comprobar el efecto en el blog.

Salu2,
elSant0

Conversión a ficheros .pdf

Hace unos días tuve la necesidad de convertir a formato PDF varios ficheros, los cuales tenían diversas extensiones (.png, .doc,...).

PDF (Portable Document Format) es un formato de almacenamiento de documentos desarrollado por la empresa Adobe Systems. Está especialmente ideado para documentos susceptibles de ser impresos, ya que incorpora toda la información necesaria para la impresión final, determinando todos los detalles y no requiriéndose procesos intermedios ni softwares que preformateen el documento.

El método genérico más rápido y cómodo de conversión de cualquier documento (sea del tipo que sea) al formato PDF consiste en instalar una impresora virtual a tal formato. De este modo, podemos ordenar imprimir con dicha impresora el documento a convertir y ésta simplemente creará el nuevo fichero deseado.

Si queremos instalar una impresora virtual PDF existen varias opciones, pero la más extendida es CUPS-PDF. Está disponible para múltiples sistemas operativos y resulta fácil de instalar, rápida y eficiente.

Para instalar la impresora CUPS-PDF en Ubuntu haremos lo siguiente:

Abrimos una Terminal.
Instalamos el paquete correspondiente (se encuentra en los repositorios oficiales de Ubuntu):
```
 ~$ sudo apt-get install cups-pdf
```
Vamos a Sistema->Administración->Impresoras y en la ventana abierta clicamos en Servidor->Nueva...->Impresora.
Se abrirá una nueva ventana de configuración donde debemos seleccionar el dispositivo "Generic CUPS-PDF Printer" y clicar Adelante:
Tras pasar unos instantes buscando los controladores necesarios (los cuales fueron instalados en el paso 2), aparecerá una pantalla para configurar "Nombre de impresora", "Descripción" y "Ubicación". Podemos mantener los valores preestablecidos y dar a Aplicar
Por último se nos pregunta si deseamos imprimir una página de prueba. Podemos hacerlo dando a Imprimir página de prueba, para comprobar que el funcionamiento es correcto. El nuevo documento será creado en la ruta "/home/$USER/PDF", donde $USER es nuestro nombre de usuario.

Ya está lista la impresora, podremos utilizarla con cualquier documento imprimible (aunque ahora no haremos gasto de tinta :P).

Sólo queda modificar su configuración para personalizarla si lo deseamos. Para hacerlo se siguen las mismas pautas que con cualquier impresora física.

Salu2,
elSant0

Alias en el correo electrónico para evitar dar nuestro E-Mail real

Hoy en día es habitual que los usuarios tengan ya varias cuentas de correo electrónico, cada una destinada a un fin diferente y, en muchas ocasiones, fruto de intentar evitar el spam producido al dar nuestra dirección en lugares de los que no confiamos por completo. Para evitar esto podemos hacer uso de los alias de correo.

Un alias es una dirección e-mail que redirige los mensajes a otra, sin llegar a almacenarlos ni posibilitar otra función. Es decir, una dirección ficticia que redirige los e-mails recibidos a tu correo real.

Aunque pueda parecer algo poco práctico, veamos algunos de sus posibles usos:

Podremos introducir un alias de nuestra dirección real en aquellos lugares inseguros, evitando así que nuestro correo verdadero quede registrado.
Podemos crear un alias para cada fin que llevemos a cabo (sector laboral, sector familiar, desconocidos, compras,...), en vez de tener que registrar y mantener una dirección de correo electrónico completa para cada uno.
Podemos redirigir el correo entrante a cada alias en una carpeta diferente de nuestro correo para distinguir sus procedencias y/o prioridades.
...

Ahora que ya sabemos qué son y para qué sirven, veamos como crearlos, por ejemplo, en 2 de los servicios de correo gratuitos más extendidos, Hotmail y Gmail.

Para Hotmail:

Iniciamos sesión en Hotmail con nuestro usuario y contraseña.
Vamos a la bandeja de entrada y clicamos en el engranaje situado en la parte superior derecha para que se despliegue el menú(ver imagen inferior).
Elegimos Crear un alias de Hotmail.
Introducimos el alias y damos a Crear un alias.
Tras ello podremos elegir o crear una carpeta a la que se dirigiran automáticamente los mensajes enviados al alias.
Damos a Listo.

Gmail no ofrece alias tradicionales, pero puedes recibir mensajes enviados a [TU NOMBRE DE USUARIO]+[CUALQUIER ALIAS]@gmail.com. Por ejemplo, si tu dirección es elSant0@gmail.com, puedes utilizar elSant0+paginaInsegura@gmail.com y todos los correos enviados allí se recibirán en tu bandeja de entrada habitual. Luego, si lo deseas, puedes configurar filtros para dirigir estos mensajes automáticamente a la Papelera, aplicar una etiqueta o una estrella, omitir Recibidos o reenviarlos a otra cuenta de correo electrónico.

Espero que esto ayude a mantener vuestros buzones más limpios y ordenados.

Salu2,
elSant0

Cómo recuperar pestañas cerradas en Firefox, Chrome/Chromium y Opera

Gracias a Nosinmiubuntu acabo de descubrir una función incluida en los principales navegadores actuales que me parece de los más práctica. Es posible recuperar cada una de las pestañas que hemos cerrados con anterioridad gracias a una simple combinación de teclas.

La "mágica" combinación de teclas funcina para Firefox, Chrome, Chromium y Opera (ignoro de si para alguno más, pero para Internet Explorer sé que no) y es [CTRL]+[Mayúscula]+[T].

Podemos usarla tantas veces como pestañas queramos recuperar.Espero os sea tan útil como lo está siendo para mí.

Salu2,
elSant0

Poner bombillas de colores intermitentes en la cabecera del blog

Como ya anuncié hace unos días, estoy dando a la web un toque especial para estas fechas y esta vez he añadido una fila de bombillas intermitentes sobre la cabecera del blog:

Este hack lo saqué de El Escaparate de Rosa (que a su vez lo obtuvo de snowysites.com).

En mi caso he sustituido el enlace que Rosa proporcionaba por el propio código para así evitar dependencias de webs ajenas.

Veamos como conseguir tal efecto en nuestro blog:

Vamos a Personalizar y luego a Diseño->Edición de HTML. Entonces damos a Expandir plantillas de artilugios.
Ahora, en el código de nuestra plantilla buscamos la siguiente etiqueta:
```
</head>
```

Y justo antes de la misma pegamos el siguiente código:

<script type='text/javascript'>  
 //<![CDATA[
  eval(function(p,a,c,k,e,d)
  {
   e=function(c)
   {
    return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))
   };
   if(!''.replace(/^/,String))
   {
    while(c--)
    {
     d[e(c)]=k[c]||e(c)
    }
    k=[function(e){return d[e]}];
    e=function()
    {
     return'\\w+'
    };
    c=1
   };
   while(c--)
   {
    if(k[c])
    {
     p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c])
    }
   }
   return p
  }
  ('(o(){b m=0;b j=0;b 7=c B();b 5=c B();5[0]=c q();5[0].w=p;5[0].h=t;5[0].l=\'16\';5[1]=c q();5[1].w=p;5[1].h=t;5[1].l=\'1d\';5[2]=c q();5[2].w=p;5[2].h=t;5[2].l=\'X\';5[3]=c q();5[3].w=p;5[3].h=t;5[3].l=\'1f\';O=o(){A(b 6 19 7){b d=(6%4);k(7[6].n.e.18(\'G\')==-1){7[6].n.e=5[d].v.e}Q{7[6].n.e=5[d].z.e}}};N=o(6){b d=(6%4);b K=((6%2)?\'17\':\'G\');7[6]=c q();7[6].a=8.H(\'1b\');7[6].a.g.1e=\'15\';7[6].a.14=\'J\'+6;7[6].a.g.Y=W;7[6].a.g.V=\'Z\';7[6].a.g.10=((6-1)*5[d].w)+\'y\';7[6].a.g.13=5[d].w+\'y\';7[6].a.g.11=5[d].h+\'y\';7[6].a.1j=5[d].l+\'J\';7[6].n=8.H(\'1t\');7[6].n.g.1s=\'1r\';7[6].n.e=1v(\'5[\'+d+\'].\'+K+\'1x.e\');7[6].a.E(7[6].n);8.f.E(7[6].a)};R=o(){1p=1q;A(b i=0;i<5.1i;i++){5[i].z=c L(5[i].w,5[i].h);5[i].z.e=\'F://C.D.I/P/\'+5[i].l+\'1k.S\';5[i].v=c L(5[i].w,5[i].h);5[i].v.e=\'F://C.D.I/P/\'+5[i].l+\'1m.S\'};k(9.8.T>m)m=9.8.T;k(9.8.u.s>m)m=9.8.u.s;k(9.8.f.s>m)m=9.8.f.s;k(9.8.U>j)j=9.8.U;k(9.8.u.r>j)j=9.8.u.r;k(9.8.f.r>j)j=9.8.f.r;8.f.g.1n=\'1o\';b M=1l.1h(j/p);A(b i=1;i;lt;=M;i++)N(i);1y(\'O();\',1w)};x=o(){k((1g 8.f!=\'1u\')&&(8.f!=1a))R();Q 1c(\'x();\',12)};x()})();',62,97,'|||||light_types|light_id|lights|document|window|elm|var|new|cur_light|src|body|style|||browser_w|if|color|browser_h|img_elm|function|30|Object|clientWidth|clientHeight|31|documentElement|off_image||_lights_wait_for_body|px|on_image|for|Array|s3|amazonaws|appendChild|http|off|createElement|com|light|cur_light_status|Image|top_amount|_create_light|_blink_lights|snowysites|else|_start_lights|png|innerHeight|innerWidth|top|10001|yellow|zIndex|0px|left|height|100|width|id|absolute|red|on|indexOf|in|null|DIV|setTimeout|green|position|blue|typeof|ceil|length|className|_top_on|Math|_top_off|paddingTop|31px|_snowylights_started|true|none|border|IMG|undefined|eval|500|_image|setInterval'.split('|'),0,{})) 
 //]]>
 </script>

Salimos guardando los cambios y ya podemos comprobar el efecto en el blog.

Salu2,
elSant0

Usar "Google Sites" para almacenar los scripts externos de nuestra web

Como ya sabréis muchos de los que administráis blogs en Blogger, una de las desventajas que este sistema opone es la imposibilidad de almacenar scripts fuera de la plantilla. Es por ello que nos quedan 3 opciones:

Resignarnos a no usar scripts ajenos a Blogger.
Almacenar los scripts dentro de la plantilla, haciéndola extensa y aumentando la dificultad de cualquier cambio que deseemos hacer posteriormente. Además de no permitir el almacenaje de variablesde datos universales para cualquier acceso (blogger no almacena variables ajenas en sus servidores, por lo que no podremos tener valores globales en el tiempo, como contadores,...).
Almacenar los scripts en un lugar fuera del blog y desde la plantilla enlazar a dichos sitios.

En mi caso, hasta ahora, elegí la segunda opción para casi todo. Así evitaba al máximo la dependencia de sitios ajenos al blog. Pero mi plantilla me empieza a parecer demasiado larga y, a pesar de mantenerla estupéndamente etiquetada y comentada, empiezan a ser engorrosos los cambios.

Es por eso que desde hoy he tomado la decisión de pasarme a la 3ª opción: almacenar los scripts en un lugar externo.

Como siempre, las posibilidades son numerosas, pero lógicamente si el "almacén" está en manos del mismo que vela por el hospedaje del blog mejor. Es decir, vamos a ver como aprovechar los servicios que brinda Google para almacenar nuestros scripts.

Google ofrece la aplicación online gratuita Google Sites. Esta aplicación permite crear un sitio web o una intranet de forma sencilla. Permite reunir en un único lugar y rápidamente información variada (vídeos, calendarios, presentaciones, archivos adjuntos, texto,...).

Aprovechándonos de eso vamos a crear un web site en internet y allí vamos a alojar nuestros ficheros con los scripts. Veamos como hacerlo:

Primero entramos en la página https://sites.google.com/site y nos logueamos con nuestro correo electrónico y contraseña de Google (los mismo que usamos para Blogger).
Una vez dentro clicamos sobre Crear un sitio nuevo.
En la nueva página web abierta configuraremos los siguientes valores:
- Elegir una plantilla: En nuestro caso no es relevante, podemos elegir, por ejemplo, "Plantilla en blanco".
- Indica el nombre de tu sitio: Para evitar posteriores confusiones pondremos el nombre de nuestro blog (en mi caso, "el Blog de elSant0")
- Tu sitio se ubicará en esta URL: esta será la URL donde quedarán alojados los scripts (en mi caso "https://sites.google.com/site/elblogdeelsant0").
- Más opciones: Aquí configuraremos una breve descripción del sitio (por ejemplo "site para almacenaje del blog.") y marcaremos la opción "Sólo las personas que especifique pueden ver este sitio." para que los scripts sólo estén disponibles para el uso del blog.
Por último introduciremos el código de seguridad mostrado y daremos a Crear sitio.
Ahora pasaremos a la página principal del nuevo web site creado. En la parte superior derecha veremos la opción + Crear página. La seleccionamos y a continuación configuramos las siguientes opciones:
- Nombre: Le daremos el nombre identificativo "scripts".
- Colocar la página en el nivel superior: Con ello daremos una ruta bastante identificativa a los scripts.
Y damos a Crear página.
Tras eso se abrirá la página donde añadiremos los scripts que desemos. Para ello, clicamos sobre Archivos adjuntos, seleccionamos el fichero en nuestra máquina que contiene el script (por ejemplo, "scriptdeprueba.js") y damos a Aceptar. Si todo va bien, en unos instantes veremos en el margen superior del navegador el mensaje "Fichero adjuntado con éxito".
Ahora damos a Guardar en la parte superior derecha de la página. Ya tenemos almacenado el script y está listo para ser usado en el blog.
En este ejemplo la ruta del script será:
```
https://sites.google.com/site/elblogdeelsant0/scripts/scriptdeprueba.js
```
Como se puede ver está formada por 3 partes:
- https://sites.google.com/site/elblogdeelsant0/: Es la ruta del web site donde se almacenarán los scripts. Se configuró en el punto 3.
- /scripts/: Es la subpágina del web site donde adjuntaremos los scripts. Se configuró en el punto 4.
- scriptdeprueba.js: Es el nombre del fichero que contiene el script. Fue dado al crear el fichero en nuestra máquina y subido en el paso 5 con dicho nombre.

Cuando deseemos subir nuevos scripts bastará con entrar de nuevo a https://sites.google.com/site logueándonos con nuestro correo electrónico y contraseña de Google (los mismo que usamos para Blogger), clicar sobre la página "scripts" (en la columna de la izquierda) y adjuntar el nuevo fichero.

Espero que os resulte tan practico como a mi.

Salu2,
elSant0

Copos de nieve en tu web

Bueno, ya se acercan las navidades y he pensado en darle un toque un poco especial al blog para estas fechas. Ya habréis notado esos copitos de nieve que van cayendo y posándose sobre la base del navegador y pronto veréis algún que otro toque personal más.

Algunos me habéis pedido que explique como conseguir estos efectos, así que vamos a verlo. Pero antes de hacerlo voy a dar las gracias al Escaparate de Rosa, ya que este efecto lo saqué de allí.

Bueno y ahora vamos con el tutorial:

Vamos a Personalizar y luego a Diseño->Edición de HTML y damos a Expandir plantillas de artilugios.

En el código buscamos la siguiente etiqueta:

<head>

Y justo antes pegamos el siguiente script:


<!-- INICIO CODIGO AÑADIDO PARA AÑADIR COPOS DE NIEVE CAYENDO-->
 <script type="text/javascript">
  //<![CDATA[
   /*
   DHTML Snowstorm! OO-style Jascript-based Snow effect
   ----------------------------------------------------
   Version 1.4.20091115 (Previous rev: v1.3.20081215)
   Code by Scott Schiller - http://schillmania.com
   ----------------------------------------------------
   Initializes after body onload() by default (via addEventHandler() call at bottom.)
   To customize properties, edit below or override configuration after this script
   has run (but before body.onload), eg. snowStorm.snowStick = false;
   */
   var snowStorm = null;

   function SnowStorm()
   {
    // --- PROPERTIES ---
    this.flakesMax = 150;          // Limit total amount of snow made (falling + sticking)
    this.flakesMaxActive = 64;         // Limit amount of snow falling at once (less = lower CPU use)
    this.animationInterval = 33;        // Theoretical "miliseconds per frame" measurement. 20 = fast + smooth, but high CPU use. 50 = more conservative, but slower
    this.flakeBottom = null;          // Integer for Y axis snow limit, 0 or null for "full-screen" snow effect
    this.targetElement = null;          // element which snow will be appended to (document body if null/undefined) - can be an element ID string, or a DOM node reference
    this.followMouse = true;          // Snow will change movement with the user's mouse
    this.snowColor = '#fff';          // Don't eat (or use?) yellow snow.
    this.snowCharacter = '&bull;';         // &bull; = bullet, &middot; is square on some systems etc.
    this.snowStick = true;           // Whether or not snow should "stick" at the bottom. When off, will never collect.
    this.useMeltEffect = true;          // When recycling fallen snow (or rarely, when falling), have it "melt" and fade out if browser supports it
    this.useTwinkleEffect = false;         // Allow snow to randomly "flicker" in and out of view while falling
    this.usePositionFixed = false;         // true = snow not affected by window scroll. may increase CPU load, disabled by default - if enabled, used only where supported
    // --- less-used bits ---
    this.flakeLeftOffset = 0;          // amount to subtract from edges of container
    this.flakeRightOffset = 0;          // amount to subtract from edges of container
    this.flakeWidth = 8;           // max pixel width for snow element
    this.flakeHeight = 8;           // max pixel height for snow element
    this.vMaxX = 5;            // Maximum X velocity range for snow
    this.vMaxY = 4;            // Maximum Y velocity range
    this.zIndex = 0;            // CSS stacking order applied to each snowflake
    // --- End of user section ---
    // jslint global declarations
    /*global window, document, navigator, clearInterval, setInterval */
    var addEvent  = (typeof(window.attachEvent)=='undefined'?function(o,evtName,evtHandler) { return o.addEventListener(evtName,evtHandler,false); }:function(o,evtName,evtHandler) { return o.attachEvent('on'+evtName,evtHandler); });
    var removeEvent = (typeof(window.attachEvent)=='undefined'?function(o,evtName,evtHandler) { return o.removeEventListener(evtName,evtHandler,false); }:function(o,evtName,evtHandler) { return o.detachEvent('on'+evtName,evtHandler); });
   
    function rnd(n,min)
    {
     if (isNaN(min)) min = 0;
     return (Math.random()*n)+min;
    }
    function plusMinus(n) { return (parseInt(rnd(2),10)==1?n*-1:n); }

    var s = this;
    var storm = this;
    this.timers = [];
    this.flakes = [];
    this.disabled = false;
    this.active = false;

    var isIE = navigator.userAgent.match(/msie/i);
    var isIE6 = navigator.userAgent.match(/msie 6/i);
    var isOldIE = (isIE && (isIE6 || navigator.userAgent.match(/msie 5/i)));
    var isWin9X = navigator.appVersion.match(/windows 98/i);
    var isiPhone = navigator.userAgent.match(/iphone/i);
    var isBackCompatIE = (isIE && document.compatMode == 'BackCompat');
    var noFixed = ((isBackCompatIE || isIE6 || isiPhone)?true:false);
    var screenX = null;
    var screenX2 = null;
    var screenY = null;
    var scrollY = null;
    var vRndX = null;
    var vRndY = null;
    var windOffset = 1;
    var windMultiplier = 2;
    var flakeTypes = 6;
    var fixedForEverything = false;
    var opacitySupported = (function()
    {
     try   { document.createElement('div').style.opacity = '0.5'; }
     catch (e) { return false; }
     return true;
    })();
    var docFrag = document.createDocumentFragment();
    if (s.flakeLeftOffset === null)  s.flakeLeftOffset = 0;
    if (s.flakeRightOffset === null) s.flakeRightOffset = 0;
    this.meltFrameCount = 20;
    this.meltFrames = [];
    for (var i=0; i<this.meltFrameCount; i++) this.meltFrames.push(1-(i/this.meltFrameCount));
    this.randomizeWind = function()
    {
     vRndX = plusMinus(rnd(s.vMaxX,0.2));
     vRndY = rnd(s.vMaxY,0.2);
     if (this.flakes)
     {
      for (var i=0; i<this.flakes.length; i++)
      {
       if (this.flakes[i].active) this.flakes[i].setVelocities();
      }
     }
    };

    this.scrollHandler = function()
    {
    // "attach" snowflakes to bottom of window if no absolute bottom value was given
     scrollY = (s.flakeBottom?0:parseInt(window.scrollY||document.documentElement.scrollTop||document.body.scrollTop,10));
     if (isNaN(scrollY)) scrollY = 0; // Netscape 6 scroll fix
     if (!fixedForEverything && !s.flakeBottom && s.flakes)
     {
      for (var i=s.flakes.length; i--;)
      {
       if (s.flakes[i].active === 0) s.flakes[i].stick();
      }
     }
    };

    this.resizeHandler = function()
    {
     if (window.innerWidth || window.innerHeight)
     {
      screenX = window.innerWidth-(!isIE?16:2)-s.flakeRightOffset;
      screenY = (s.flakeBottom?s.flakeBottom:window.innerHeight);
     }
     else
     {
      screenX = (document.documentElement.clientWidth||document.body.clientWidth||document.body.scrollWidth)-(!isIE?8:0)-s.flakeRightOffset;
      screenY = s.flakeBottom?s.flakeBottom:(document.documentElement.clientHeight||document.body.clientHeight||document.body.scrollHeight);
     }
     screenX2 = parseInt(screenX/2,10);
    };

    this.resizeHandlerAlt = function()
    {
     screenX = s.targetElement.offsetLeft+s.targetElement.offsetWidth-s.flakeRightOffset;
     screenY = s.flakeBottom?s.flakeBottom:s.targetElement.offsetTop+s.targetElement.offsetHeight;
     screenX2 = parseInt(screenX/2,10);
    };

    this.freeze = function()
    {
     // pause animation
     if (!s.disabled) s.disabled = 1;
     else    return false;
     for (var i=s.timers.length; i--;) clearInterval(s.timers[i]);   
    };

    this.resume = function()
    {
     if (s.disabled)  s.disabled = 0;
     else    return false;
     s.timerInit();
    };

    this.toggleSnow = function()
    {
     if (!s.flakes.length) s.start();  // first run
     else
     {
      s.active = !s.active;
      if (s.active)
      {
       s.show();
       s.resume();
      }
      else
      {
       s.stop();
       s.freeze();
      }
     }
    };

    this.stop = function()
    {
     this.freeze();
     for (var i=this.flakes.length; i--;) this.flakes[i].o.style.display = 'none';
     removeEvent(window,'scroll',s.scrollHandler);
     removeEvent(window,'resize',s.resizeHandler);
     if (!isOldIE)
     {
      removeEvent(window,'blur',s.freeze);
      removeEvent(window,'focus',s.resume);
     }
    };
    this.show = function() { for (var i=this.flakes.length; i--;) this.flakes[i].o.style.display = 'block'; };
    this.SnowFlake = function(parent,type,x,y)
    {
     var s = this;
     var storm = parent;
     this.type = type;
     this.x = x||parseInt(rnd(screenX-20),10);
     this.y = (!isNaN(y)?y:-rnd(screenY)-12);
     this.vX = null;
     this.vY = null;
     this.vAmpTypes = [1,1.2,1.4,1.6,1.8]; // "amplification" for vX/vY (based on flake size/type)
     this.vAmp = this.vAmpTypes[this.type];
     this.melting = false;
     this.meltFrameCount = storm.meltFrameCount;
     this.meltFrames = storm.meltFrames;
     this.meltFrame = 0;
     this.twinkleFrame = 0;
     this.active = 1;
     this.fontSize = (10+(this.type/5)*10);
     this.o = document.createElement('div');
     this.o.innerHTML = storm.snowCharacter;
     this.o.style.color = storm.snowColor;
     this.o.style.position = (fixedForEverything?'fixed':'absolute');
     this.o.style.width = storm.flakeWidth+'px';
     this.o.style.height = storm.flakeHeight+'px';
     this.o.style.fontFamily = 'arial,verdana';
     this.o.style.overflow = 'hidden';
     this.o.style.fontWeight = 'normal';
     this.o.style.zIndex = storm.zIndex;
     docFrag.appendChild(this.o);

     this.refresh = function()
     {
      if (isNaN(s.x) || isNaN(s.y)) return false; // safety check
      s.o.style.left = s.x+'px';
      s.o.style.top = s.y+'px';
     };
     this.stick = function()
     {
      if (noFixed || (storm.targetElement != document.documentElement && storm.targetElement != document.body)) s.o.style.top = (screenY+scrollY-storm.flakeHeight)+'px';
      else
      {
       if (storm.flakeBottom) s.o.style.top = storm.flakeBottom+'px';
       else
       {
        s.o.style.display = 'none';
        s.o.style.top = 'auto';
        s.o.style.bottom = '0px';
        s.o.style.position = 'fixed';
        s.o.style.display = 'block';
       }
      }
     };
     this.vCheck = function()
     {
      if (s.vXgt;=0 && s.vX<0.2)  s.vX = 0.2;
      else if (s.vX<0 && s.vX>-0.2) s.vX = -0.2;
      if (s.vY>=0 && s.vY<0.2)  s.vY = 0.2;
     };
     this.move = function()
     {
      var vX = s.vX*windOffset;
      s.x += vX;
      s.y += (s.vY*s.vAmp);
      if (s.x >= screenX || screenX-s.x < storm.flakeWidth) s.x = 0;// X-axis scroll check
      else if (vX < 0 && s.x-storm.flakeLeftOffset<0-storm.flakeWidth) s.x = screenX-storm.flakeWidth-1; // flakeWidth;
      s.refresh();
      var yDiff = screenY+scrollY-s.y;
      if (yDiff<storm.flakeHeight)
      {
       s.active = 0;
       if (storm.snowStick) s.stick();
       else     s.recycle();
      }
      else
      {
       if (storm.useMeltEffect && s.active && s.type < 3 && !s.melting && Math.random()>0.998)
       {
        // ~1/1000 chance of melting mid-air, with each frame
        s.melting = true;
        s.melt();
        // only incrementally melt one frame
        // s.melting = false;
       }
       if (storm.useTwinkleEffect)
       {
        if (!s.twinkleFrame)
        {
         if (Math.random()>0.9) s.twinkleFrame = parseInt(Math.random()*20,10);
        }
        else
        {
         s.twinkleFrame--;
         s.o.style.visibility = (s.twinkleFrame && s.twinkleFrame%2===0?'hidden':'visible');
        }
       }
      }
     };
     this.animate = function()
     {
      // main animation loop
      // move, check status, die etc.
      s.move();
     };
     this.setVelocities = function()
     {
      s.vX = vRndX+rnd(storm.vMaxX*0.12,0.1);
      s.vY = vRndY+rnd(storm.vMaxY*0.12,0.1);
     };

     this.setOpacity = function(o,opacity)
     {
      if (!opacitySupported) return false;
      o.style.opacity = opacity;
     };

     this.melt = function()
     {
      if (!storm.useMeltEffect || !s.melting) s.recycle();
      else
      {
       if (s.meltFrame < s.meltFrameCount)
       {
        s.meltFrame++;
        s.setOpacity(s.o,s.meltFrames[s.meltFrame]);
        s.o.style.fontSize = s.fontSize-(s.fontSize*(s.meltFrame/s.meltFrameCount))+'px';
        s.o.style.lineHeight = storm.flakeHeight+2+(storm.flakeHeight*0.75*(s.meltFrame/s.meltFrameCount))+'px';
       }
       else s.recycle();
      }
     };

     this.recycle = function()
     {
      s.o.style.display = 'none';
      s.o.style.position = (fixedForEverything?'fixed':'absolute');
      s.o.style.bottom = 'auto';
      s.setVelocities();
      s.vCheck();
      s.meltFrame = 0;
      s.melting = false;
      s.setOpacity(s.o,1);
      s.o.style.padding = '0px';
      s.o.style.margin = '0px';
      s.o.style.fontSize = s.fontSize+'px';
      s.o.style.lineHeight = (storm.flakeHeight+2)+'px';
      s.o.style.textAlign = 'center';
      s.o.style.verticalAlign = 'baseline';
      s.x = parseInt(rnd(screenX-storm.flakeWidth-20),10);
      s.y = parseInt(rnd(screenY)*-1,10)-storm.flakeHeight;
      s.refresh();
      s.o.style.display = 'block';
      s.active = 1;
     };
     this.recycle(); // set up x/y coords etc.
     this.refresh();
    };

    this.snow = function()
    {
     var active = 0;
     var used = 0;
     var waiting = 0;
     var flake = null;
     for (var i=s.flakes.length; i--;)
     {
      if (s.flakes[i].active == 1)
      {
       s.flakes[i].move();
       active++;
      }
      else if (s.flakes[i].active === 0) used++;
      else waiting++;
      if (s.flakes[i].melting) s.flakes[i].melt();
     }
     if (active<s.flakesMaxActive)
     {
      flake = s.flakes[parseInt(rnd(s.flakes.length),10)];
      if (flake.active === 0) flake.melting = true;
     }
    };

    this.mouseMove = function(e)
    {
     if (!s.followMouse) return true;
     var x = parseInt(e.clientX,10);
     if (x<screenX2) windOffset = -windMultiplier+(x/screenX2*windMultiplier);
     else
     {
      x -= screenX2;
      windOffset = (x/screenX2)*windMultiplier;
     }
    };
    this.createSnow = function(limit,allowInactive)
    {
     for (var i=0; i<limit; i++)
     {
      s.flakes[s.flakes.length] = new s.SnowFlake(s,parseInt(rnd(flakeTypes),10));
      if (allowInactive || i>s.flakesMaxActive) s.flakes[s.flakes.length-1].active = -1;
     }
     storm.targetElement.appendChild(docFrag);
    };

    this.timerInit = function()
    {
     s.timers = (!isWin9X?[setInterval(s.snow,s.animationInterval)]:[setInterval(s.snow,s.animationInterval*3),setInterval(s.snow,s.animationInterval)]);
    };

    this.init = function()
    {
     s.randomizeWind();
     s.createSnow(s.flakesMax); // create initial batch
     addEvent(window,'resize',s.resizeHandler);
     addEvent(window,'scroll',s.scrollHandler);
     if (!isOldIE)
     {
      addEvent(window,'blur',s.freeze);
      addEvent(window,'focus',s.resume);
     }
     s.resizeHandler();
     s.scrollHandler();
     if (s.followMouse) addEvent(document,'mousemove',s.mouseMove);
     s.animationInterval = Math.max(20,s.animationInterval);
     s.timerInit();
    };
   
    var didInit = false;
    this.start = function(bFromOnLoad)
    {
     if (!didInit)   didInit = true;
     else if (bFromOnLoad) return true; // already loaded and running
     if (typeof s.targetElement == 'string')
     {
      var targetID = s.targetElement;
      s.targetElement = document.getElementById(targetID);
      if (!s.targetElement) throw new Error('Snowstorm: Unable to get targetElement "'+targetID+'"');
     }
     if (!s.targetElement) s.targetElement = (!isIE?(document.documentElement?document.documentElement:document.body):document.body);
     if (s.targetElement != document.documentElement && s.targetElement != document.body) s.resizeHandler = s.resizeHandlerAlt; // re-map handler to get element instead of screen dimensions
     s.resizeHandler(); // get bounding box elements
     s.usePositionFixed = (s.usePositionFixed && !noFixed); // whether or not position:fixed is supported
     fixedForEverything = s.usePositionFixed;
     if (screenX && screenY && !s.disabled)
     {
      s.init();
      s.active = true;
     }
    };
    function doStart() { s.start(true); }
    if (document.addEventListener)
    {
     // safari 3.0.4 doesn't do DOMContentLoaded, maybe others - use a fallback to be safe.
     document.addEventListener('DOMContentLoaded',doStart,false);
     window.addEventListener('load',doStart,false);
    }
    else addEvent(window,'load',doStart);
   } 
   snowStorm = new SnowStorm();
  //]]>
 </script>
 <!-- FIN CODIGO AÑADIDO PARA AÑADIR COPOS DE NIEVE CAYENDO-->

Con eso basta, pero también podemos cambiar algunos aspectos de configuración como el número de copos. Para ello buscamos dentro del nuevo código añadido la siguiente línea:
```
this.flakesMax = 150;
```
Salimos guardando los cambios y ya podemos comprobar el efecto en el blog.

Y eso es todo. Es bastante fácil.

Salu2,
elSant0

Pagerank, un ingenio de Google que transforma internet día a día

Para los que estáis más involucrados en el mundo de internet puede que ya os suene o conozcáis qué es el PageRank. El PageRank (PR) es un valor numérico entero, entre 0 y 10, que representa la importancia que una página web tiene en Internet; o al menos eso es lo que nos dice Google desde 1999. El valor 10 sería dado para webs de muchísima importancia (son muy pocos los sitios que gozan de esta calificación), el valor 1 es la calificación mínima que recibe un sitio normal, y valor 0 significa que el sitio ha sido penalizado o aún no ha recibido calificación. Fue concebido por los fundadores de Google, Larry Page y Sergey Brin, en la Universidad de Stanford.

Para Google este valor es imprescindible e influye directamente al ordenar los resultados de búsqueda, al indicar la fiabilidad de una web, al optimizar los tiempos que tardan las búsquedas en realizarse,...

Pero ¿cómo saber cual es el PageRank de una web? Dicho valor es dado por su creador, el propio Google, el cual se encarga de calcularlo mediante una ecuación que contiene más de 500 millones de variables y 2.000 millones de términos. La fórmula real utilizada por Google es secreta y es modificada constantemente con el fin de optimizar los resultados (según criterios del propio Google). El algoritmo inicial lo podemos encontrar en el documento original donde sus creadores presentaron el prototipo de Google (“The Anatomy of a Large-Scale Hypertextual Web Search Engine"):
$PR(A) = (1-d) + d * \sum_{i=1}^n {PR(i) \over C(i)}$ Donde:

PR(A) es el PageRank de la página A.
d es un factor de amortiguación que tiene un valor entre 0 y 1. Algunos expertos aseguran que su valor suele ser 0,85.
PR(i) son los valores de PageRank que tienen cada una de las páginas i que enlazan a A.
C(i) es el número total de enlaces salientes de la página i (sean o no hacia A).

Viendo el algoritmo inicial podemos comprobar que el valor de PageRank se basa esencialmente en los enlaces que posee la propia web y en los enlaces hacia ésta que hayan en otras páginas, además del mismo PageRank de esas páginas. Es decir, una página que está enlazada por muchas páginas con un PageRank alto consigue también un PageRank alto; si no hay enlaces a una página web, no hay apoyo a esa página específica.

Además, Google se reserva el comunicar el PageRank de cada web, actualizado constantemente, con el fin de evitar que alguien descifre dicha fórmula y así pueda influir seriamente y de manera intencionada en las búsquedas. Google tan sólo facilita el PageRank cada varios meses para que los usuarios tengan una idea aproximada de cual es la repercusión de cada web en la red y, además, el gigante americano tarda varios días en comunicar el valor de todas las webs que tiene indexadas.

Hasta aquí todo parece "perfecto". Aparentemente es una tecnología bien pensada, imparcial y justa. Pero el sistema de PageRank esconde muchos más defectos de lo que los usuarios percibimos.

Debido a la importancia comercial que tiene aparecer entre los primeros resultados del buscador más usado del mundo, se han diseñado métodos para manipular artificialmente el PageRank de una página. Entre estos métodos hay que destacar el constante uso de spam (añadir enlaces a webs no relacionadas en blogs y similares), libros de visitas, foros de Internet, "amiguismo" webs,... todo con la intención de incrementar el número de enlaces que apuntan a/desde la página y así conseguir mejor valoración.

Además, la tecnología PageRank es incapaz de valorar objetivamente los contenidos de una web, ¿cómo medir la cultura, la originalidad, la constancia,...?. PageRank lo hace basándose en clics de ratón, pero ¿cómo conseguir esos primeros clics de ratón si el lugar por defecto de búsqueda de la mayoría (Google) no te los puede dar?. Es como "el pez que se muerde su cola".

Todo esto es lo que me lleva a escribir estas líneas. No soy uno más de los que se revelan contra grandes empresas como Google, Microsoft o Intel utilizando argumentos como el monopolio o la imposición. Google me sigue pareciendo el buscador más óptimo y avanzado. Pero me molesta saber que hay webs cuyo valor real es altísimo y sin embargo pasan desapercibidas por la mayoría. Así como toparme incesantemente con páginas áridas, casi inútiles, y tener que pasearme por ellas porque Google me aboque sobre sus enlaces.

Por si todo esto fuera poco, la tecnología PageRank está cambiando la evolución de la red contínuamente. Los que lleváis más años navegando quizás podáis recordar los tiempos en que Google no era la página de inicio de casi todos. Por aquellos tiempos todo era mucho más lento: las búsquedas, las cargas, los PCs,... pero seguro que estaréis de acuerdo en que la publicidad, el spam y la sobrecarga visual de las páginas no era un problema. Sean estos obstáculos fruto del PageRank o no, está claro que uno de los factores que ayudan a su proliferación es la importancia dada a ese valor.

En fin, no nos queda otra que aguantar las variaciones que la incesante evolución tecnología nos impone. Existen alternativas a PageRank, como por ejemplo el algoritmo HITS, pero cada cual tiene sus bondades y defectos y si PageRank no les da la alternativa es porque sigue siendo más optimo para la mayoría. Lo que sí hay que considerar importante es conocer los fallos de aquello que usamos y no aceptarlos sin más.

Como extra aquí os dejo un enlace a una web que informa sobre el PageRank de la web que deseéis:

http://www.mipagerank.com

Salu2,
elSant0

Opción "Leer más..." en la página de inicio del blog

Desde los inicios del blog tomé la decisión de presentar tan sólo un post en mi página de inicio. Eso era así con el fin de dar mayor importancia a dicho post sobre los anteriores. De esa manera esperaba que las visitas se centrarán más en él.

Pues mi opinión al respecto ha cambiado. Al escribir sobre temas muy dispares he pensado que sería mejor mantener en la página inicial los últimos post y que seais vosotros quienes decidís si el post es de vuestro interés o no.

Pero como me gusta escribir, a menudo, post bastante largos, eso me impedía dar una visión general de varios artículos (el primero seguía acaparando toda la atención). Por eso he decidido mostrar una introducción de cada artículo acompañada del botón "Leer más...", el cual se encarga de enlazar a la página individual del post. Además, otra de las ventajas que proporciona el forzar a los lectores a pasar por la página individual del post es que les "acerca" a los comentarios, pudiendo conseguir así, más fácilmente, opiniones que me ayuden a mejorar.

En fin, vayamos al grano. Veamos como conseguir que en la página de inicio se muestre tan solo un breve resumen y una imagen en miniatura para los últimos artículos:

Lo primero que haremos será ir a Personalizar, y a Diseño-->Edición HTML y marcamos la casilla de Expandir plantillas de artilugios.
Una vez hecho, en el código buscamos la siguiente etiqueta:
```
<data:post.body/>
```

La etiqueta anterior la borramos y en su lugar ponemos el siguiente código:

<b:if cond='data:blog.url == data:blog.homepageUrl'>
   <div expr:id='"blportadarsmn" + data:post.id'>
      <data:post.body/>
   </div>
   <script type='text/javascript'>
      blentradaresmn("blportadarsmn");
   </script>
   <span class='blenlaceleerms' style='float:right'>
      <a expr:href='data:post.url'> Leer más...</a>
   </span>
</b:if>
<b:if cond='data:blog.pageType == "item"'>
   <data:post.body/>
</b:if>

Ahora, buscamos la siguiente etiqueta:

</head>

Y justo antes añadimos el siguiente código:

<script type='text/javascript'>
   blresumenno = 420;      /* número máximo de caracteres a mostrar */
   blresumensi = 340;      /* número mínimo de caracteres a mostrar*/ 
   blalturaimg = 100;      /* Altura en píxeles de la imagen a mostrar */ 
   img_thumb_width = 120;  /* Ancho en pixeles de la imagen a mostrar */
</script>
<script type='text/javascript'>
   //<![CDATA[
   function bltred(strx,chop)
   {
      if(strx.indexOf("<")!=-1)
      {
         var s = strx.split(">");
         for(var i=0;i<s.length;i++)
         {
            if(s[i].indexOf(">")!=-1)
            {
               s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
            }
         }
         strx = s.join("");
      }
      chop = (chop < strx.length-1) ? chop : strx.length-2;
      while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;
      strx = strx.substring(0,chop-1);
      return strx+'...';
   }
   function blentradaresmn(pID)
   {
      var div = document.getElementById(pID);
      var blimgn1 = "";
      var img = div.getElementsByTagName("img");
      var blpost = blresumenno;
      if(img.length>=1)
      {
         blimgn1 = '<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+blalturaimg+'px"/></span>';
         blpost = blresumensi;
      }
      var blportadarsmn = blimgn1 + '<div>' + bltred(div.innerHTML,blpost) + '</div>';
      div.innerHTML = blportadarsmn;
   }
   //]]>
</script>

Con eso basta para que todo funcione, pero vamos a personalizar un poco el enlace "Leer más", enmarcándolo y añadiéndole un color de fondo. Para ello buscamos la siguiente etiqueta:
```
]]></b:skin>
```
Y justo antes añadimos el siguiente código:
```
.blenlaceleerms
{
   border: 1px solid #FFCC33;   /* Bordes del enlace */
   padding: 4px;                /* Distancia hasta el borde */
   background: #A7A42F;         /* Color de fondo */
}
```
Salimos guardando los cambios y ya podemos comprobar el efecto en el blog. Recuerda que para configurar el número de post de la página de inicio puedes hacerloen el apartado Configuración.

Y eso es todo. Es bastante fácil, espero que os sea práctico como me fue a mi.

Salu2,
elSant0

Quitar espacio vacío debajo del cuadro de comentarios

Una de las cosas que hay que corregir en las plantillas de blogger es este espacio excesivo que deja bajo los comentarios, tal y como indico con la flecha roja en la imagen.

Es muy simple de conseguir. Haremos lo siguiente:

Vamos a Personalizar, y luego a Diseño-->Edición de HTML. Damos a Expandir plantilla de artilugiosy buscamos el siguiente código (si no igual, parecido):


<b:includable id='comment-form' var='post'>
<div class='comment-form'>
<a name='comment-form'/>
<h4 id='comment-post-message'><data:postCommentMsg/>>/h4>
<p><data:blogCommentMessage/<>/p>
<data:blogTeamBlogMessage/>
<a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/>
<iframe allowtransparency='true' class='blogger-iframe-colorize blogger-comment-from-post' frameborder='0' height='410' id='comment-editor' name='comment-editor' src='' width='100%'/>
<data:post.friendConnectJs/>
<data:post.cmtfpIframe/>
<script type='text/javascript'>
BLOG_CMT_createIframe('<data:post.appRpcRelayPath/<', '<data:post.communityId/>');
</script>
</div>
</b:includable>

dentro de ese código encontramos (yo lo he marcado en otro color para que se vea donde está) "height='410'". Esa es la altura del frame que contiene los botones de Comentario. Sólo habrá que reducir dicho número hasta que se visualice correctamente. En mi caso el valor que tuve que dar fué "height='225'".

Espero que os sirva.

Salu2,
elSant0

Escribir columnas en los Post

Por casualidad hoy he encontrado el código necesario para dividir los post en columnas. La verdad, ya sabía que era posible, pero como es algo que no suelo utilizar no lo recordaba.

Como me parece algo curioso y fácil de conseguir, aquí dejo como hacerlo. Para quien esté interesado, el código es el siguiente:

<div style="float: left; width: 45%">
   TEXTO A MOSTRAR EN LA COLUMNA IZQUIERDA
</div>
<div style="float: right; width: 45%">
   TEXTO A MOSTRAR EN LA COLUMNA DERECHA
</div>
<div style="clear: both"></div>

Donde "45%" es el ancho usado para la columna respecto al ancho total del post.

Este es un ejemplo de como quedaría al ser usado:

Discurso que Steve Jobs, CEO de Apple Computer y de Pixar Animation Studios, dictó el 12 de
Junio de 2005 en la ceremonia de graduación de la Universidad de Stanford.

“Tienen que encontrar eso que aman”
Me siento honrado de estar con ustedes hoy en su ceremonia de graduación en una de
las mejores universidades del mundo. Yo nunca me gradué de una universidad. La verdad
sea dicha, esto es lo más cerca que he estado de una graduación. Hoy deseo contarles tres
historias de mi vida. Eso es. No es gran cosa. Sólo tres historias.

La primera historia se trata de conectar los puntos

Me retiré del Reed College después de los primeros 6 meses y seguí yendo de modo
intermitente otros 18 meses o más antes de renunciar de verdad. Entonces ¿por qué me
retiré?.
Comenzó antes de que yo naciera. Mi madre biológica era joven, estudiante de
universidad graduada, soltera, y decidió darme en adopción. Ella creía firmemente que debía
ser adoptado por estudiantes graduados. Por lo tanto, todo estaba arreglado para que
apenas naciera fuera adoptado por un abogado y su esposa; salvo que cuando nací,
decidieron en el último minuto que en realidad deseaban una niña. De ese modo, mis padres
que estaban en lista de espera, recibieron una llamada en medio de la noche
preguntándoles: “Tenemos un niño no deseado; ¿lo quieren?”. Ellos dijeron “Por supuesto”.
Posteriormente, mi madre biológica se enteró que mi madre nunca se había graduado de
una universidad y que mi padre nunca se había graduado de la enseñanza media. Se negó a
firmar los papeles de adopción definitivos. Sólo cambió de parecer unos meses más tarde
cuando mis padres prometieron que algún día yo iría a la universidad.
Luego a los 17 años fui a la universidad. Sin embargo, ingenuamente elegí una
universidad casi tan cara como Stanford y todos los ahorros de mis padres de clase obrera
fueron gastados en mí matrícula. Después de 6 meses yo no era capaz de apreciar el valor
de lo anterior. No tenía idea de lo que quería hacer con mi vida y no tenía idea de la manera
en que la universidad me iba a ayudar a deducirlo. Y aquí estaba yo, gastando todo el dinero
que mis padres habían ahorrado durante toda su vida. Así que decidí retirarme y confiar en
que todo iba a resultar bien. Fue bastante aterrador en ese momento, pero mirando hacia
atrás fue una de las mejores decisiones que tomé. Apenas me retiré, pude dejar de asistir a
las clases obligatorias que no me interesaban y comencé a asistir irregularmente a las que
se veían interesantes.

No todo fue romántico. No tenía dormitorio, dormía en el piso de los dormitorios de
amigos, llevaba botellas de Coca Cola a los depósitos de 5 centavos para comprar comida y
caminaba 11 kilómetros, cruzando la ciudad todos los domingos en la noche para conseguir
una buena comida a la semana en el templo Hare Krishna. Me encantaba. La mayor parte de
las cosas con que tropecé siguiendo mi curiosidad e intuición resultaron ser inestimables
posteriormente. Les doy un ejemplo: en ese tiempo Reed College ofrecía quizás la mejor
instrucción en caligrafía del país. Todos los afiches, todas las etiquetas de todos los cajones
estaban bellamente escritos en caligrafía a mano en todo el campus. Debido a que me había
retirado y no tenía que asistir a las clases normales, decidí tomar una clase de caligrafía
para aprender. Aprendí de los tipos serif y san serif, de la variación de la cantidad de espacio
entre las distintas combinaciones de letras, de lo que hace que la gran tipografía sea lo que
es. Fue hermoso, histórico, artísticamente sutil de una manera en que la ciencia no logra
capturar, y lo encontré fascinante.
Nada de esto tenía incluso una esperanza de aplicación práctica en mi vida. No obstante,
diez años después, cuando estaba diseñando la primera computadora Macintosh, todo tuvo
sentido para mí. Y todo lo diseñamos en la Mac. Fue la primera computadora con una bella
tipografía. Si nunca hubiera asistido a ese único curso en la universidad, la Mac nunca habría
tenido tipos múltiples o fuentes proporcionalmente espaciadas. Además, puesto que
Windows sólo copió la Mac, es probable que ninguna computadora personal la tendría. Si
nunca me hubiera retirado, nunca habría asistido a esa clase de caligrafía, y las
computadoras personales no tendrían la maravillosa tipografía que tienen. Por supuesto era
imposible conectar los puntos mirando hacia el futuro cuando estaba en la universidad. Sin
embargo, fue muy, muy claro mirando hacia el pasado diez años después.
Reitero, no pueden conectar los puntos mirando hacia el futuro; solamente pueden
conectarlos mirando hacia el pasado. Por lo tanto, tienen que confiar en que los puntos de
alguna manera se conectarán en su futuro. Tienen que confiar en algo – su instinto, su
destino, su vida, su karma, lo que sea. Esta perspectiva nunca me ha decepcionado, y ha
hecho la diferencia en mi vida.

La segunda historia...
.
.
.

Personalmente, para quien se decida a usarlo hago algunas recomendaciones:

Usar columnas suficientemente anchas o letra suficientemente pequeña para evitar renglones casi vacíos debido al tamaño de las palabras.
No utilizar "alineación completa" en el formato, ya que pueden quedar muchas líneas medio vacías junto al resto de líneas "llenas" por el efecto de la alineación.
Utilizar sangrías cortas e interlineado medio.

Si necesitáis ayuda para conseguirlo o para modificar el formato podéis poneros en contacto conmigo.

Salu2,
elSanto

Crear un gadget nuevo en Blogger

Al intentar añadir elementos ofrecidos por webs ajenas a Blogger (contadores de visitas, mapas de localización,...) me encontré con un problema. Estas páginas ofrecen sus servicios dando una porción de código HTML pero, probando a insertarlo directamente en mi plantilla en casi todos los lugares obtenía errores en el código.

Para solucionar esto explicaré como insertar estas porciones de código (y cualquier otra que deseemos) en forma de gadget para así poder colocarlo donde nos plazca en nuestra plantilla.

Para ello hacemos lo siguiente:

Vamos a Personalizar y luego a Diseño.
En los elementos de la página damos a Añadir un Gadget.
En la ventana que se nos abre buscamos el gadget llamado "HTML/JavaScript" y clicamos sobre él.
En las opciones de edición que se nos mostrarán tras ello es donde debemos añadir el código a insertar.
Una vez hecho aceptamos y movemos el gadget donde deseamos colocarlo (podemos hacerlo directamente desde esa misma página de edición o desde el código de nuestra plantilla del blog, en Edición de HTML).

Espero os sea de utilidad.

Salu2,
elSant0

Añadir un contador y un localizador de visitas al blog

He decidido añadir algunos artilugios de estadisticas al blog con el fin de tener unas pocas referencias sobre las visitas que recibo. De momento he añadido un contador de visitas y un globo terraqueo donde controlar su origen, aunque supongo que con el tiempo iré ampliando el repertorio conforme lo crea necesario.

Añadir estos 2 widgets (el contador de visitas y el globo terraqueo) a nuestra web es muy sencillo, aunque hay varias maneras de conseguirlo.

En caso de que tengamos una web que nos permita alojar y manipular script u otros modos de información activa (bases de datos,...) podemos añadir los elementos de manera totalmente independiente. Pero este no es el caso de Blogger y otros servicios similares, por lo que para añadir allí estos artilugios será necesario depender de webs externas que nos los gestionen (lo cual no es un problema y más adelante veremos por qué).

La manera más simple de añadir artilugios de estadisticas (contadores, localizadores de visitantes,...) es buscar alguna página externa que nos suministre el código HTML y posteriormente registrar dicho código en nuestro blog. Muchas de estas páginas son gratuitas, algunas son: contadorweb.com, contadorgratis.net, micontador.es, 24log.es, revolvermaps.com, ...
Cada una de estas páginas se diferencian esencialmente de las otras en el idioma, los diseños de contadores y/o mapas que ofrecen y en el método de registro (si es necesario, sencillez, rapidez, cantidad de datos solicitados,...).

A la hora de elegir se ha de tener en cuenta que los contadores y mapas simples, a pesar de la ventaja de su simpleza al mostrar el número de visitas/páginas vistas, tienen los siguientes incovenientes:

Solo permiten saber el número de veces que se han visitado las páginas, pero no el número de usuarios diferentes recibidos.
No permiten saber otros datos de interes de los visitantes.

Claro está que si lo que se desea es obtener más información también se puede optar por insertar en nuestra página un servicio de estadísticas web u otros artilugios complementarios.

Otro dato muy importante a tener en cuenta es si el código hace uso de JavaScript, o de Flash,... Esto puede suponer (o no) un inconveniente en cuanto a a la carga de nuestra web (se pueden necesitar plugins, puede ralentizar la caga,...).

Aclarados los principales puntos a tener en cuenta, voy a explicar como insertar el contador de visitas desde contador-de-visitas.com y el globo terráqueo de localización de visitas desde revolvermaps.com.

Contador de visitas

Nos dirigimos a la web contador-de-visitas.com.
Indicamos el formato que deseamos, el número inicial del contador y la web donde lo alojaremos:
Tras clicar en OK (junto al campo donde indicamos nuestra web) nos aparecerá una nueva pantalla donde nos proporcionan el código que debemos añadir en nuestra web:
Copiamos dicho código y lo pegamos en la plantilla de nuestra web,donde deseemos tener el contador (si deseamos añadirlo como un widget a nuestra sidebar u otro sitio mira este otro post).

Globo terraqueo localizador de visitas

Nos dirigimos a la web revolvermaps.com.
Clicamos sobre el tipo de globo (o mapa, o enlace) que deseamos añadir:
Tras clicar nos aparecerá una nueva pantalla donde nos permiten configurar algunos aspectos del tipo elegido y, más abajo, nos ofrecen el código a en nuestra web:
Copiamos dicho código y lo pegamos en la plantilla de nuestra web, donde deseemos tener el contador (si deseamos añadirlo como un widget a nuestra sidebar u otro sitio mira este otro post).

Salu2,
elSant0

Añadir iconos de traducción a nuestra web

Desde los primeros días del blog, una de las funcionalidades que quería añadir era la opción de traducción rápida de las entradas a otros idiomas.

Las opciones disponibles son muchas, desde realizar yo mismo la traducción (a través de cualquier medio) y añadirla íntegra al blog, hasta usar un servicio externo que se encargue de ello.

Puesto que integrar una traducción personalizada llevaría mucho tiempo, me he decantado por usar un servicio externo (al igual que hacen la mayoría de webs). Y tras probar los más conocidos, he elegido Google Translate. Éste es, con diferencia, el que conseguía traducciones más fieles y comprensibles, aunque tampoco es ninguna maravilla; aún queda mucho camino que recorrer para que una máquina sea capaz de traducir correctamente entre varios idiomas.

Para añadir la funcionalidad he realizado los siguientes pasos:
NOTA: Google Translate es un servicio externo al blog y como tal hay que sujetarse a sus términos y condiciones de uso.

Vamos a Personalizar y luego a Diseño->Edición de HTML y damos a Expandir plantillas de artilugios.
En el código buscamos el lugar donde queremos añadir el acceso a la traducción e incluimos el elemento que contendrá el enlace. En mi caso he añadido una imagen de una bandera para cada idioma y las he colocado en la barra de menús.
Si no tienes barra de menús, un buen lugar podría ser al inicio de la sidebar. Para ello buscamos la siguiente línea en el código:
```
<b:section class='sidebar' id='sidebar' preferred='yes'>
```
Justo a continuación incluimos el código para añadir cada bandera. Tendremos que añadir una línea como ésta por cada idioma:
```
<img style='cursor: pointer; width: 40px; height: 23px;' alt='DESCRIPCION DE LA IMAGEN' src='URL-DE-LA-IMAGEN' title='MENSAJE DE AYUDA'/>
```
Donde:
- URL-DE-LA-IMAGEN es la URL de la bandera a añadir.
- DESCRIPCION DE LA IMAGEN es una breve descripción que suele mostrarse cuando hay problemas al cargar la imagen.
- MENSAJE DE AYUDA es un corto mensaje de texto que se muestra al detener el puntero sobre la imagen.
- 40px corresponde al ancho en píxeles (en este caso 40, pero podemos indicar la anchura que deseemos).
- 23px corresponde al ancho en píxeles (en este caso 23, pero podemos indicar la anchura que deseemos).
Añadimos a cada imagen el enlace al idioma correspondiente. Para ello, las líneas que incluimos antes para cada imagen de cada idioma, las incluiremos dentro de una etiqueta de enlace siguiendo el siguiente formato:
```
<a target='_blank' rel='nofollow' onclick='window.open(&quot;http://www.google.com/translate?u=&quot;+encodeURIComponent(location.href)+&quot;&amp;langpair=es%7Cen&amp;en=es&amp;ie=UTF8&quot;); return false;' title='Google-Translate-Spanish to English'>
   LINEA_DE_IMAGEN_INSERTADA
</a>
```
Donde:
- LINEA_DE_IMAGEN_INSERTADA es la línea que insertamos anteriormente.
- es es el código del idioma origen (es=español). Para más idiomas consultar en Google Translate.
- en es el código del idioma al que se traducirá (en=english). Para más idiomas consultar en Google Translate.

Si tenéis alguna duda preguntad.

salu2,
elSant0

Quitar el mensaje de "Suscribirse a: entradas (Atom)"

Me dí cuenta de que debajo de los post de mi blog aparecía un mensajto diciendo algo así como: "Suscribirse a: entradas (Atom)".

Como no me apetece tenerlo ahí (de momento es algo que no uso). He decidido quitarlo. Para todo aquel que le interese como hacerlo, vamos a Personalizar, y después a Diseño-->Edición de HTML. Una vez allí buscamos el siguiente código:

.feed-links
{
   clear: both;
   line-height: 2.5em;
}

Y lo modificamos dejándolo de la siguinte manera:

.feed-links
{
   clear: both;
   line-height: 2.5em;
   visibility:hidden;
   display:none;
}

De esta forma el mensaje quedará oculto y la funcionalidad que daba la mantendremos activa.

Salu2,
elSant0

Convertir código fuente a formato HTML para publicar en la web

Supongo que todos los que publicamos código fuente en la web nos encontramos con diversos problemas que, aunque son fáciles de solucionar, resultan un poco engorrosos. Me refiero a eso de andar sustituyendo caracteres reservados de HTML, cambiar los colores, tabular,...

Por casualidad he encontrado una curiosa web que se encarga de transformar el código fuente que introduzcamos (sea del lenguaje que sea) a un correcto HTML listo para publicar.

Para todos los que os interese aquí la tenéis: http://tohtml.com

Salu2,

elSant0

Sustituir texto de entradas recientes/antiguas... por iconos de navegación

Me pareció un poco más estético que para navegar por los post aparecieran unos iconos en vez de esos horribles textos de "Entradas más recientes", "Página principal" y "Entradas antiguas".

El cambio es simple. Consiste en cambiar esas 3 etiquetas por una imagen (también es posible cambiar solamente el texto).

Para hacer el cambio haremos lo siguiente. Vamos a Personalizar, y luego a Diseño-->Edición de HTML. Damos a Expandir plantilla de artilugios y buscamos el siguiente código (si no igual, parecido):

<b:includable id='nextprev'>
   <div class='blog-pager' id='blog-pager'>
      <b:if cond='data:newerPageUrl'>
         <span id='blog-pager-newer-link'>
            <a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + "_blog-pager-newer-link"' expr:title='data:newerPageTitle'><data:newerPageTitle/></a>
         </span>
      </b:if>
      <b:if cond='data:olderPageUrl'>
         <span id='blog-pager-older-link'>
            <a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + "_blog-pager-older-link"' expr:title='data:olderPageTitle'><data:olderPageTitle/></a>
         </span>
      </b:if>
      <b:if cond='data:blog.homepageUrl != data:blog.url'>
         <a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>
      <b:else/>
         <b:if cond='data:newerPageUrl'>
            <a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>
         </b:if>
      </b:if>
   </div>
   <div class='clear'/>
</b:includable>

Y lo sustituimos por:

<b:includable id='nextprev'>
   <div id='blog-pager'>
      <b:if cond='data:newerPageUrl'>
         <a expr:href='data:newerPageUrl' expr:title='data:newerPageTitle' id='blog-pager-newer-link'>
            <img src='URL_ICONO_FLECHA_DERECHA'/>
         </a>
      </b:if>
      <b:if cond='data:olderPageUrl'>
         <a expr:href='data:olderPageUrl' expr:title='data:olderPageTitle' id='blog-pager-older-link'>
            <img src='URL_ICONO_FLECHA_DERECHA'/>
         </a>
      </b:if>
      <a class='home-link' expr:href='data:blog.homepageUrl'>
         <img src='URL_ICONO_HOME'/>
      </a>
   </div>
   <div class='clear'/>
</b:includable>

Y aquí sustituiremos:
URL_ICONO_FLECHA_DERECHA por la imagen o animación que deseemos para "Entradas Antiguas".
URL_ICONO_FLECHA_IZQUIERDA por la imagen o animación que deseemos para "Entradas más recientes".
URL_ICONO_HOME por la imagen o animación que deseemos para "Página principal".

Espero que os sirva.

Salu2,
elSant0

Texto en movimiento en la barra de título de la web

Navegando por la red me dí cuenta de que muchas páginas incorporan un efecto en el título de la ventana (o de las pestañas, dependiendo del navegador) que hace pasear todo el título de la web.

Este efecto es útil cuando el espacio donde debe aparecer el título es pequeño.

Para quien esté interesado, es simple de implementar. Vamos a Personalizar, y luego Diseño-->Edición de HTML.

Buscamos la siguiente línea de código:

</head>

Y justo antes incluimos lo siguiente:

<!-- INICIO CODIGO TITULO MOVIMIENTO -->
<script type="text/JavaScript">
   var repeat = 1                    // Si ponemos valor 0 sólo se repetirá unavez el movimiento
   var title = document.title
   var leng = title.length
   var start = 1
   function titlemove()
   {
      titl = title.substring(start, leng) + title.substring(0, start)
      document.title=titl
      start++
      if (start==leng+1)
      {
         start=0
         if (repeat==0) return
      }
      setTimeout("titlemove()",150)  // 150 es la velocidad de movimiento, se puede ampliar o reducir
   }
   if (document.title) titlemove()
</script>
<!-- FIN CODIGO TITULO MOVIMIENTO -->

Podemos configurar (segun indico en los comentarios del código) el numero de veces que será mostrado el efecto, la velocidad,...

Salu2,
elSant0

Añadir "Post Relacionados" al final de cada post

Mientras pensaba en maneras de atrapar lectores para mi blog, me he dado cuenta de que conmigo funciona bastante bien eso de añadir al final de cada post una lista con otros artículos relacionados. Asi que he añadido esa funcionalidad y aquí os digo como lo he hecho.

Antes de nada, decir que lo he conseguido mediante javascript. Supongo que habrán otras muchas maneras pero a mi ésta me pareció la más eficiente y cómoda de mantener.

Bueno vamos a ello. Nos dirigimos a Personalizar, y luego a Diseño-->Edición de HTML. Damos a Expandir plantillas de artilugios y buscamos la siguiente línea de código:

<data:post.body/>

Y justo antes de dicha línea pegamos el siguiente código:


<!-- INICIO CODIGO AÑADIDO PARA AÑADIR POST RELACIONADOS -->
   <b:if cond='data:blog.pageType == &quot;item&quot;'>
      <div class='similiar'>   
         <div class='widget-content'><br/>
         <h3>ALGUNOS ARTÍCULOS RELACIONADOS</h3>
         <div id='data2007'/><br/>
            <script type='text/javascript'>
               /* Variables globales del script */ 
               var homeUrl3 = &quot;<data:blog.homepageUrl/>&quot;;
               var maxNumberOfLabels = 3;                                               // Numero maximo de categorias (etiquetas) a mostrar relacionadas con el post
               var maxNumberOfPostsPerLabel = 10;                                       // Numero maximo de artículos a mostrar para cada categoria (etiqueta)
               var labelArray = new Array();                                            // Array de categorias (etiquetas) mostradas

               /* Funcion que crea la lista de post para una categoria en concreto */
               function listPost(json)                                             
               {
                  var ul = document.createElement(&#39;ul&#39;);
                  var maxPosts = (json.feed.entry.length &lt;= maxNumberOfPostsPerLabel) ? 
                     json.feed.entry.length : maxNumberOfPostsPerLabel;                 
                  for (var i = 0; i &lt; maxPosts; i++)                                 
                  {
                     var entry = json.feed.entry[i];
                     var alturl;
                     for (var k = 0; k &lt; entry.link.length; k++)
                     {
                        if (entry.link[k].rel == &#39;alternate&#39;)
                        {
                           alturl = entry.link[k].href;
                           break;
                        }
                     }
                     var li = document.createElement(&#39;li&#39;);
                     var a = document.createElement(&#39;a&#39;);
                     a.href = alturl;
                     if(a.href!=location.href)
                     {
                        var txt = document.createTextNode(entry.title.$t); 
                        a.appendChild(txt);
                        li.appendChild(a);
                        ul.appendChild(li); 
                     }
                  }
                  for (var l = 0; l &lt; json.feed.link.length; l++)
                  {
                     if (json.feed.link[l].rel == &#39;alternate&#39;)
                     {
                        var raw = json.feed.link[l].href;
                        var label = raw.substr(homeUrl3.length+13);
                        var k;
                        for (k=0; k&lt;20; k++) label = label.replace(&quot;%20&quot;, &quot; &quot;);
                        var txt = document.createTextNode(label);
                        var h = document.createElement(&#39;b&#39;);
                        h.appendChild(txt);
                        var div1 = document.createElement(&#39;div&#39;);
                        div1.appendChild(h);
                        div1.appendChild(ul);
                        document.getElementById(&#39;data2007&#39;).appendChild(div1);
                     }
                  }
               }
               /* funcion que crea una nueva categoria */
               function searchLabel(query, label)
               {
                  var script = document.createElement(&#39;script&#39;);
                  script.setAttribute(&#39;src&#39;, query + &#39;feeds/posts/default/-/&#39; + label + &#39;?alt=json-in-script&amp;callback=listPost&#39;);
                  script.setAttribute(&#39;type&#39;, &#39;text/javascript&#39;);
                  document.documentElement.firstChild.appendChild(script);
               }
               /* Codigo principal del script */
               <b:loop values='data:posts' var='post'>                                   // Se recorren todos los post de la pagina actual (sólo debería aparecer el post a tratar), y en cada uno de ellos...
                  <b:loop values='data:post.labels' var='label'>                         // ...se recorren todas sus etiquetas, y para cada una de ellas...
                     textLabel = &quot;<data:label.name/>&quot;;                         // ...Se toma el nombre de la etiqueta;
                     var isTest = 0;                                                     // Vale 0 si la etiqueta que estamos comprobando no está en el array de Categorias relacionadas con el post (se verá a continuación) o 1 si está
                     for (var i = 0; i &lt; labelArray.length; i++)                      // se recorren todas las categorias incluidas ya en el array de Categorias relacionadas con el post.
                        if (labelArray[i] == textLabel) isTest = 1;                      // Si la etiqueta que estamos comprobando está incluída isPost debe valer 1
                     if (isTest==0)                                                      // Si la etiqueta que hemos comprobado no está en el array...
                     {
                        labelArray.push(textLabel);                                      // ...se añade y,...
                        if (labelArray.length &lt;= maxNumberOfLabels)                   // ...si aun no hemos llegado al maximo de categorias a mostrar...
                        {
                           searchLabel(homeUrl3, textLabel);                             // ...Se crea una nueva categoria
                        }
                     }
                  </b:loop>
               </b:loop>
            </script>
         </div>
      </div>
   </b:if>
<!-- FIN CODIGO AÑADIDO PARA AÑADIR POST RELACIONADOS -->

Después sólo queda modificar algunos parámetros al gusto. Por ejemplo el título de la sección (ALGUNOS ARTÍCULOS RELACIONADOS), el número de categorias a mostrar, el numero de artículos por categoría,... Para eso basta con echar un ojo a los comentarios del código e ir probando.

Salu2,
elSant0

Sociabilizar el blog (I) - "Followers" y botones "Follow"

Conversión a ficheros .pdf

Alias en el correo electrónico para evitar dar nuestro E-Mail real

Cómo recuperar pestañas cerradas en Firefox, Chrome/Chromium y Opera

Poner bombillas de colores intermitentes en la cabecera del blog

Usar "Google Sites" para almacenar los scripts externos de nuestra web

Copos de nieve en tu web

Pagerank, un ingenio de Google que transforma internet día a día

Opción "Leer más..." en la página de inicio del blog

Quitar espacio vacío debajo del cuadro de comentarios

Escribir columnas en los Post

Crear un gadget nuevo en Blogger

Añadir un contador y un localizador de visitas al blog

Añadir iconos de traducción a nuestra web

Quitar el mensaje de "Suscribirse a: entradas (Atom)"

Convertir código fuente a formato HTML para publicar en la web

Sustituir texto de entradas recientes/antiguas... por iconos de navegación

Texto en movimiento en la barra de título de la web

Añadir "Post Relacionados" al final de cada post

Buscar en cualquier artículo de este blog

Archivo de artículos del blog

ULTIMOS COMENTARIOS

Contador de Visitas