Está basado en algo que ya vimos anteriormente y que consiste en sustituir mediante jQuery las leyendas "Entrada antigua" y "Entrada más reciente", por el título de la correspondiente entrada y la novedad esta vez es que le hemos añadido el CSS necesario para que cada uno de esos enlaces aparezcan flotando en los extremos izquierdo y derecho de la página.
Parece que actualmente es tendencia, sobre todo en periódicos digitales, lo de poner así este tipo de enlaces. Este sería aproximadamente el resultado:
Siempre con el ánimo de simplificaros el trabajo y pensando en los más torpes, he montado todo el código de manera que sólo haya que copiarlo e insertarlo en un único paso. El lugar dónde pegarlo será en la plantilla, accediendo a Edición HTML e insertándolo entre }]]></b:skin> y </head>.
Si actualmente no estáis usando jQuery, lo mejor es que sea justo después de }]]></b:skin>. Sin embargo, si ya tenéis jQuery, la primera línea que es la carga la librería tendréis que eliminarla y el resto del código añadirlo tras la línea equivalente que vosotros tengáis para cargar jQuery.
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js' type='text/javascript'/>
<b:if cond='data:blog.pageType == "item"'>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function(){
var masreciente = $('a.blog-pager-newer-link').attr('href');
$('a.blog-pager-newer-link').load(masreciente + ' .post-title:first', function() {
var titulomasreciente = $("a.blog-pager-newer-link:first").text();
$('a.blog-pager-newer-link').text(titulomasreciente);
});
var masantiguo = $('a.blog-pager-older-link').attr('href');
$('a.blog-pager-older-link').load(masantiguo + ' .post-title:first', function() {
var titulomasantiguo = $('a.blog-pager-older-link').text();
$('a.blog-pager-older-link').text(titulomasantiguo);
});
});
//]]></script>
<style>
#blog-pager{width:100%;margin:0;padding:0;position:fixed;top:50%;font-size:0;left:0;text-align:left;line-height:0}
.blog-pager span{position:relative;display:inline-block;vertical-align:top;width:120px;height:120px;overflow:hidden;margin:0;padding:0;text-transform:none;box-sizing:border-box}
.blog-pager span:before{display:inline-block;vertical-align:middle;content:"";height:100%;width:0}
.blog-pager a{float:none!important;display:inline-block;vertical-align:middle;width:100%;height: auto;min-height:40px;color:#eee;text-align:center;padding:15px 15px 15px 30px;box-sizing:border-box;line-height:1.1em;font-size:14px;font-family:arial;background:rgba(0,0,0,.4);border-radius:0 10px 10px 0}
#blog-pager-older-link a{float:right;padding:10px 25px 10px 10px;border-radius:10px 0 0 10px}
.blog-pager a:hover{background:#000}
a.home-link{display:none;padding:0}
.blog-pager span:after{content:"\2039";position:absolute;left:0;font-family:Trebuchet,serif;font-size:70px;line-height:70px;top:50%;margin-top:-40px;color:#ccc;text-align:center}
.blog-pager span#blog-pager-older-link:after{content:"\203A";left:auto;right:0}
@media (max-width: 640px) {
#blog-pager{position:relative}
.blog-pager span{display:block;width:100%;height:auto;margin-top:10px}
.blog-pager a {border-radius: 10px !important;}
}
</style>
</b:if>
<b:if cond='data:blog.pageType == "item"'>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function(){
var masreciente = $('a.blog-pager-newer-link').attr('href');
$('a.blog-pager-newer-link').load(masreciente + ' .post-title:first', function() {
var titulomasreciente = $("a.blog-pager-newer-link:first").text();
$('a.blog-pager-newer-link').text(titulomasreciente);
});
var masantiguo = $('a.blog-pager-older-link').attr('href');
$('a.blog-pager-older-link').load(masantiguo + ' .post-title:first', function() {
var titulomasantiguo = $('a.blog-pager-older-link').text();
$('a.blog-pager-older-link').text(titulomasantiguo);
});
});
//]]></script>
<style>
#blog-pager{width:100%;margin:0;padding:0;position:fixed;top:50%;font-size:0;left:0;text-align:left;line-height:0}
.blog-pager span{position:relative;display:inline-block;vertical-align:top;width:120px;height:120px;overflow:hidden;margin:0;padding:0;text-transform:none;box-sizing:border-box}
.blog-pager span:before{display:inline-block;vertical-align:middle;content:"";height:100%;width:0}
.blog-pager a{float:none!important;display:inline-block;vertical-align:middle;width:100%;height: auto;min-height:40px;color:#eee;text-align:center;padding:15px 15px 15px 30px;box-sizing:border-box;line-height:1.1em;font-size:14px;font-family:arial;background:rgba(0,0,0,.4);border-radius:0 10px 10px 0}
#blog-pager-older-link a{float:right;padding:10px 25px 10px 10px;border-radius:10px 0 0 10px}
.blog-pager a:hover{background:#000}
a.home-link{display:none;padding:0}
.blog-pager span:after{content:"\2039";position:absolute;left:0;font-family:Trebuchet,serif;font-size:70px;line-height:70px;top:50%;margin-top:-40px;color:#ccc;text-align:center}
.blog-pager span#blog-pager-older-link:after{content:"\203A";left:auto;right:0}
@media (max-width: 640px) {
#blog-pager{position:relative}
.blog-pager span{display:block;width:100%;height:auto;margin-top:10px}
.blog-pager a {border-radius: 10px !important;}
}
</style>
</b:if>
Todo el código está dentro de una condición para que sólo se ejecute en las páginas correspondientes a entradas (item), ya que en portada o páginas de etiquetas, al mostrarse más de un post, no es lógico calcular cuál es el siguiente o el anterior.
La explicación de qué es lo que hace la parte JavaScript la podéis ver en el post que mencioné al principio de esta entrada y con respecto a los colores y formas, como siempre, sólo hay que cambiarlos en la parte de estilo para dejarlos como a cada cual le cuadre.
¿Vemos otro post al azar por si le encuentras utilidad o quizás prefieres ser más metódico y suscribirte a nuestras entradas por correo? También puedes imprimir este artículo y por supuesto compartirlo en redes sociales si fue de tu agrado.
Y muchos más artículos interesantes si nos sigues en...
Saludos Oloman.. lo implemente en mi blog y queda estupendo.. lo unico malo en mi blog es que los nombres de mis post son demasiadamente largos.. pero bueno funciona a la perfecccion una duda.. no incrementa mucho el tiempo de carga en la pagina??? mil gracias..
ResponderEliminarpdta..soy el primero en comentar.. primera vez... jajajajaja
Todo lo que añadas a tu plantilla incrementa el peso de la página pero este no creo que lo haga en demasía. No lo he medido, pero no es de los pesados.
EliminarHola, Gracias por el aporte Oloman, lo he aplicado pero parece que a las plantillas que ya tienen el ir adelante e ir atrás no se le aplican los estilos y queda en la parte inferior del post. puedes mirar cómo quedó en mi página: http://www.kangutingo.com/2016/04/zapatos-tejidos-crochet.html
ResponderEliminarya he quitado el artilugio, pero como por darte una guía los botones actuales de ir adelante y atras son las caritas con ojos debajo del post, y si aparecían los nombres de las entradas nuevas y antiguas pero no aparecían con el efecto flotante. Por eso lo he quitado, pero muchas gracias, tu blog me ha ayudado bastante en el diseño de mi web.
EliminarSi habéis modificado los enlaces de navegación, es posible que el estilo que propuse se vea alterado por esa modificación como dices que te ocurre a tí. La solución sería quitar esas modificaciones previamente y dejar el gadget con su estilo original.
EliminarOtra cosa, que no es seguro porque me resulta imposible prever el código que cada cual tenéis, sería añadir un !important a todas las declaraciones del CSS que propuse.
Por ejemplo, esta:
#blog-pager{width:100%;margin:0;padding:0;position:fixed;top:50%;font-size:0;left:0;text-align:left;line-height:0}
...debería quedar así:
#blog-pager{width:100% !important;margin:0 !important;padding:0 !important;position:fixed !important;top:50% !important;font-size:0 !important;left:0 !important;text-align:left !important;line-height:0 !important}
Yo sólo lo añadí a las que coincidían con el estilo por defecto, pero si se hace así con todas las declaraciones de todas las reglas, estas tendrán prioridad sobre las que pudieras haber puesto tú.
Gracias por el aporte. Me ha gustado mucho y ya lo estoy usando. No he notado ningún inconveniente ni lentitud en la página.
ResponderEliminarOK. Gracias por el feedback ;)
EliminarMuchas Gracias Oloman, se ve genial, pero tu sabes porque se ven unos puntos que atraviesan el blog a la altura de los enlaces?? y crees que se puedan quitar??
ResponderEliminarGracias!!
Saludos!!
Hola. Si no lo veo no te puedo decir cuál puede ser la causa ¿me pasas la dirección dónde lo tienes puesto?
EliminarHola Oloman, este es mi blog:
Eliminarhttp://imss-ayuda.blogspot.com/2016/03/sua-347.html
Viéndolo es más fácil. Elimina esto de tu plantilla, que es lo que mete esos puntos:
Eliminar.blog-pager {
background: transparent url(//www.blogblog.com/1kt/simple/paging_dot.png) repeat-x scroll top center;
}
Oloman muchas gracias, quedó perfecto!! con eso se eliminaron esos puntos.
EliminarSaludos!!
[modo chulería on] ¿Qué esperabas? XD
Eliminarya lo implemente y queda genial.Muchas gracias
ResponderEliminarHola Oloman. He intentado ponerme en contacto contigo en un par de ocasiones a través del post de "Gadget para Entradas Populares" pero como no me has contestado, te escribo en el ultimo que has publicado tú, a ver si así te llega a tu correo. Supongo que estarás muy liado y no tienes tiempo para contestarnos, pero es que necesito tu ayuda por el CÓDIGO que nos dejaste en es post hace unos meses. Las imágenes siguen desiguales y más grandes de lo normal, con lo que el gadget queda feo y no me gustaría tener que eliminarlo ya que el resultado final me encantaba¡¡ No es un problema puntual de blogger, es un problema con el código, supongo que algo se ha estropeado, per me gustaría le echaras un vistazo porque seguro que es una tontería. Si no me contestas supondré que no tienes tiempo para mirarlo y me veré obligada a quitarlo... :( Te dejo el enlace al blog (otra vez) para que veas si tiene arreglo: http://elrinconvintagedekarmela.blogspot.com.es/
ResponderEliminarGracias de antemano y perdona por la insistencia¡¡
La insistencia no causa efecto en mi caso. Si puedo os contesto, pero cuando no lo hago no es porque el mensaje se haya perdido, sino porque no puedo hacerlo en ese momento. Como habrás podido comprobar, creo que ya he contestado a los cuatro que dejaste por diversos posts ;)
EliminarHola Oloman, cómo estás. Intenté poner este codigo pero al hacerlo el efecto es este:
ResponderEliminarhttp://i67.tinypic.com/idg56t.jpg
Me podrías indicar qué valores debo modificar para que sea transparente y no me tape toda la entrada con esa franja? Mil gracias de antemano...
PD: vas a ver otros de tus aportes implementado ;)
Solucionado, era el "fondo de pestañas" el que hacía eso. Puse transparente y listo.
ResponderEliminarPero ya que estoy pregunto, yo quiero que a la entrada más antigua la ponga a la izquierda y a la más reciente a la derecha. Cómo hago?
Me alogro que lo hayas solucionado por tu cuenta.
ResponderEliminarPara invertir la posición de los enlaces, ya tienes que ir a tu plantilla y cambiar las propiedades de #blog-pager-newer-link y #blog-pager-older-link. Verás que uno tiene un float:left y el otro un float: right. Intercambia esas propiedades y ya casi lo tienes.
Digo casi porque si aplicaste el truco de esta entrada, entonces también tendrás que cambiar el CSS que facilité para que las fechas que se generan con :after, salgan en otra posición y eso ya es algo más largo de explicar.
Muy bueno!!! gracias ;-)
ResponderEliminar