Pubblicato il 29/12/12 - aggiornato il  | 6 commenti :

Come inserire un elemento solo nei post con una data etichetta.

Come aggiungere un elemento alla fine di tutti gli articoli che abbiano una determinata etichetta.
Attraverso i tag condizionali si possono mostrare widget o oggetti solo in determinate pagine o anche in un singolo post. Non mi risulta sia stata tuttora risolta la questione di come mostrare un widget inserito dal Layout negli articoli che abbiano una determinata etichetta.

Si può però inserire alla fine di tutti gli articoli con una data etichetta un oggetto HTML che si visualizzi soltanto in quei post. Questo può essere utile per quei blog che abbiano creato delle etichette con significati particolari. In un sito che si occupa di recensioni di abbigliamento, sotto ai post che abbiano l'etichetta di una particolare marca si può inserire un banner anche pubblicitario che inviti a visitare il relativo showroom. Si potrebbero naturalmente fare una infinità di esempi anche più calzanti di questo.


Come elemento inserirò una semplice immagine con link ma al suo posto si può mettere il codice di un qualsiasi altro oggetto HTML. Per prima cosa occorre come sempre salvare il template. Si va poi su Modello > Modifica HTML > Procedi. Dopo aver messo la flag a Espandi i modelli widget, si cerca

<div class='post-footer-line post-footer-line-3'>

che dovrebbe essere presente in tutti i modelli. Si tratta della terza riga di questo tipo con cui si suddividono le sezioni del footer. Scorriamo il codice fino a trovare la sua chiusura cioè il tag </div>

codice-modello-chiusura-div

Subito dopo questo </div> si incolla il seguente codice

<!-- 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 == "prova"'>
<a href='#'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibztxX24mB51lPfwilvqUfkZ2uBwkdqPDU3UZsSpQZOEaM9jnhcqWjM6vG3abh4CTa-L0i67poAti2Qp7KwtHuSRyJxxv3u2yj-CTLOdCx-ILjXazjc8nVB9y_O65oxxfW2UzNJfZilRo0/s474/Banner.jpg'/></a>
</b:if>
</b:if>
</b:loop>
</div>
<!-- Banner Etichetta Fine -->

quindi si salva il modello. La parte in grassetto è l'oggetto HTML che inizia con <a e termina con </a> e che può essere personalizzato a piacere. L'immagine ha l'URL in rosso mentre l'indirizzo del collegamento va inserito al posto del simbolo del cancelletto ( # ).



Tale oggetto si visualizzerà solo nei post che abbiano l'etichetta 'prova'. Ovviamente tale etichetta dovrà essere sostituita da quella sotto ai cui post ci interessa inserire quel dato elemento.

elemento-etichetta-singola

Il banner non sarà visibile nelle pagine etichetta ma solo negli articoli perché è presente il tag condizionale che agisce in tal senso. Si può ulteriormente personalizzare l'elemento tramite l'inserimento di un apposito CSS. Si cerca la solita riga ]]></b:skin> e per esempio, subito sopra, si può incollare il codice che ci permette di centrare l'immagine

.post-footer-line-4 {
text-align:center;
}

Si possono aggiungere anche altri parametri anche in funzione del tipo di oggetto che si è aggiunto.
Fonte | Compartidisimo -


6 commenti :

  1. Una cosa simile mi servirebbe per non far visualizzare l'Adsense sotto il titolo del post in determinati articoli.

    RispondiElimina
  2. Ciao Ernesto,
    sai se è possibile associare un link all'immagine inserita, di modo che cliccandoci sopra si vada a finire in una determinata pagina?
    Grazie, e ne approfitto per augurarti un meraviglioso 2013 :)

    RispondiElimina
  3. Si potrebbe escludere il banner dai post che contengono come etichetta PROVA e PROVA1 ? Intendo da due diverse etichette.

    RispondiElimina
    Risposte
    1. @# Nel post il banner viene inserito nei post con una data etichetta e non escluso. Nel caso in cui ci fossero due o più etichette si potrebbe decidere di mostrare il banner se c'è l'etichetta PROVA ma non l'etichetta PROVA1
      In questo caso ci sdarebbe un'altra condizione da aggiungere e la parte centrale del codice diventerebbe così

      <b:if cond='data:blog.pageType == "item"'><b:if cond='data:label.name == "prova"'>
      <b:if cond='data:label.name != "prova1"'>
      <a href='#'><img src='https://lh3.googleusercontent.com/-Mq1gY5lKjuM/UN75HMwIJzI/AAAAAAAAeGI/ra6aqRlcNr4/s474/Banner.jpg'/></a>
      </b:if>
      </b:if>
      </b:if>

      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