Enlaces flotantes de navegación con los títulos de las entradas | Oloblogger Este es un sistema para dar un formato distinto al habitual a los enlaces de navegación de Blogger, esos que nos permiten pasar al post sigu...

20 de abril de 2016

Enlaces flotantes de navegación con los títulos de las entradas

Este es un sistema para dar un formato distinto al habitual a los enlaces de navegación de Blogger, esos que nos permiten pasar al post siguiente o anteriormente publicado al que estamos viendo.

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:

Títulos flotantes para enlaces de navegación


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 == &quot;item&quot;'>
<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.

Compartir
Copy URL

Y muchos más artículos interesantes si nos sigues en...

follow us in feedly

40 comentarios :

  1. 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..

    pdta..soy el primero en comentar.. primera vez... jajajajaja

    ResponderEliminar
    Respuestas
    1. 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.

      Eliminar
  2. Hola, 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

    ResponderEliminar
    Respuestas
    1. ya 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.

      Eliminar
    2. Si 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.

      Otra 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ú.

      Eliminar
  3. 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.

    ResponderEliminar
  4. Muchas 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??

    Gracias!!

    Saludos!!

    ResponderEliminar
    Respuestas
    1. 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?

      Eliminar
    2. Hola Oloman, este es mi blog:

      http://imss-ayuda.blogspot.com/2016/03/sua-347.html

      Eliminar
    3. Viéndolo es más fácil. Elimina esto de tu plantilla, que es lo que mete esos puntos:
      .blog-pager {
      background: transparent url(//www.blogblog.com/1kt/simple/paging_dot.png) repeat-x scroll top center;
      }

      Eliminar
    4. Oloman muchas gracias, quedó perfecto!! con eso se eliminaron esos puntos.

      Saludos!!

      Eliminar
    5. [modo chulería on] ¿Qué esperabas? XD

      Eliminar
  5. ya lo implemente y queda genial.Muchas gracias

    ResponderEliminar
  6. Hola 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/
    Gracias de antemano y perdona por la insistencia¡¡

    ResponderEliminar
    Respuestas
    1. 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 ;)

      Eliminar
  7. Hola Oloman, cómo estás. Intenté poner este codigo pero al hacerlo el efecto es este:
    http://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 ;)

    ResponderEliminar
  8. Solucionado, era el "fondo de pestañas" el que hacía eso. Puse transparente y listo.
    Pero 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?

    ResponderEliminar
  9. Me alogro que lo hayas solucionado por tu cuenta.

    Para 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.

    ResponderEliminar
  10. We know how important the quality of work on a vehicle body is. At ALSA Automotive, we seek to provide a quality service at the best possible price. We have the most advanced resources in technology for the greatesPanel painting services in Abu Dhabit efficiency in the repair of bodywork and paint, to achieve a perfect result.

    ResponderEliminar
  11. Hasten is uniquely positioned to maximize the success of its customers by utilizing its vast network of relationships along with its unwavering focus on its core principles of honesty, reliability, quality, credibility, and trust. With the goal of providing quality products, safely, and on a timely basis, Hasten will ensure you are satisfied with the end result.soil stabilization texas

    ResponderEliminar
  12. A Met Exteriors it is our goal to provide your business or home with a gorgeous exterior that people notice. Whether your building needs to be designed from the ground up, or simply needs a mild facelift, our skilled professionals are committed to providing you with an exterior image that is second to none.
    A Met Exteriors it is our goal to provide your business or home with a gorgeous exterior that people notice. Whether your building needs to be designed from the ground up, or simply needs a mild facelift, our skilled professionals are committed to providing you with an exterior image that is second to none.
    stucco construction edmonton

    ResponderEliminar
  13. Our certified team of experts are here to help. We believe in first-class service, knowledgeable conversations, and reliable delivery of Stone Supplier Edmonton

    ResponderEliminar
  14. Cavalli Tower is located along the western coast of Dubai, Al Sufouh is a high-profile neighbourhood in Jumeirah. It stretches
    Cavalli tower property for sale
    across 7 square kilometres towards the north-western side of Dubai Marina.

    ResponderEliminar
  15. The protection applied to seats is a ‘State of art’ formulation that coats each individual fabric fibre with an invisible barrier that protects against liquid spills, dirt, grease, oil and grime. Liquid spillage either passes straight through theCar interior maintenance Dubai weave without staining or simply ‘beads up’ and can be removed by wiping off with a clean cloth or vacuuming away.

    ResponderEliminar
  16. At the undergrad level, theses are generally doled out for degrees in the sociologies and Buy Essay Papers humanities, albeit other degree projects might require one, contingent upon the foundation. An exposition is constantly needed at the master's level and either a paper or a postulation will be needed at the phd level. Just at the phd level, nonetheless, will an applicant go through the viva, or oral assessment.

    ResponderEliminar
  17. Our costs are very low that you can easily affort it. Now there is no need to take out a second mortgage on your home just to afford professional repairs Edmonton foundation repair Our vision is to believe in honesty and giving our customers the best services. Our business is committed to our customers and their needs. Saving you money is part of our solution.

    ResponderEliminar
  18. It is about editing and making new HTML codes used for SEO, but I already know all about it because Marketing is my occupation, and I have been marketing since 2005 now. Assignment writing service

    ResponderEliminar
  19. Meta Title: Documentsonwheels.ca | Court filing | Divorce | Small claims
    Process Server for Family Court Ottawa

    ResponderEliminar
  20. Looking for a trusted and reliable fence company in Edmonton? Look no further than Fence installers Edmonton Systems Ltd. We offer a wide range of quality fencing services and products that are perfect for businesses of all sizes

    ResponderEliminar
  21. Removing a dent from a car is not just a matter of aesthetics. The bumps, dents, and scratches on the body of a car significantly reduce its market value and pose a risk that can lead to rust or corrosion problems of the sheet metal in the long term. Therefore, it is recommended to repair the buns or scratches on the car, whether they have been occurred by hail or accidental bumpsAuto Detailing Ottawa in parking lots or any other factor. To remove dents from a car quickly, economically, and with guarantees, it is necessary to hire qualified professionals in auto body repair with the appropriate tools and material to deliver a vehicle free of bumps in the shortest possible time with the lowest cost.

    ResponderEliminar
  22. In ILFORNO Restaurant we believe that quality is a product that shouldn’t be battered for less. This is why we have a team of specialized and innovative team behind our story of success. Our Cuisines are well thought out while maintaining a passionate artistic touch.
    Best Italian restaurant in UAE

    ResponderEliminar
  23. Top rated Magento Web Development Company in Arlington provides magento development services Arlington from all over the world.

    ResponderEliminar
  24. We provide various online dress shops Australia for our buyers. So that ladies can have the best choices and stick to Zonas. We have a variety of quality dresses from types of denim to floral dresses. We will keep you updated about new hot deals and trends.

    ResponderEliminar
  25. Prolific Animations is an award-winning animation production studio that provides commercial 2D/3D character animation, graphic design, illustration services to help you achieve your goals. Our creativity, expertise and professionalism will help you create the perfect animation to get your audience's attention. We can handle any type of animation project from simple to complex; we can create 2D animation, 3D character animation, and even help you make your own animated explainer videos.

    ResponderEliminar
  26. The business engages in all forms of digital marketing, including search engine optimization, social media marketing, email marketing, banner advertising, and hasWorking Capital in Dubai a B2B section that functions as a full-service digital marketing firm. They provide a comprehensive range of services, which include web design, SEO, management of Adwords, and social media management

    ResponderEliminar
  27. It is an excellent blog; I have ever seen. If you are in a relationship and want to know about your lover's innocence? If yes, then you have to check his innocence from the innocence test. It is one of the best paths to know about our partner's innocence. To know more details, go and check it immediately.

    ResponderEliminar
  28. Pressure Test systems, and fluid transfer pumps. Combined Pumps can offer a complete pumping chemical injection in UAEsolution depending on requirements and needs of our clients. Combined Pumps offer a unique pumping solution through our range of special designed and manufactured pump systems.

    ResponderEliminar