Come mostrare accanto ai titoli di Blogger una icona in funzione della etichetta del post.

Come visualizzare prima o dopo i titoli dei post di Blogger una icona corrispondente alla etichetta a cui si riferisce quell'articolo.

Prendiamo come esempio un sito creato con la piattaforma Blogger che si occupi di spettacolo. Questo argomento può contenere al suo interno diverse tipologie di articoli suddivisi in cinema, teatro, televisione, musica, gossip e altro ancora. I lettori di un sito come questo potrebbero trovare utile che accanto al titolo di ciascun post si visualizzasse in modo automatico una icona che mostrasse l'argomento trattato nell'articolo. Utilizzando i tag condizionali già usati per mostrare un contenuto sopra ai post e sotto agli articoli con una determinata etichetta vediamo come inserire una icona di una nota musicale accanto ai post con etichetta musica, una icona di uno schermo accanto ai post con etichetta televisione e così via.

Naturalmente questo si tratta solo di un esempio che può essere adattato alle singole esigenze. Se si decide di adottare questa personalizzazione bisogna fare in modo che solo una delle etichette prese in considerazione sia presente nei vari articoli perché altrimenti di sovrapporranno. Dopo aver salvato il template si va su Modello > Modifica HTML e si cerca la riga

<b:includable id='post' var='post'>

Si scorre il codice verso il basso fino a trovare la riga

<div class='post-header-line-1'/>

Subito sotto a questa riga si incolla questo codice

<!-- Icona titolo post Inizio -->
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:blog.pageType == "item"'>

<b:if cond='data:label.name == "computer"'>
<img style='float:right; margin-top:-50px;'src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmeFgg0sZOM00r9dmeODGpBQZy6J881OszXFHvSfAAI0mTW2gNlRLkoYDby1-HqlbLybElU1FbghGG-mWHcaFnaueDdh1nghk-Yq2tgmw08DMqqVMe__TwW-_FzyJ5e7zRypg-MfYXsNU/s32-Ic42/computer.png'  alt='nome-icona'/>
</b:if>

<b:if cond='data:label.name == "musica"'>
<img style='float:right; margin-top:-50px;' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlllwc_9NpLz_OgYpJnYahwWyq0lhV_ubed4BuYAichGc-H64x7wf8j-1Oj5Y0UyJ_7oXRrJJxZ6GZ6a4jhO5TFJqhq1viSOu9FEruQ8NXUHGrGbkTMX8taItdI7A-0kaBwodjvyGPC0g/s32-Ic42/musica.png'  alt='nome-icona'/>
</b:if>

</b:if>
</b:loop> 
<!-- Icona titolo post Fine-->

Si salva il modello. Sono state inserite solo due etichette con le relative icone precisamente "computer" e "musica" mediante i blocchi di codice evidenziati di verde. Si possono inserire altre etichette ciascuna con la propria icona mantenendo la stessa sintassi. Ecco il risultato

Accanto ai titoli dei post con etichetta "computer" si visualizzerà l'icona di un portatile e accanto ai titoli degli articoli con etichetta "musica" si vedrà l'icona di una cuffia.  Il tag margin-top:-50px; serve per posizionare l'icona alla stessa altezza del titolo. Se l'icona dovesse vedersi troppo in basso si può aumentare a -60px e viceversa se si mostrasse troppo in alto si può diminuire a -40px.

Demo
Clicca qui

Nella Demo per verificare il funzionamento della personalizzazione si sceglie un post con una delle due etichette menzionate aiutandoci con il widget delle etichette per poi aprire uno degli articoli.

COME MOSTRARE L'ICONA SULLA SINISTRA DEL TITOLO DEL POST

Nel codice precedente abbiamo inserito il tag float:right; per mostrare l'icona sulla destra. Se ci piacesse sulla sinistra bisogna modificare tale tag con float:left; ma non sarebbe sufficiente perché l'icona andrebbe a sovrapporsi al titolo con un brutto effetto

Per risolvere bisogna andare sempre su Modello > Modifica HTML e subito sopra alla riga ]]></b:skin> si incolla un codice come questo

h3.post-title {padding-left: 40px !important;}

dove il valore di 40 pixel può essere calibrato in funzione del modello.

Con questa personalizzazione si visualizzerà in modo automatico accanto al titolo del post l'icona negli articoli che riguardano l'etichetta corrispondente.