Mostrar las URL de los enlaces al imprimir una entrada

1 de diciembre de 2014 14 comentarios ,
No es el caso de este blog, pero hay otros casos donde los usuarios recurrentemente imprimen las entradas del blog que visitan, por ejemplo blogs con recetas de cocina, letras de canciones, poemas, etc. Hasta ahí no hay nada fuera de lo común, pero, ¿qué pasa si la entrada tiene un link y el usuario está interesado en ese enlace? ¿cómo puede el usuario ver el link en la hoja impresa? Puede parecer un detalle insignificante, pero detalles como este pueden mejorar o no la experiencia del usuario.

Lo que veremos a continuación es un sencillo método para que cuando se imprima la entrada del blog aparezcan también las URLs de los enlaces que contenga la entrada. De esta manera el usuario podrá ver en su hoja impresa los links que vienen incluidos en la entrada.

Para conseguirlo recurriremos al pseudo elemento :after, la propiedad content, el atributo attr(href), y por supuesto al tipo de medio print que hará que estos estilos sólo se apliquen en las impresoras.

Puedes ver un ejemplo en la siguiente imagen, la primera es una impresión de una entrada "normal", la segunda muestra los enlaces que hay en el post (tres en total). Las URL se muestran entre paréntesis, junto al texto que contiene el enlace.


Pues bien, sin más preámbulos, sólo debes entrar en Plantilla | Edición de HTML y añadir antes de </head> el siguiente código:

<style media='print' type='text/css'>
a:after {
content:" (" attr(href) ") ";
font-size:0.7em;
font-weight:normal;
font-style:italic;
}
</style>

Con eso bastará para que se puedan imprimir las URLS de las entradas, por supuesto otros estilos pueden ser añadidos o modificados.

Notarás que al agregar el código también se imprimirán las URLs del título del blog y en algunos casos también el de la entrada, o el de las imágenes del post que tengan enlace, para corregir eso vamos a especificar que en esas áreas no se agregue ningún contenido. De modo que el código quedaría así:

