Sustituir "Entradas anteriores" por imágenes | Oloblogger En una entrada anterior, se explicó como localizar el artilugio que gestiona los enlaces "Entra...

10 de noviembre de 2007

Sustituir "Entradas anteriores" por imágenes

En una entrada anterior, se explicó como localizar el artilugio que gestiona los enlaces "Entradas anteriores", "Entradas más recientes" e "Inicio", que aparecen al final de cada página Blogger (Ver Cambiar aspecto del enlace "Entradas anteriores"). Ahora vamos a explicar como cambiar ese mismo texto por imágenes.


Para ello, hay que quitar entero todo el código entre las etiquetas <b:includable id='nextprev'> y </b:includable>, ambas incluidas. En la entrada antes citada, se reproduce entero el código a eliminar.

El código que hay que poner en su lugar es

<b:includable id='nextprev'>
<div id='blog-pager'>
<b:if cond='data:newerPageUrl'>
<a expr:href='data:newerPageUrl' expr:title='data:newerPageTitle' id='blog-pager-newer-link'>
<img src='DIRECCION URL IMAGEN ENTRADAS MAS RECIENTES'/></a>
</b:if><b:if cond='data:olderPageUrl'>
<a expr:href='data:olderPageUrl' expr:title='data:olderPageTitle' id='blog-pager-older-link'>
<img src='DIRECCION URL IMAGEN ENTRADAS ANTERIORES'/></a>
</b:if>
<a class='home-link' expr:href='data:blog.homepageUrl'>
<img src='DIRECCION URL IMAGEN INICIO'/></a>
</div>
<div class='clear'/>
</b:includable>

Y eso es todo... siempre que previamente hayais escogido y guardado convenientemente en algún sitio, las imágenes que quereis poner.

¿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

