Blogger Book

Questo non è il caso di questo blog, ma ci sono altri casi in cui gli utenti stampano spesso i post che visitano, ad esempio blog con ricette, testi di canzoni, poesie, ecc. Fin qui, niente di insolito, ma cosa succede se il post contiene un link e l'utente è interessato a quel link? Come può l'utente vedere il link sulla pagina stampata ? Può sembrare un dettaglio insignificante, ma dettagli come questo possono migliorare l'esperienza dell'utente, o meno.

Quello che vedremo di seguito è un modo semplice per garantire che, quando si stampa un post del blog, vengano visualizzati anche gli URL dei link in esso contenuti. In questo modo, l'utente può vedere i link inclusi nel post sul foglio stampato.

Per raggiungere questo obiettivo, utilizzeremo lo pseudo-elemento :after , la proprietà content , l' attributo attr(href) e, naturalmente, il tipo di supporto print , che garantirà che questi stili vengano applicati solo alle stampanti.
Potete vedere un esempio nell'immagine seguente. La prima è la stampa di un post "normale", mentre la seconda mostra i link nel post (tre in totale). Gli URL sono mostrati tra parentesi, accanto al testo che contiene il link.

Bene, senza ulteriori indugi, vai su Template | Modifica HTML e aggiungi il seguente codice prima di </head> :

<style media='print' type='text/css'>
a:after {
contenuto:" (" attr(href) ") ";
dimensione carattere:0.7em;
peso carattere:normale;
stile carattere:corsivo;
}
</style>

<style media='print' type='text/css'>
a:after {
contenuto:" (" attr(href) ") ";
dimensione carattere:0.9em;
peso carattere:normale;
stile carattere:corsivo;
}
.Intestazione h1 a:after, .titolo del post a:after, .separatore a:after { {
contenuto:"";
}
</style>

È così semplice che puoi garantire ai tuoi lettori le informazioni più complete quando stampi i tuoi post del blog. Consiglio questo metodo anche per stampare solo il post del blog , evitando la visualizzazione della barra laterale e di altri elementi.

fonte