Cambiar los links de navegación por los títulos de las entradas

 En una entrada anterior ya vimos cómo reemplazar los links de “entradas recientes” “entradas anteriores” sustituyéndolos por el texto que uno quiera o incluso reemplazándolos por una imagen.

Ahora vamos a ver cómo sustituir estos links para que salga el título de las entradas de nuestro blog. O sea, reemplazaremos esto:

Entradas recientes                Página principal                               Entradas anteriores

Por algo más o menos así:

Metatags (Keywords)                                  Inicio                          Fanbox de twitter

En el blog                                                                                         en el blog

Para que este artilugio funcione dentro de nuestra plantilla primeramente tenemos que agregar Jquery, pues esto funciona con esa librería, de modo que entra en Diseño, Edición Html, y con los artilugios expandidos pega antes de </head> la librería Jquery:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>

Recuerda que si ya tienes Jquery agregado en el blog no es necesario que lo vuelvas a poner.

Revisa en vista previa, y si todo está ok pones guardar.

Ahora vamos a Diseño, Añadir Gadget, Html Javascript, y dentro de este gadget pega el siguiente código:

 <script type="text/javascript">
$(document).ready(function(){
var newerLink = $("a.blog-pager-newer-link").attr("href");
$("a.blog-pager-newer-link").load(newerLink+" .post-title:first", function() {
var newerLinkTitle = $("a.blog-pager-newer-link:first").text();
$("a.blog-pager-newer-link").text("<< " + newerLinkTitle);
});
var olderLink = $("a.blog-pager-older-link").attr("href");
$("a.blog-pager-older-link").load(olderLink+" .post-title:first", function() {
var olderLinkTitle = $("a.blog-pager-older-link").text();
$("a.blog-pager-older-link").text(olderLinkTitle + " >>");//rgt
});
});
</script><style type="text/css">
#blog-pager{font-family: Arial,helvetica,sans-serif;font-size: 14px;}#blog-pager-newer-link {font-size:85%;width:200px;text-align:left;}#blog-pager-older-link {font-size:85%;width:200px;text-align:right;}</style>

Cambia lo que está resaltado en celeste que es la fuente del texto, si lo quieres de otra forma; y font-size: 14px; es el tamaño del texto. Con esto, el script ahora mostrará el título de la entrada anterior al igual que la más reciente. Si quieres que el texto “Página principal” cambie por “Inicio” o por una imagen, revisa esta entrada, o si quieres déjalo así, es tu desición.