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.

Come inserire un'immagine al posto della scritta "Ulteriori Informazioni" in un salto in Blogger.

Per comprendere il significato di questo articolo dovete prima aver letto i due post seguenti

1. Blogger introduce il read more per la pubblicazione dei sommari degli articoli -
2. Come visualizzare la scritta "Ulteriori Informazioni" nei modelli personalizzati di Blogger -

Se andate in Layout > Modifica HTML, dopo aver espanso i modelli widget, sia nel caso in cui abbiate un modello originale di Blogger che in quello di un template personalizzato dovrete comunque avere questo codice

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

<div class='post-footer'>

Se al posto di Ulteriori Informazioni o un testo analogo che avete selezionato in Modifica Gadget Post, volete inserire un'immagine per accedere all'articolo completo dovete procedere in questo modo

1. Creare o acquisire l'immagine che volete inserire al posto del link
2. Caricarla nel web in un hosting gratuito tipo SkyDrive
3. Acquisirne l'indirizzo. Ecco un esempio di immagine che potrebbe essere usata per il read-more

Modificare il precedente codice sostituendo <data:post.jumpText/>, evidenziato in rosso, con <img src="URL_immagine" border="0" alt="Read More" />. Dove al posto di URL_immagine si inserisce l'indirizzo dell'immagine caricata nel web e al posto di Read More il testo che credete più opportuno. Questo testo si vedrà solo nel caso in cui un browser non riuscisse ad aprire l'immagine.

Un esempio di codice modificato potrebbe essere questo

<b:if cond='data:post.hasJumpLink'>
      <div class='jump-link'>
        <a expr:href='data:post.url + &quot;#more&quot;'><img src="http://fb647g.blu.livefilestore.com/y1pYUMWDgOhS-WN2NoQKj1oPEOmWVxwA6H4_7Z-g_zKlJ55A6enYUV8yAmiqVR1x_8fD-OBvDy81rzu9nPjYpFLzw/Read-More.png" border="0" alt="Read More" /></a> 
      </div>
    </b:if>

e l'inserimento nel modello al posto dell'altro modifica l'aspetto dei sommari degli articoli in questo modo

     

In alcuni modelli molto sofisticati dal punto di vista della grafica potrebbe essere un tocco ulteriore di eleganza.

Come modificare l'espressione "Ulteriori Informazioni" per il link del read more (salto)

Mi è stato chiesto per email se esiste la possibilità di modificare l'espressione "Ulteriori Informazioni" che appare in Homepage alla fine del sommario dell'articolo nel caso si sia inserito il salto. La cosa non solo è fattibilissima ma estremamente semplice. Se tale scritta non vi appare perché avete un modello personalizzato leggetevi il post

• Come visualizzare l'opzione "Ulteriori Informazioni" nel sommario degli articoli in Blogger -

che forse potrà aiutarvi.

Andate in Layout > Elementi pagina e cliccate su Modifica nel gadget del post

Si aprirà una finestra di questo tipo

Nella seconda riga è presente il "Testo del link della Pagina di post", evidenziato di verde nello screenshot. Se si vuole cambiarlo si sostituisce con un altra espressione a nostra scelta quindi si clicca su Salva in basso a destra.

Il nuovo testo comparirà non solo negli articoli che scriverete in futuro ma anche in quelli già scritti in cui è stato inserito il read-more.

Come visualizzare l'opzione "Ulteriori Informazioni" nel sommario degli articoli del blog su Blogger in cui si è inserito il read more o salto che dir si voglia.

Se si ha un modello originale di Blogger nel momento in cui si inserisce il read more viene visualizzato in Homepage il link Ulteriori Informazioni per leggere tutto il post

Se si ha invece un modello molto personalizzato può capitare di non visualizzare tale link e quindi i visitatori, per aprire il post, dovranno cliccare sul titolo. Molti magari crederanno che l'articolo si sia concluso lì e neppure lo faranno

Si può fare in modo di ovviare a questo inconveniente modificando leggermente il modello. Avverto comunque che questo metodo l'ho sperimentato solo in due modelli e quindi non è detto che funzioni su tutti. In uno di questi modelli erano già presenti gli articoli sintetici e ha funzionato egregiamente.

Per sicurezza prima di verificarne l'efficacia nel vostro template scaricate un modello completo, cosa che deve essere fatta comunque sempre. 

Andate su Layout > Modifica HTML ed espandete i modelli widget. Guardate se è presente il seguente codice

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

che si dovrebbe trovare tra la riga

<data:post.body/>

e la riga

<div class='post-footer'>

Fra queste due righe ci può essere pochissimo codice o molto di più a seconda dei modelli e se avete inserito la pubblicità.

Nel caso in cui non vediate il link Ulteriori Informazioni probabilmente non sarà presente. Allora lo dobbiamo inserire sopra la riga <div class='post-footer'>, come mostrato in questo screenshot

Salvate il modello. Adesso quando inserirete il salto o read more in un articolo sarà visibile il collegamento Ulteriori Informazioni. Diventerà visibile anche negli articoli che avete pubblicato in precedenza. Ecco come si presenta dopo la modifica al template l'articolo test di prima

Sono graditi commenti, suggerimenti e eventuali conferme del corretto funzionamento di questo piccolo trucco da applicare nel caso di modelli con forti personalizzazioni.