martes, 13 de diciembre de 2011

Cambiar de lugar los enlaces de navegación

Los enlaces de navegación son esos links que aparecen al final de todo el blog y al final de las entradas que dicen "Entradas recientes", "Página principal" y "Entradas antiguas". Siempre aparecen al final a menos que la plantilla los tenga ocultos.


Pero que siempre aparezcan ahí no significa que no podamos cambiarlos de lugar. De hecho vamos a ver cómo cambiarlos de lugar, ya sea ponerlos arriba de todas las entradas, arriba de los comentarios, o arriba de cada entrada individual.

Lo que vamos a hacer es simple, primero condicionaremos los que ya tenemos para que no sean visibles en las entradas, así que entra a la Edición HTML de la plantilla, marca la casilla Expandir plantillas de artilugios y busca este código:
<b:include name='nextprev'/>
En su lugar pon este:
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:include name='nextprev'/>
</b:if>
Con eso haremos que los que tenemos siempre debajo del todo no se muestren en las entradas individuales.
Ahora puedes decidir dónde quieres tenerlos.

Arriba de los comentarios
Si quieres tenerlos entre el final de la entrada y el inicio de los comentarios, busca esta parte en tu plantilla:
</b:includable>
<b:includable id='status-message'>
Justo arriba de ese código agrega esto:
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:include name='nextprev'/>
</b:if>

Arriba de cada la entrada
Con esta forma podrás poner los enlaces de navegación justo arriba de la entrada, es decir, antes del título del post.
Para ello busca esta línea:
<b:includable id='post' var='post'>
Debajo de ella agrega esto:
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:include name='nextprev'/>
</b:if>

Con esos dos métodos anteriores los enlaces de navegación se verán sólo en las entradas individuales, así que hay que ingresar al post para verlos.

Arriba de todas las entradas
Con esta forma haremos que se muestren hasta arriba de todas las entradas, así que si quieres puedes conservar los enlaces de navegación de hasta abajo, si es así omite el primer paso, sino puedes continuar.
Para ponerlo arriba de todas las entradas busca esta línea:
<b:includable id='main' var='top'>
Debajo de ella agrega esto:
<b:include name='nextprev'/>

Independientemente de dónde hayas decidido ponerlos puedes darles un poco de estilo, por ejemplo puedes cambiar los enlaces de navegación por una imagen, o agregarle un poco de CSS, como ponerle un color de fondo, un borde, etc.


Tan sólo añade antes de ]]></b:skin> este código:
#blog-pager {
background:#eee; /* Color de fondo */
border:1px solid #ccc; /* Borde */
padding:8px;
/* Bordes redondeados */
border-radius:10px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
}
#blog-pager a {
background:#eee; /* Color de fondo */
color:#000; /* Color de los enlaces */
}
Ese es sólo un ejemplo sencillo pero se pueden añadir más estilos si lo deseas.

No hay comentarios:

Publicar un comentario