Los enlaces de navegaci?n son esos que aparecen al final de la p?gina que dicen "Entradas antiguas", "Entradas recientes" y "P?gina principal" y nos sirven para desplazarnos por las entradas del blog. Lo que haremos con esta entrada son dos cosas:
- Cambiar los textos "Entradas antiguas" y "Entradas recientes" por los t?tulos de las entradas.
- Hacer que �stos datos aparezcan en un recuadro "desvaneciente" cuando se baje el scroll de la p?gina.
Puedes verlo en funcionamiento en este blog de pruebas, al bajar el scroll aparecer?n los enlaces de navegaci?n mostrando los t?tulos de las entradas que anteceden y preceden al post.
Esta forma de mostrar los enlaces de navegaci?n s?lo se ver? en las entradas individuales, ya que en la portada y dem?s partes del blog se seguir?n mostrando como siempre.
La instalaci?n es muy sencilla en realidad. Primero entra en Plantilla | Edici?n de HTML, marca la casilla Expandir plantillas de artilugios y busca esta l?nea:
<b:include name='nextprev'/>Y c?mbiala por esto:
<b:if cond='data:blog.pageType != "item"'>Ahora pega antes de </head> lo siguiente:
<b:include name='nextprev'/>
</b:if>
<b:if cond='data:blog.pageType == "item"'>
<div id='blog-pager-note'>
<h4>Tambi�n hemos publicado:</h4>
<b:include name='nextprev'/>
</div>
</b:if>
<b:if cond='data:blog.pageType == "item"'>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js' type='text/javascript'/>
<script>
// <![CDATA[
$(function() {
$('#blog-pager-note').toggle()
.css({
width: '520px',
height: '150px',
position: 'fixed',
padding: '1em',
bottom: 0,
right: 0,
background: 'url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEig0yTNGnT9ld4ahuz9IDBUYFOywTlWOJBEu7annJf9BAxb6GuCLhwlcnsw8Rs2B65ydbTs9_NGF_5sBwhEsMody7G50y4lEmGtka1WJmOQFAEEQEC8kF08Ii9qawGpl-ulcC4MMqYTI2o/s10/negro85.png)'
});
$(window).scroll(function() {
if($(this).scrollTop() > 150) {
$('#blog-pager-note').fadeIn();
} else {
$('#blog-pager-note').fadeOut();
}
});
});
$(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();
$(".blog-pager-newer-link").html("<div>Entrada anterior:</div>" + 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();
$(".blog-pager-older-link").html("<div>Entrada siguiente:</div>" + olderLinkTitle);
});
});
// ]]>
</script>
<style type='text/css'>
<!--
#blog-pager-newer-link {float:left;clear:both;line-height:30px;}
#blog-pager-older-link {float:left;clear:both;line-height:30px;}
.home-link {display:none;}
.blog-pager-older-link, .blog-pager-newer-link {
background-color: transparent !important;
background-image: none !important;
border:0 !important;
color:#0577AB !important; /* Color de los t?tulos de las entradas */
float: left;
width: 500px;
clear:both;
}
a.blog-pager-older-link:hover, a.blog-pager-newer-link:hover {
text-decoration:none !important;
}
a.blog-pager-newer-link:before {
content: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhMFmQ7TEq44h8fInVRct8LbI1hkqzx7hB_3K8O9GsEl_zUxhsrkmcu-P7O4tEYGIZSo5QocWkCdjUSA9rIPcZ4hKROv7OLLsEw885CT0VhQBNLUac1KIUHAtHhQHVn7WelpkXOHKj27a8/s32/flecha2.png);
float:left;
}
a.blog-pager-older-link:before {
content: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdIr_bSEUL62YsHbF-XwD7Euu65pHXXd22RYgvfs1GiSp-5YJS6UsI124jZZRT2j0Z4BiDNNfVBnJjEptEyTqt4y8NvAJK_Ex5cYQOOJ0oMFPPFLAfKNpX_22Sbl2ryH1Ny3z0mAuo9lE/s32/flecha1.png);
float:left;
}
#blog-pager {
width:500px;
background-color: transparent !important;
background-image: none !important;
border:0 !important;
text-align:left;
}
#blog-pager div {
color:#fff; /* Color de los textos "Entrada anterior" y "Entrada siguiente" */
font-weight:bold;
margin-bottom: -5px;
}
a#blog-pager div:hover {
text-decoration:none !important;
color:#fff; /* Color de los textos "Entrada anterior" y "Entrada siguiente" */
}
#blog-pager-note {
z-index:9;
}
#blog-pager-note h4 {
margin:0;
padding:0;
color:#4898B9; /* Color del t?tulo del recuadro */
font-size:16px; /* Tama?o del t?tulo del recuadro */
}
-->
</style>
</b:if>
Hay tres URLs en color azul, la primera es la imagen de fondo semitransparente del recuadro, las otras dos corresponden a los ?conos de las flechas.
En color verde puedes ver d?nde cambiar los colores de los textos.
El n?mero en color rojo es la distancia en pixeles que activa el gadget, es decir, que como est? ahora, el recuadro aparecer? cuando se haya bajado el scroll 150px. Puedes usar un valor m?s alto en caso de que tus entradas suelan ser largas y por lo tanto la "altura" del scroll sea mayor.
El n?mero en color rojo es la distancia en pixeles que activa el gadget, es decir, que como est? ahora, el recuadro aparecer? cuando se haya bajado el scroll 150px. Puedes usar un valor m?s alto en caso de que tus entradas suelan ser largas y por lo tanto la "altura" del scroll sea mayor.
Cabe mencionar que este gadget usa jQuery, as? que procura tener s?lo una versi?n, y si usas Scriptaculous deber?s aplicar un hack, de lo contrario podr?a no funcionar.
Tambi�n puedes cambiar las palabras "Entrada anterior" y "Entrada siguiente" por alguna otra frase.
