Mostrar las URL de los enlaces al imprimir una entrada

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.