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.

Come visualizzare gli URL dei link quando stampi un post. 

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.

Come aggiungere il codice.

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>

Questo dovrebbe essere sufficiente per visualizzare gli URL dei post . Naturalmente, è possibile aggiungere o modificare altri stili. 

Noterete che l'aggiunta del codice visualizzerà anche gli URL del titolo del blog e, in alcuni casi, il titolo stesso del post o eventuali immagini nel post che contengano link. Per correggere questo problema, specificheremo che non deve essere aggiunto alcun contenuto in quelle aree. Quindi, il codice apparirà così: 

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

Come garantire ai tuoi lettori le informazioni più complete.

È 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