Come inserire il titolo del post dopo il Read More in Homepage di Blogger.

Questa personalizzazione è veramente l'uovo di Colombo ma fino ad ora non ci aveva ancora pensato nessuno. Pochi minuti fa Blogger Buster ha pubblicato un articolo in cui si tratta proprio di questo semplicissimo ma interessante hack. Andando su Design > Elementi pagina > Post sul blog > Modifica si può scegliere la frase da visualizzare alla fine della parte visibile del post che può essere Continua leggere >> , Leggi tutto… oppure un'altra simile a queste. Invece di visualizzare una semplice scritta con il link al post completo potrebbe essere utile visualizzarne anche tutto il titolo.

Questo link sarà visibile anche nelle pagine delle etichette e in quelle di archivio. Si va su Design > Modifica HTML e si cerca il codice del read more, dopo aver salvato il modello completo e aver messo la flag su espandi modelli widget. Si usa F3 o Ctr+F (CMD+F per Mac).

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

Ci potrebbero essere delle piccole variazioni di codice da template a template. Inserite all'interno di questo codice, prima del tag di chiusura del collegamento </a>, la stringa evidenziata di rosso in modo che diventi così

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

La prima parte, <data:post.title/>, serve per visualizzare il titolo del post mentre &gt;&gt; rappresentano i simboli >> da inserire alla fine dello stesso titolo. Si possono togliere, sostituirli con dei puntini o altre espressioni a piacere. Non resta che salvare il modello e aprire l'homepage per visualizzarne l'aspetto. Si può anche cliccare su Anteprima se non si è sicuri di aver fatto tutto in modo appropriato.

Per rendere questo link ancora più visibile si può creare una classe di stile come questa

.jump-link a {
font-weight:bold;
font-size: 110%;
}

che serve per mostrare tutto il collegamento in grassetto e per aumentarne del 10% le dimensioni. Volendo si può inserire anche un diverso colore. Questo codice va incollato subito sopra alla riga ]]></b:skin> e va nuovamente salvato il modello. E' opportuno inserire il simbolo dei due punti (Es: Continua a leggere:) in Post sul blog per visualizzare il titolo del post subito dopo.