54 comentarios :

  1. que hariamos los usuarios de blogger sin estos pequeños truquitos para mejorar los blogs?
    gracias de nuevo,creo q cuando tenga tiempo me hare unas flechitas gracias a esta informacion.!!
    a ver con q mas nos sorprendes!

    ResponderEliminar
  2. Hola Oloman, soy Andybel. Tranquilo por el comentario de la anterior consulta; ya te he contestado en mi blog.
    .-Sigues siendo un referente en esto del mantenimiento, gestión y mejora de nuestros blogs.
    .-Buena y original mejora en esto de cambiar las entradas anteriores por iconos.
    .-Saludos y hasta otra.

    ResponderEliminar
  3. Anónimo19/5/08 8:42

    Hola, estuve intentando poner en practica esta entrada tuya, bueno lo q describes ahi. Y solamente funciona el link en imagen para ir a la portada nomas, mientras q el para ir a las entradas antiguas, y el otro link con imagen tambien para ir a las entradas nuevas no funcionan, no se ven. E hice tal cual como lo explicas, pero solo funciona el link con imagen para ir a home/portada. Los otros dos no. heelp

    ResponderEliminar
  4. Pásame tu URL y le echo un vistazo.

    ResponderEliminar
  5. Ok, Oloman, muchas gracias, aqui te paso la url, yo primero hago los experimentos en un blog de borrados, y si veo q me funcionan lo aplico en mi blog real. Este es:

    http://blogdebosquejo.blogspot.com/

    veras q solo sale la imagen de la casita, q puse para ir a la portada del blog, pero los otros para ir atras y para entrada nueva no se ven ni menos funcionan.

    saludos Qarols

    ResponderEliminar
  6. Hmmm. No lo he visto a fondo, pero me parece que no tienes más de seis entradas y se ven todas en portada.
    Por tanto, no hay "entradas anteriores".
    Configura el blog para que sólo muestre 4 entradas (ó 2) a ver si te aparece.

    ResponderEliminar
  7. Anónimo21/5/08 3:02

    Hola, soy yo de nuevo. Hice lo q me dijiste, eso de poner solo 2 o 4 entradas nomas en la portada para ver si aparecia eso o no, pero no aparece. Como te he dicho ese es solo un blog de experimentos, no hay nada importante ahi, son solo letras locas pero es para ensayar y asi no cometer errores en mi blog de verdad.
    La verdad no se q pasa, las imagenes q subi hasta tenian todas el mismo formato (gif), y solo la de la casita funciono nomas.

    Mi deseo es poner una imagen a cada lado y cambiar ocmo vienen x defecto. Es decir, bloguer trae el link de "entradas antiguas" en el lado derecho (y yo las antiguas quiero q esten al lado izquiero y con un link en forma de imagen asi como tu dices).

    Ojala me puedas ayudar a ver que es lo q pasa.

    Otra cosa q tampoco he podido es hacer el famoso "sigue leyendo" para q se vea solo un fragmento de una entrada, en la portada, y q al clicar en ese 'sigue leyendo' se le redirija al lector al link original (NO la portada) en donde esta esa entrada, porq o sino, si solo lee la entrada desde la portada, me he fijado q no aparece la opcion de agregar un comentario desde ahi. Bueno ese es otro tema.

    Que sera que sera...

    ResponderEliminar
  8. Qarols, acabo de ver tu blog y ahora que has reducido el número de entradas por página, SI que aparece lo de "Entradas antiguas".

    Intenta primero cambiar sólo el mensaje de texto, siguiendo las instrucciones que se dan en el enlace que se cita al principio de esta entrada. Cuando controles el tema, vuelve a éste si quieres sustituir el texto por una imagen.

    Otra cosa que se dice en la primera entrada pero no en ésta: hay que "expandir plantillas de artilugios" (por si acaso se trata de ésto)

    ResponderEliminar
  9. hola la verdad que blog me ha servido muchisimo y te lo agradesco, equerido hacer lo que dices en cambiar la entradas por imagenes y no me resulta, ahora como hago con las imagenes que deseo poner tengo el codigo que tu facilitas pero como le hago para llevar esas imagenes al codigo. gracias y perdona mi carencia, pero como muchos no se nada e ido aprendiendo a porraso

    gracias el Resucitado te Bendiga

    ResponderEliminar
  10. La imagen la tienes que tener alojada en algún sitio: Flickr, Imageshak o en el propio Blogger.

    Una vez hecho, tienes que copiar la dirección URL de la imagen.

    En el código, se sustituye la parte en negro (DIRECCION URL IMAGEN...) por la dirección que has copiado y ya está.

    Suerte

    ResponderEliminar
  11. hola oloman enhorabuena por tu blog, lo he conocido gracias a enlaces de gema y el escaparate. Enhorabuena!!! este truco lo había visto antes pero no sabia como hacerlo. aunque tengo un problemilla el icono de la flecha izquierda me sale centrada y no a la izquierda haber si me puedes ayudar.



    gracias por tu tiempo



    http://albacete-fotos.blogspot.com/search?updated-max=2008-09-28T12%3A11%3A00%2B02%3A00&max-results=1

    ResponderEliminar
  12. ah se ve olvidaba tengo un blog de pruebas y supuestametne igual que el mio bueno y en este no me hace eso...

    que es lo que falla?

    ResponderEliminar
  13. Angel, esto ocurre en la primera página, dónde no hay posts anteriores y en la última, dónde no hay posts ulteriores (qué fisno estoy a veces).

    En estos casos, hay un hueco y el centrado no sale bien. Supongo que en el blog de pruebas tiene más posts en total o menos por página. También se puede deber a la configuración general de centrado, aunque no creo.

    Me ha parecido contar que tienes 9 entradas por página. Prueba a poner 4 y si todo va bien, saldrán las tres imágenes bien porque habrá posts anteriores y posteriores.

    De todas formas y sólo es una opinión, como tus posts son muy largos, quizás convendría que redujeras de todas maneras el número de entradas por página. Asi conseguirás que las páginas no sean tan largas, porque uno se llega a cansar de darle tanto al scroll lateral... AMEN de que también lograrás que cada página pese menos y se cargue más rápido. :)

    ResponderEliminar
  14. gracias man este dato lo estaba buscando por todas partes mas bien dime donde esta el truco para poder cambiar las imagenes de los comentarios asi como el tuyo que tiene un lapiz espero me ayudes gracias de antemano

    ResponderEliminar
  15. MINDistortion, la respuesta la tienes en Quitar logo Blogger en comentarios

    Busca al final del post, donde el conejo y el sombrero.

    ResponderEliminar
  16. Hola Oloman

    Llegué aquí a través de Bitácoras y la verdad es que me ha encantado tu blog, muy práctico, claro y bien estructurado (me encanta el diseño por cierto)

    Quería hacerte una pregunta relacionada con el post
    ¿cómo sustituyo "Entradas antiguas" y "Entradas recientes" por los respectivos títulos de los posts? Encontré una manera entre Vagabundia y Solrac, pero con el primero, no lo termino de entender y con el segundo no me hace mucha gracia tener que depender de un servicio de alojamiento externo. Veo que tus explicaciones suelen ser más claras en estas cosas y te agradecería mucho una entrada para megatorpes del sistema de vagabundia (o, ya puestos, otra forma más simple de hacerlo, si será por pedir...)

    Gracias y un saludo

    ResponderEliminar
  17. Acabo de leer el post de Vagabundia y comenta que su solución no está exenta de problemas. Sobre todo porque los títulos se mostrarían sin acentos, con guiones... vamos que no quedarían muy presentables.

    Por otro lado, la solución de Solrac se puede implementar en tu propio blog redactando en el directamente el SCRIPT. Así no tendrías que que depender de un servicio externo.

    El problema en este segundo caso es que sólo funciona hasta un máximo de 500 post y ese número es relativamente fácil que se alcanza en un blog con un par de años de existencia. Por tanto, es una solución que a medio plazo te daría problemas.

    ¿Aún así quieres ponerlo?

    ResponderEliminar
  18. Pues me dejas dudando, aunque yo estoy aún muy lejos de las 500 entradas (como mucho actualizo una vez a la semana), no quiero poner algo que en el futuro me dé más problemas que soluciones.
    Quería usarlo para facilitar la navegación ya que sólo tengo una entrada por página y sé la pereza que da eso de darle a "entradas anteriores" sin saber muy bien qué te vas a encontrar. En fin, mientras no haya otro sistema mejor probaré sólo con "entradas recientes" y "entradas relacionadas" a ver que tal queda.

    Gracias de todos modos.

    Un saludo

    PD: He puesto un índice de todas las entradas en mi blog y va de miedo. Gracias.

    ResponderEliminar
  19. no puedo esto es lo mas parecido que encontre en todo el codigo
    b:include data='blog' name='all-head-content'/
    y lo borro y pego el que tu tienes y nada
    como le hago oloman o en que otra parte lo puedo pegar

    ResponderEliminar
  20. Primero visita el post previo a este (http://oloblogger.blogspot.com/2007/11/cambiar-aspecto-del-enlace-entradas.html) para ver mejor como es el widget. Una vez que lo entiendas, si siques sin encontrar lo que se dice, prueba con la clase "blog-pager-newer-link". Puede que tengas tu código algo diferente, pero se hace igual una vez localizado el trozo correpondiente.

    ResponderEliminar
  21. hola primero que todo llevo 3 dias construyendo mi blog de musica. El problema esque me salen las imagenes pero me salen desordenadas y juntas me explico de este modo :
    entradas recientes - entradas antiguas - home

    y salen apegadas a la izquierda.

    http://metalcorexfire.blogspot.com/ mi blog

    http://metalcorexfire.blogspot.com/search?updated-max=2009-01-31T19%3A26%3A00-03%3A00&max-results=3 - y aki donde sale el problema

    xao y gracias

    ResponderEliminar
  22. Squall10, lo primero es que el artilugio no lo tienes bien redactado. Copia el que aquí se muestra y sustitúyelo por el tuyo. Luego cambia la dirección de las imágenes por las de tus flechas.

    Me ha dado la impresión de que no tienes definidas las clases BLOG-PAGER, que son las que consiguen separar las imágenes: una a la izquierda, otra a la derecha y HOME en el centro.

    En cualquier caso, este sería el código correcto a colocar antes del /B:SKIN. Si no tienes dichas clases definidas insertas este código. Si las tienes pero con otro código, entonces se trata de sustituirlo:

    #blog-pager-newer-link {
    float: left;
    }
    #blog-pager-older-link {
    float: right;
    }
    #blog-pager {
    text-align: center;
    }

    ResponderEliminar
  23. Bienn ya me funciono...

    el codigo no lo tenia y lo agregaba en el primer B:skin y me salia en la parte de arriba del blog, y no entendia... despue me di cuenta que era terminando el b:skin y wuala funciono

    muchas graciasss

    ResponderEliminar
  24. Un millón de gracias por vuestra ayuda.
    Seguiré buscando más truquitos. Tal vez copie tu casita para otro de mis blogs.

    ResponderEliminar
  25. Muchas gracias por el codigo!! lo andaba buscando =)

    Poner una flecha en lugar de las letras predeterminadas aunmenta su visibilidad.. xD

    Saludos.. muy buen blog!! Luego me paso de nuevo para buscar algunos tips mas..

    ResponderEliminar
  26. gracias oloman funciono de nuevo... gracias

    ResponderEliminar
  27. donde consigui las imagenes???

    ResponderEliminar
  28. Hola €li@n@...

    Las puedes construir, las puedes encontrar en Google, en bancos de imágenes gratuitas y también las puedes encontrar en múltiples sitios que ofrecen iconos.

    ResponderEliminar
  29. Hola, muy buenas.
    tengo una duda que posiblemente ya la allan comentado, no lo se.
    yo deseo eliminar esto de entradas antiguas, que al abrir el blog se muestren todas y cada una de las entradas montadas al blog desde su inicio.
    e modificado fechas, e seleccionado una opcion que menciona: mostrar:500 entradas y otra 500 dias. y nada.
    si alguien me puede ayudar se lo agradecere.

    ResponderEliminar
  30. Bueno Gabriel, hace un tiempo, quizás sería posible, pero desde que surgió lo de la autopaginación, me temo que Blogger cortará por algún sitio y no te permitirá que se vean demasiadas entradas al mismo tiempo.

    ResponderEliminar
  31. gracias por la explicacion, lo voy a intentar en mi blog.

    www.lawebadeloso.blogspot.com

    ResponderEliminar
  32. Hola Oloman, no me aparece y en EDICION DE HTML...
    que sera?

    ResponderEliminar
  33. ¿Qué no te aparece? ¿Los enlaces o el código?

    ResponderEliminar
  34. Hola Oloman, otra cosa mas realizada de las pendientes que tengo en el blog, queda de lujo aunque quizás he puesto las flechas muy grandes ... bueno siempre estaré a tiempo de poner una imagen mas pequeña ;) Gracias!! Un saludo

    ResponderEliminar
  35. no esta bien explicado amigo no le hayo utilidad

    ResponderEliminar
  36. La única utilidad es cambiar texto por imágenes. Una cuestión meramente estética para el que la prefiera.

    ResponderEliminar
  37. Hola Olo, he tratado de hacer esto mismo, siguiendo paso a paso y cuando le doy guardar o ver vista previa, me sale error 500. He buscado mucho y no se que es. Que significa este error? Graciass

    ResponderEliminar
  38. Daniela, el error 500 es algo que te saldrá eventualmente cuando el servidor de Blogger esté sobrecargado. Son problemas que sólo se solucionan con el tiempo y no tienen nada que ver con este código en concreto. A veces 5 minutos, a veces 5 horas :(

    ResponderEliminar
  39. excelente ... me salio muy bien ...xD

    ResponderEliminar
  40. Epico. Me Funciono a Mil.

    Muchas Gracias.

    ResponderEliminar
  41. Una pregunta, me podrías decir donde podría encontrar otros diseños de flechas y "casita" para poner en el blog? o como buscarlos?

    ResponderEliminar
    Respuestas
    1. Te iba a decir lo mismo que te dijeron ya aquí abajo. Busca "iconos" en Google y seguro que aparecen cientos. Yo lo haría desde la pestaña imágenes para prevializarlos.

      Eliminar
    2. Pero si pongo iconos muestra... iconos jajaja. No habría una manera más precisa de buscar este tipo particular de iconos? algún termino que haga referencia directa a este tipo de iconos?

      Eliminar
    3. ¿Iconos flecha? :D

      Arrow icons
      Home icons
      Iconos home

      Eliminar
    4. Lo conseguí! http://www.iconspedia.com/ hay una relativa buena cantidad de iconos y si encontrás uno que te gusta y querés otros con el mismo tema te da la posibilidad de buscar iconos del mismo paquete. También te dicen que tipo de licencia tienen.
      Finalmente colocando los iconos flotantes abajo al medio queda espectacular!
      Este blog ha sido de lo más interesante.

      Eliminar
    5. Y tu propuesta de colocar los botones abajo en lugar de flotando en un lado también. Asimismo con esa web que dices. Voy a echarle un vistazo más a fondo a ver si publico algo sobre ella. Gracias por el aviso.

      Eliminar
  42. Puedes encontrar en varios lugares de internet íconos gratis libres para descargar, y en ellos encontrarás casas y flechas. Gracias oloblogger

    ResponderEliminar
  43. ¡Hola! He intentado hacer esto en la plantilla de nuevo diseño, pero no puedo ¿se hace igual?
    Gracias
    :)

    ResponderEliminar
  44. Yo creo que sí, que ese gadget que se ocupa de mostrar Entradas recientes - Entradas antiguas, es igual de código

    ResponderEliminar
  45. Gracias! Lo adapté ( teve que dejar una linea extra que tenia mi plantilla y que no salía en el código original) y quedé genial! Gracias!

    ResponderEliminar