Come anteporre l'etichetta al titolo del post in Blogger.

Come mostrare il nome della etichetta in automatico prima del titolo dei post nei blog su piattaforma Blogger e come personalizzarne l'aspetto.

Seguendo la falsariga del post precedente in cui ho mostrato come inserire il link dei commenti accanto al titolo dell'articolo vediamo come si possa mostrare il nome della categoria in modo automatico prima del titolo del post. Questo succederà solo nel layout mentre nei risultati di ricerca si vedrà solo il titolo dell'articolo. Questa personalizzazione può essere utile per siti che si occupano di argomenti ben definiti in modo da mostrarli automaticamente ai lettori. Per esempio un sito di motori può avere le etichette moto e auto mentre un sito di cucina può catalogare i post con le categorie primi, secondi, dolci e antipasti.

Il risultato della personalizzazione mostrerà l'etichetta prima del titolo del post. Se ci fossero più etichette sarà mostrata l'ultima etichetta in ordine alfabetico a prescindere dall'uso di maiuscole o minuscole. Vale a dire con le etichette blogger, Widget e Gadget sarà mostrate l'etichetta Widget.

Questo potrebbe provocare dei problemi che potremmo comunque risolvere con un po' di fantasia. Possiamo cioè utilizzare i codici ASCII per inserire prima del nome della etichetta un particolare carattere che sarà ordinato dopo le lettere dell'alfabeto. Per un blog di cucina potremo per esempio creare le categorie

→ Primi, → Secondi, → Dolci, → Antipasti

da aggiungere alle normali categorie in fase di pubblicazione dei post. Tali etichette possono essere aggiunte in un secondo momento anche a tutti i post già pubblicati. Ovviamente al posto della freccia può essere usato un qualsiasi altro carattere ASCII diverso da quelli alfabetici.

Fatta questa premessa passiamo alla personalizzazione. Dopo aver salvato il template si va su Modello > Modifica HTML e si cerca la riga di codice seguente tramite Ctrl+F

<b:includable id='post' var='post'>
Si cancella questa riga e tutto il codice seguente fino alla riga
<div class='post-header'>
esclusa come mostrato nel seguente screenshot

Al suo posto si incolla questo nuovo codice

<b:includable id='post' var='post'>
  <div class='post hentry' itemscope='itemscope' itemtype='http://schema.org/BlogPosting'>
    <a expr:name='data:post.id'/>
        <b:if cond='data:post.labels'>
         <b:loop values='data:post.labels' var='label'>
          <script type='text/javascript'>
            var etichetta = &#39;<data:label.name/>&#39;;
            var PreTitle = etichetta + &quot; | &quot;;
          </script>
         </b:loop>
        <b:else/>
         <script type='text/javascript'>
         var PreTitle = &quot;&quot;;
         </script>       
        </b:if>
    <b:if cond='data:post.title'>
      <h3 class='post-title entry-title' itemprop='name'>
      <b:if cond='data:post.link'>
        <a expr:href='data:post.link'><span class='PrePost'><script>document.write(PreTitle);</script></span><data:post.title/></a>
      <b:else/>
        <b:if cond='data:post.url'>
          <b:if cond='data:blog.url != data:post.url'>
            <a expr:href='data:post.url'><span class='PrePost'><script>document.write(PreTitle);</script></span><data:post.title/></a>
          <b:else/>
           <span class='PrePost'><script>document.write(PreTitle);</script></span><data:post.title/>
          </b:if>
        <b:else/>
         <span class='PrePost'><script>document.write(PreTitle);</script></span><data:post.title/>
        </b:if>
      </b:if>
      </h3>
    </b:if>

come mostrato in questo nuovo screenshot

Si salva il modello. Se adesso aprite il blog visualizzerete l'ultima etichetta in ordine alfabetico prima del titolo del post anche in Homepage, nelle pagine delle Etichette e in quelle di Archivio.

ULTERIORI PERSONALIZZAZIONI

La separazione del titolo dell'articolo dalla categoria è data &quot; | &quot; che non sono altro che due spazi contenenti il carattere " | ". Si può ovviamente scegliere un altro separatore come un trattino o altro ancora. È anche possibile creare uno stile particolare per l'etichetta mostrata. Si può sempre andare su Modello > Personalizza > Avanzato > Aggiungi CSS per incollarlo nell'apposito spazio. Questa procedura è comunque sconsigliata per chi abbia un modello modificato. Per questi ultimi è meglio andare su Modello > Modifica HTML e cercare la riga seguente tramite Ctrl+F

]]></b:skin>

per poi incollare subito sopra un codice come questo

.PrePost{
color: #fff !important;
background-color: #ff0000 !important;
font-size: 28px;
}

per avere un risultato come quello mostrato nel seguente screenshot

Come è arcinoto ai lettori più abituali sono totalmente mancante di senso estetico e certamente saprete fare di meglio magari consultando il post sui codici dei colori.