<style media='print' type='text/css'>
a:after {
content:" (" attr(href) ") ";
font-size:0.9em;
font-weight:normal;
font-style:italic;
}
.Header h1 a:after, .post-title a:after, .separator a:after { {
content:"";
}
</style>

Así de sencillo puedes hacer que tus lectores tengan la información más completa al momento de imprimir las entradas de tu blog. También recomiendo este método para imprimir únicamente la entrada del blog y evitar que aparezca la sidebar y otros elementos.


14 comentarios en:

" Mostrar las URL de los enlaces al imprimir una entrada "

  1. gracias por el aporte, no había considerado que mis visitantes imprimieran mis entradas pero utilizare ambos códigos por su las dudas. besos!!

    ResponderEliminar
  2. hola potro, mi duda no es con este articulo sino con el tema de las metatags. resulta que en mi blog en todas las entradas tengo imagenes, ademas de tener los botones de compartir en cada una, en las entradas que no tienen comentarios al compartir me aparece la imagen del post.. .hasta ahi todo bien. pero pasa que si comparto una entrada con comentarios me sale la miniatura de la imagen de perfil de google no la del post. ademas de que como descripcion sale el primer comentario que han echo, espero y me puedas ayudar. si quieres puedes ver el blog se llama Proy-agro

    ResponderEliminar
    Respuestas
    1. Hola Emanuel, regularmente eso sucede cuando la imagen de la entrada es pequeña, estos sistemas de compartir buscan la imagen más grande, y esa es la que toman para mostrar. Asegúrate que al menos una imagen de tu entrada sea mayor a 600px de ancho.

      Eliminar
    2. grcias potro, creo ya lo solucione use una etiqueta imagePostURL

      Eliminar
  3. Una consulta off-topic: sabes si es posible utilizar el "offset" en el loop del blog. Me interesa que el mío muestre los últimos artículos MENOS los cinco más recientes.

    ResponderEliminar
    Respuestas
    1. Soy muy reservado cuando del loop de las entradas se trata, quizá porque siempre que meto mano ahí todo acaba hecho un desastre. Supongo que se ha de poder, pero ignoro cómo. Lo que sí se me ocurre es que agregues un ID único a cada entrada siguiendo este tutorial de Vku:
      http://loseasi.blogspot.mx/2011/05/agregar-una-id-unica-cada-post-o.html

      Y luego con CSS establezcas que esas 5 entradas no se muestren, quizá con un display:none;
      Tal vez funcione, pero primero haz un respaldo de tu plantilla y/o practica en un blog de pruebas.

      Eliminar
  4. Hola Potro, soy yo otra vez con mis preguntas!

    Mira esta imagen donde te muestro dos números con dos problemas: https://dl-web.dropbox.com/get/ver.jpg?_subject_uid=268955601&w=AACdC5Yl8eeOI7f-y5I1OO_Q9hINC0834kuU_-vps62lRg

    1º)
    El titulo de las entradas se esconde detrás de la imagen. Cómo puedo hacer para que no llegue hasta la imagen?

    2º)
    He escrito unas entradas de prueba para ver que tal y como funcionaban y me he dado cuenta que el texto que se escribe, se sale del borde del cajetín de las entradas como puedes ver el la pagina principal de mi blog: http://www.emprendetuempleo.com/

    Si te vas al demo de la plantilla: http://magnet-soratemplates.blogspot.com.es/ verás como aquí no ocurre.

    Que debo hacer para corregirlo?

    Gracias Potro de antemano.

    ResponderEliminar
    Respuestas
    1. Hola, no he podido ver la imagen porque la URL no es correcta. Sin embargo, a lo segundo que preguntas, necesitas hacer una prueba más real, es decir, con un texto un tanto normal. En ese ejemplo no podrás saber el verdadero resultado final porque estás usando un texto sin espacios, es como si fuese una sola palabra larguísima que en la práctica no existe. Usa otro texto de ejemplo y mira si el resultado es el mismo.

      Eliminar
    2. Potro, esta es la Url: https://www.dropbox.com/s/686odoade6kj7ku/ver.jpg?dl=0

      Eliminar
    3. Debajo de .post h1 { agrega:
      max-width: 630px;

      Con eso establecerás un ancho máximo en el título de las entradas con lo que evitará que llegue hasta donde se encuentra ese elemento.

      Eliminar
  5. Pues mira, cuando he copiado algo de algún blog, sobre todo cuando se trantan de blogs así como el tuyo, que me interesa leer y procesar (☺) lo que pone (porque a veces me cuesta, qué le vamos a hacer), pues copio lo que me interesa, varias entradas por ejemplo, las copio a un word y después las paso a pdf, así puedo leerlas en la tablet, por ejemplo o en el móvil, cuando voy en el metro....y que yo sepa, también se me copian los enlaces que aparezcan en las entradas.....y tanto si las dejo en un word, como si las paso a pdf, puedo linkear sin ningún problema....además los links se copian en otros colores, por lo que los distingues bien (a parte de que ya ves que pone www o lo que sea)....

    Me gusta también eso de poder imprimir solo "una entrada" sin que se te imprima lo demás

    Gracias Potro....gracias por tu generosidad y por compartir siempre lo que sabes

    Un abrazo

    ResponderEliminar
    Respuestas
    1. Si copias y pegas en un editor de texto (según el editor) sí te aparecerán los enlaces y ahí no hay problema, el inconveniente es cuando el usuario quiere imprimir, ahí no hay manera que sepan qué contiene el enlace. Esa es la razón de esta entrada ;)

      Otro abrazo para ti.

      Eliminar
    2. Ahhhhh...ahora lo entiendo!
      Un abrazote

      Eliminar
  6. Talvez algun dia tambien se pueda incluir un codigo QR. pero eso ya dependeria de mas cuestiones.

    ResponderEliminar

Si tu blog contiene material protegido por derechos de autor habilita tu perfil y deja únicamente el nombre de tu blog, no dejes la dirección del mismo, de lo contrario el comentario será eliminado.

Nota: solo los miembros de este blog pueden publicar comentarios.

 
Ir Arriba Ir Abajo
I Ciudad Blogger