Come personalizzare con i fogli di stile il read more o salto in Blogger.

Mi sono già occupato del famoso "jump" introdotto da Blogger nell'editor aggiornato qualche giorno fa. Dopo averlo presentato nell'articolo Blogger introduce il Read More, ne ho illustrato come visualizzare il testo del link nei modelli personalizzati, quindi come modificare il testo del collegamento in Homepage, infine come inserire un'immagine al posto della scritta "Ulteriori Informazioni".

Adesso presento una nuova proposta di personalizzazione per i blog estremamente attenti all'aspetto visivo. Partiamo dal presupposto che nel vostro blog sia già presente il codice seguente

<b:if cond='data:post.hasJumpLink'>
      <div class='jump-link'>
        <a expr:href='data:post.url + &quot;#more&quot;'><data:post.jumpText/></a> 
      </div>
    </b:if>

poco sopra la riga <div class='post-footer'>. Questo significa che in Homepage i post con il salto avranno questo aspetto

 Con il link Ulteriori Informazioni che ha i colori di tutti gli altri collegamenti del blog. Se vogliamo personalizzarlo, per renderlo più accattivante o per puro senso estetico, dobbiamo creare una classe di stile specifica per questo elemento. Le classi di stile vengono create facendo precedere il nome dell'elemento da un punto o dal simbolo del cancelletto. Possiamo per esempio fare in modo di cambiare i colori del link, i colori del background e i colori di quando viene puntato con il mouse. Possiamo introdurre anche il padding per far iniziare la scritta un po' più internamente di qualche pixel. Come vedete dal precedente screenshot il testo "Ulteriori Informazioni" è infatti esattamente allineato al resto dell'articolo.

Un esempio di un codice potrebbe essere questo

.jump-link a {
background: #940F04;
padding: 10px;
color: #FFFFFF;
}
.jump-link a:hover {
background: #FDBCB7;
padding: 10px;
color: #003366;
}

che fa in modo che la scritta abbia come sottofondo il colore dei link del blog e il link abbia invece il colore della pagina(bianca). Per quanto riguarda i codici dei colori inseriti, sono quelli di questo blog ma possono ovviamente essere scelti a piacere.

Andare su Layout > Modifica HTML e cercare la linea di codice

]]></b:skin>

e immediatamente sopra inserite il codice delle classi che si sono create per il jump. Come mostrato in questo screenshot

Salvate il modello e guardate come adesso si presenta il link Ulteriori informazioni

 

            

Ho fatto uno screenshot in condizioni normali e uno quando il collegamento è puntato dal mouse. Si vede anche che la scritta ha un leggero rientro (10 pixel) rispetto all'articolo. Se non vi piace l'espressione Ulteriori Informazioni e volete modificarla con un altra seguite i consigli dell'articolo su come cambiare la scritta che si legge in Homepage negli articoli con il Read More.