Pubblicato il 14/11/13 - aggiornato il  | 2 commenti :

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.

personalizzazione-etichette

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.

categorie-prima-titoli-blogger

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

codice-modello-blogger

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

codice-incollato-modello-blogger

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

categoria-prima-del-titolo-blogger

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.


2 commenti :

  1. Ciao, mi sembra di aver seguito la procedura ma mi dà errore di analisi XML: The element type "div" must be terminated by the matching end-tag "< / div >"

    RispondiElimina
    Risposte
    1. Significa che un elemento div non ha la chiusura /div. Prova a inserire una slash nella seconda riga in questo modo. Invece di così
      itemtype='http://schema.org/BlogPosting'>
      sostituisci in questo modo
      itemtype='http://schema.org/BlogPosting' />

      Mi raccomando di salvare il modello prima di procedere
      @#

      Elimina

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