Come visualizzare il titolo del post al posto del Continua a leggere in Blogger.

Come mostrare in Blogger il titolo dell'articolo al posto di Continua a leggere dopo l'incipit dei post in cui sia stato utilizzato il bottone Inserisci Intervallo.

Con l'introduzione del Read More avvenuta ormai da anni Blogger si è uniformato a Wordpress nel mostrare in modo nativo nelle pagine dinamiche quali la Home, le Etichette o l'Archivio solo l'incipit del post in modo da rendere queste pagine molto più compatte. Per attivare questa opzione bisogna andare su Inserisci Intervallo all'atto della pubblicazione del post direttamente nell'Editor di Blogger. In questo modo nella Homepage potranno essere mostrati più articoli senza che questa diventi lunghissima da scrollare per i lettori.

I navigatori interessati a leggere il post per intero possono cliccare sul link Continua a leggere: che sarà inserito alla fine dell'incipit del post. Questa espressione può essere modificata a piacere andando su Layout > Post sul blog > Modifica e configurando gli elementi del post

L'espressione di default può essere cambiata nel campo accanto a Testo del link della Pagina di post. Dopo ogni modifica ricordarsi di andare in basso su Salva. I più curiosi possono andare su Modello > Modifica HTML per visualizzare il codice deputato a mostrare questo elemento che se non avete fatto modifiche è il seguente

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

dove <data:post.jumpText/> rappresenta il tag che mostra l'espressione che abbiamo settato per il link che serve ad aprire tutto il post. Ci sono molti altri tag di Blogger che servono per altri elementi. Per esempio <data:post.title/> è quella variabile che indica il titolo del post. Possiamo sostituire il tag precedente con questo per modificare il codice in questo modo

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

dove &gt;&gt; servono per i due simboli >>. Dopo la sostituzione e il salvataggio del modello si visualizzerà al posto di Continua a Leggere il Titolo del post in oggetto.

con il titolo del post seguito dai due simboli >> al posto di Continua a leggere. Nel primo codice ho colorato di blu la classe creata da Blogger per il Read More. Usando questo selettore si può personalizzare il titolo del post aumentandone le dimensioni o inserendo uno sfondo. Il codice che segue è solo un esempio di quello che si può fare 

.jump-link a {
background:#ffe;
font-weight:bold;
font-size: 120%;
}

e, se incollato nel modello subito sopra la riga ]]></b:skin>, porterà a questo risultato

con il Titolo del post più grande, in grassetto e con uno sfondo colorato. Ovviamente i parametri inseriti sono solo indicativi e possono essere modificati i codici dei colori, le dimensioni dei font e possono anche essere inserite altri righe che riguardano lo stile dei bordi, la famiglia di caratteri o anche il colore del titolo del post.