Pubblicato il 08/10/15e aggiornato il

Come mostrare in Blogger un contenuto solo alla fine dei post che abbiano una data etichetta.

Come visualizzare nei post di Blogger un contenuto (banner, pubblicità, video, annuncio, ecc) solo alla fine degli articoli che abbiano una determinata etichetta.
Nel precedente articolo ho mostrato come si possa aggiungere una immagine al titolo del post sia direttamente sia modificando il modello. All'interno dell'articolo ho evidenziato come sarebbe una soluzione ottimale quella di poter visualizzare una icona in funzione delle etichette del post. In un blog che si occupa di motori si potrebbe mostrare una icona di una moto nei post con quella etichetta, una icona con una auto nei post che abbiano etichetta auto e così via. 

La soluzione non è semplice perché i tag condizionali per questa operazione esistono ma funzionano solo in determinate situazioni. Ho pensato quindi di pubblicare più articoli su questo tema prendendo in esame di volta in volta un particolare posizionamento. Iniziamo con un quesito di tipo abbastanza generale.

"Come si può aggiungere alla fine del post un contenuto variabile in funzione della etichetta dello stesso post?". Se prendiamo questo sito come esempio si vuole trovare un sistema per aggiungere un banner alla fine di ogni articolo che abbia "blogger" come una delle etichette e un altro banner alla fine dei post che abbiano "immagini" tra le etichette.  I banner saranno naturalmente diversi e vengono presi come contenuto tipico che invece potrebbe essere un widget, un video o altra cosa. Gli articoli che avessero sia "blogger" sia "immagini" tra le sue etichette mostrerebbe entrambi i banner

Dopo aver salvato il template si va su Modello > Modifica HTML e si cerca la riga

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

Si clicca sulla freccetta nera posta a sinistra della riga in modo da visualizzare tutto il codice della sezione. Si scorre fino in fondo fino a trovare il codice

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

come mostrato in questo screenshot

codice-blogger

Subito sopra a queste due righe si incolla un codice come questo

<!-- Banner Etichetta Inizio -->
<div class='post-footer-line post-footer-line-4'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:blog.pageType == "item"'>

<b:if cond='data:label.name == "blogger"'>

<a href='#'><img src='https://lh3.googleusercontent.com/-bT_zLfLJoqk/VhZZDI1XNwI/AAAAAAAAxoo/ERqQ9Sjtlkk/s474-Ic42/Banner-blogger.jpg'/></a>

</b:if>
<b:if cond='data:label.name == "immagini"'>

<a href='#'><img src='https://lh3.googleusercontent.com/-hIu47pkY9eU/VhZZFmGEqzI/AAAAAAAAxow/ZoZXDFcQqIo/s474-Ic42/Banner-immagini.jpg'/></a>

</b:if>

</b:if>
</b:loop>
</div> 
<!-- Banner Etichetta Fine -->

in questo modo

codice-modello-blogger

Per trovare l'inizio e la fine della sezione ci si può aiutare con i numeri delle righe del codice che vengono nascoste quando si clicca sulla sinistra e si fanno comparire le freccette nere. Finalmente si salva il modello e si apre un post per verificare il funzionamento.

Nella Demo cercate i post che abbiano una etichetta "blogger" o una etichetta "immagini" e solo alla fine di quegli articoli vedrete uno dei due banner o anche tutti e due nel caso in cui il post avesse entrambe le etichette. Aiutatevi cliccando sul widget delle etichette posto nella sidebar.

banner-modello
Come già detto il banner è solo un esempio di contenuto. Al posto del codice dei due banner che sono evidenziati di verde si possono mettere codici di altre cose come video o annunci pubblicitari. Il codice va considerato solo come un esempio con due etichette ma si possono aggiungere tutte le etichette che si vogliono mantenendo la stessa sintassi evidenziata di giallo.

Per poter utilizzare questo codice ho inserito una quarta linea di footer con le righe evidenziate di beige. La problematica più complicata è infatti quella di creare una nuova sezione per potervi inserire i tag condizionali adatti a mostrare dei contenuti solo nei post con una data etichetta.




Nessun commento :

Posta un commento

Non inserire link cliccabili altrimenti il commento verrà eliminato. Metti la spunta a Inviami notifiche per essere avvertito via email di nuovi commenti. Se ti ho aiutato con il post o con le risposte ai commenti condividi su Facebook o su Twitter. Grazie.