04 aprile 2011

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.



6 commenti:

  1. dici che sia più utile ai visitatori?
    non so.. sono un po' in dubbio se metterlo o meno. Tu cosa ne pensi?

    RispondiElimina
  2. Ciao , ti ho assegnato un premio:
    http://etoilesworld.blogspot.com/2011/04/premio.html

    RispondiElimina
  3. Ciao Ernesto,piccolo problema, se io scrivo un post in home page, e poi faccio il read more, e possibile vedere il tutto in una pagina statica? nel senso posso dirottare il continua a leggere nella pagina che voglio io? Dimmi di si ti prego.

    RispondiElimina
  4. @gio6868
    Lo puoi fare con dei post specifici ma non con tutti. Ecco come inserire il redirect
    http://www.ideepercomputeredinternet.com/2009/12/come-inserire-il-redirect-in-un-blog-su.html

    RispondiElimina
  5. oggi faccio il pieno! Ottimo!

    RispondiElimina

Non inserire link cliccabili altrimenti il commento verrà eliminato. Metti la spunta a Inviami notifiche per essere avvertito via email di nuovi commenti al post.