Personalizzare il link "leggi tutto" nei post espandibili su blogger

Da poco Blogger ha introdotto la possibilità di impostare un editor avanzato per la scrittura dei post, che ha molte funzioni in più rispetto a quello classico, soprattutto per la formattazione del testo.

Per attivare l'editor avanzato basta andare dal pannello di controllo, nella scheda "Impostazioni" alla voce "Generale", e in fondo alla pagina impostare l'editor aggiornato nelle impostazioni globali.



Forse la novità più utile è la funzione per spezzare i post e mostrarne solo il sommario sulla home page del blog. Questo offre il vantaggio di poter visualizzare solo una parte del testo del post, quindi velocizzare il caricamento della home e mostrare più post senza allungare troppo la pagina iniziale.

In questo modo, sotto ogni singolo post in home page, comparirà un link attraverso il quale accedere alla pagina del post completo. Il testo da visualizzare in questo link possiamo sceglierlo noi, andando dal pannello di controllo nella scheda "Layout", e cliccando sul link "Modifica" contenuto nel riquadro che indica il corpo del post:



Dalla finestra che appare possiamo modificare il testo nella casella, e scrivere quello che preferiamo:

 

Potremmo scrivere "continua a leggere il post", o "read more...", o ancora "leggi tutto l'articolo", o (come ho fatto io) semplicemente "continua".

Questo link comparirà in basso a sinistra sotto ogni post, e attraverso gli strumenti del blog non è possibile modificarne l'aspetto. Tuttavia è possibile personalizzarlo inserendo poche righe di codice nel template.

Andiamo alla scheda "Lyout" > "Modifica HTML", e cerchiamo questa riga di codice:

/* -- layout –- */

e subito sopra incolliamo queste:

.jump-link {
font-size: 1.5em;
float: right;
}

.jump-link a {
padding-top:1px;
padding-bottom:1px;
padding-left:10px;
padding-right:10px;
text-decoration:none;
color: #cc3300;
}

.jump-link a:hover {
color:#FFD700;
text-decoration:none;
-moz-border-radius:6px;
background:#cc3300;
}

Salvando il template noterete che il link al post completo avrà un aspetto diverso da prima.
Modificando queste righe di CSS potete personalizzare l'aspetto del link, e in particolare controllare:

- font-size: grandezza del testo
- float: allineamento/posizione del link (se a destra, a sinistra o al centro)
- padding-top/bottom/right/left: margine del riquadro colorato che compare al passaggio del mouse
- text decoration: l'aspetto del testo prima del passaggio del mouse e durante il passaggio del mouse; può essere sottolineato (underline), grassetto (bold), eccetera...
- -moz-border-radius: il raggio del bordo arrotondato del riquadro colorato (attenzione perché questa proprietà non funziona su acuni browser, ad esempio su Explorer)
- background: il colore del riquadro che compare al passaggio del mouse, che volendo può essere sostituito anche da un'immagine inserendo dopo i due punti “url(http://indirizzo-dell-immagine.jpg)”.

Potete inserire anche nuove proprietà nelle righe, ricordando che la parte che segue ".jump-link a" si riferisce all'aspetto del link nello stato di inattività (prima del passaggio del mouse) e la parte che segue ".jump-link a:hover" controlla l'aspetto del link al passaggio del mouse.

Per esempio alla voce background potete sostituire il colore con un'immagine, basta caricarla sul proprio dominio, o su un servizio di archiviazione online gratuito come Imageshack, e inserire l'url dell'immagine in questo modo

background: url(http://url-dell-immagine.png);