Espaciar correctamente los vínculos de navegación de Blogger Parte 1: Usando iconos

Uno de los errores del diseño de la mayoría de la plantillas de blogger es la barra de navegación: Entradas más recientes, Página principal y Entradas antiguas.

Cuando uno de los vínculos de los lados está auscente, el vínculo Página principal flota hacia el centro entre el botón contiguo y el espacio vació, algo que se ve poco estético y nunca ha existido mucho interés en resolverlo.

Por fortuna es bastante sencillo de resolver, yo he creado dos formas, uno para las imágenes como botones y otro para el texto.

En este tutorial usaremos los iconos de navegación que se ofrecen gratuitamente en multiwp.com/back-and-forward-icons, pero pueden usar sus propias imágenes:

Método 1: Menú de navegación con botones:
El resultado final será como en los menues de navegación de mi Web, donde la Portada siempre mantiene su posición, aun cuando no aparezca uno de los botones:

Respalde su plantilla
Recomiendo siempre que respalde su plantilla por cualquier problema.

Limpieza
Primero vamos a Edicion de HTML en la sección de Diseño de su web y con la herramienta de búsqueda deberemos eliminar las reglas CSSblog-pager, home-link, blog-pager-newer-link y blog-pager-older-link (No marque la casilla Expandir plantillas de artilugios para evitar confundirse y borrar los ID o Clases).

Una vez hecho pulse en Guardar Plantilla

Agregando el código
Ahora si marque la casilla Expandir plantillas de artilugios

1. Buscamos ]]></b:skin> y justo antes o en la parte del CSS principal que guste pegamos:

/* menú de navegación equivalente por matius */
#blog-pager {
margin: 0;
padding: 0;
}
.home-link {width: 60px; height: 59px;margin:auto 0;}
#blog-pager a img {border:0;}
#blog-pager-newer-link {
margin:0;
padding:0;
}
.blog-pager-newer-link {
width: 60px; height: 59px;
float: left;
}
#blog-pager-older-link {
margin:0;
padding:0;
}
.blog-pager-older-link {
float: right;
width: 60px; height: 59px;
}

/* Fin de menu equivalente */

2. Buscamos <b:includable id='nextprev'> y reemplazamos todo el contenido entre <b:includable id='nextprev'> y </b:includable> por:

<div class='blog-pager' id='blog-pager'>
<div class='blog-pager-newer-link'>

<b:if cond='data:newerPageUrl'>
      <a expr:href='data:newerPageUrl' expr:title='data:newerPageTitle' id='blog-pager-newer-link'>
<img alt='Articulos recientes' src='https://lh3.googleusercontent.com/-wGTS9m6NF68/TdMgFdwSBuI/AAAAAAAAUpU/sNY8XyE9E_Q/nuevos.png'/></a>
</b:if>
</div>
<div class='blog-pager-older-link'>
<b:if cond='data:olderPageUrl'>
<a expr:href='data:olderPageUrl' expr:title='data:olderPageTitle' id='blog-pager-older-link'>
<img alt='Articulos antiguos' src='https://lh6.googleusercontent.com/-ry4bVzBTcts/TdMgFdcVNwI/AAAAAAAAUpQ/54PnckDwDq0/antiguos.png'/></a>
</b:if></div>

<b:if cond='data:blog.homepageUrl != data:blog.url'>
      <a class='home-link' expr:href='data:blog.homepageUrl'><img alt='Principal' src='
https://lh3.googleusercontent.com/-AwVgcKfvm7Q/TdMgFcSSGTI/AAAAAAAAUpM/YHVSuU7sVA0/home.png'/></a>      <b:else/>
      <b:if cond='data:newerPageUrl'>
        <a class='home-link' expr:href='data:blog.homepageUrl'><img alt='Principal' src='
https://lh3.googleusercontent.com/-AwVgcKfvm7Q/TdMgFcSSGTI/AAAAAAAAUpM/YHVSuU7sVA0/home.png'/></a>      </b:if>
    </b:if>
  </div>
  <div class='clear'/>

 Listo, pulse en Guardar Plantilla, si ustedes van a usar sus propios botones, no olviden cambiar el Ancho (Width) y el Alto (Height) de .home-link, .blog-pager-newer-link y .blog-pager-older-link.

• Parte 2: Usando vínculos hipertextuales ►