Pubblicato il 21/03/13e aggiornato il

Come usare i tag condizionali nel modello di Blogger.

Elenco di tutti i tag condizionali di Blogger per mostrare widget o singoli elementi in determinate pagine o punti del blog..
Il supporto di Blogger ha una pagina specifica in cui viene spiegato un po' troppo sbrigativamente ma in italiano quale sia la sintassi dei tag dei gadget per i layout. In questo contesto vengono illustrati anche i tag IF / ELSE per visualizzare un determinato contenuto in alcuni punti del sito ma non in altri. Queste condizioni sono fondamentali per esempio per mostrare un bottone solo nei post ma non in Homepage o per visualizzare un widget solo nelle pagine statiche. Mi sono già occupato meno di un anno fa del tema delle condizioni per Blogger ma forse è il caso di pubblicare un nuovo articolo per ampliare e approfondire il discorso.

Intanto dobbiamo dire che questi tag non sono linguaggio HTML o CSS ma funzionano solo se vengono inseriti in un modello di Blogger e non vengono invece rilevati se sono inseriti in una qualsiasi altra pagina web. La cosa interessante è che si possono creare dei tag condizionali che non facciano parte dell'elenco dei più usati e conosciuti. La sintassi dei tag b:if e b:else è la seguente

<b:if cond='inserire la condizione'>
   [contenuto da visualizzare se la condizione è vera]
<b:else/>
   [contenuto da visualizzare se la condizione è falsa]
</b:if>

Il tag <b:else/> è facoltativo e se non ci fosse il risultato sarebbe il contenuto della condizione o nessun contenuto. Senza <b:else/> la sintassi diventa

<b:if cond='inserire la condizione'>
   [contenuto da visualizzare se la condizione è vera]
</b:if>

che è quella più utilizzata. Le condizioni sono in genere inserite in questa forma

cond='data:blog.pageType == "item"'

in cui sono visibili due segni di uguale e un tag di Blogger. La condizione precedente significa che è vera quando la pagina corrente sia una pagina di elementi ovvero di post. Dopo i due segni di uguale la seconda condizione è messa tra le doppie virgolette. Quando si va a incollare questo codice nel template di Blogger, le virgolette vengono convertite in XML e la condizione precedente diventa
cond='data:blog.pageType == &quot;item&quot;'

E' irrilevante inserire un tag condizionale nella prima o nella seconda forma.

ELENCO DEI TAG CONDIZIONALI DI BLOGGER


CONDIZIONE IMPOSTA EFFETTO
<b:if cond='data:blog.url == data:blog.homepageUrl'> Elemento solo in Home
<b:if cond='data:blog.url != data:blog.homepageUrl'> Elemento ovunque esclusa la Home
<b:if cond='data:blog.pageType == &quot;item&quot;'>  Elemento solo nei post
<b:if cond='data:blog.pageType != &quot;item&quot;'> Elemento ovunque esclusi i post
<b:if cond='data:blog.url == "URL_PAGINA"'> Elemento solo nella pagina dell'URL
<b:if cond='data:blog.url != "URL_PAGINA"'>   Ovunque escluso l'URL della pagina
<b:if cond='data:blog.pageType == &quot;static_page&quot;'> Solo nelle pagine statiche
<b:if cond='data:blog.pageType != &quot;static_page&quot;'> Ovunque escluse le pagine statiche
<b:if cond='data:blog.pageType == &quot;archive&quot;'> Solo nelle pagine di Archivio
<b:if cond='data:blog.pageType != &quot;archive&quot;'> Ovunque escluso pagine di archivio
<b:if cond='data:blog.pageType == "data:blog.searchLabel"'> Solo nelle pagine delle etichette
<b:if cond='data:blog.pageType != "data:blog.searchLabel"'> Ovunque escluso pagine etichette
<b:if cond='data:post.isFirstPost'> Solo nel primo post
<b:if cond='data:blog.pageType == "error_page"'> Solo nelle pagine non trovate
<b:if cond='data:blog.pageType != "error_page"'> Ovunque escluso le pagine errore
<b:if cond='data:blog.searchLabel == "NOME_ETICHETTA"'> Pagine con quella etichetta
<b:if cond='data:blog.searchLabel != "NOME_ETICHETTA"'> Ovunque esclusa  data etichetta
<b:if cond='data:post.author == "NOME_AUTORE"'> Pagine con dato autore
<b:if cond='data:post.author != "NOME_AUTORE"'> Pagine non di quell'autore
<b:if cond='data:post.numComments > 1'> Post con più di 1 commento
<b:if cond='data:blog.isMobile'> Visibile solo nei dispositivi mobili
<b:if cond='data:blog.isMobile == "false"'> Non visibile nei dispositivi mobili
<b:if cond='data:post.allowComments'>  Post in cui sono permesssi i commenti
<b:if cond='data:post.allowComments == "false"'>  Post con commenti non consentiti

I dati in rosso possono essere personalizzati. In alcune condizioni si sono sostituiti questi caratteri == (uguale a) con quest'altri != (non uguale a). Riguardo alla 5° e alla 6° condizione e all'introduzione dei domini localizzati bisogna ricordarsi che vanno sempre inseriti gli URL canonici. L'URL

http://nomesito.blogspot.it/2013/3/titolopost.html     va sostituito da quest'altro
http://nomesito.blogspot.com/2013/3/titolopost.html


COME USARE I TAG CONDIZIONALI NEI WIDGET

Applicare un tag condizionale a un widget significa per esempio mostrare quel widget solo in Homepage, solo nelle pagine statiche oppure ovunque escluso nei post. Se scegliamo questa personalizzazione dobbiamo individuare la riga che ci serve e copiarla in un file di testo. La seconda riga sarà sempre </b:if>. Dopo aver salvato il template si va su Modello > Modifica HTML > Procedi e si espandono i modelli widget. Si pigia su F3 o su Ctrl+F, si incolla il titolo del widget per individuarlo. Visualizzeremo un codice simile a quello qui riportato
<b:widget id='Id Widget' locked='false' title='Titolo Widget' type='Tipo del widget'>
<b:includable id='main'>
< b:if cond='data:title'><h2><data:title/></h2></b:if>
< div class='widget-content'>
..........
< b:include name='quickedit'/>
< /div>
</b:includable>
< /b:widget>

dove le parti in viola possono essere le più diverse e dove al posto dei puntini ci può essere molto altro codice. In ogni caso ci saranno sicuramente le righe colorate di rosso. Il primo tag condizionale va incollato subito sotto la riga <b:includable id='main'> mentre il tag </b:if> va incollato subito sopra l'altra riga </b:includable> come si vede in questo screenshot di esempio

tag-condizionali-blogger
Si salva il modello e il widget in questione sarà visibile solo all'interno dei vincoli che abbiamo imposto con i tag condizionali. Questo è un sistema che uso molto quando creo delle dimostrazioni di widget che rendo visibili solo in un singolo post di un blog di prova.

COME USARE I TAG CONDIZIONALI NEI CONTENUTI DEL MODELLO

Oltre che per mostrare i widget solo in determinati punti del layout, i tag condizionali possono anche essere usati per inserire dei vincoli a altri elementi del modello come dei codici di javascript per renderli efficaci solo in una determinata pagina oppure come dei bottoni di condivisione sui social network che vogliamo visualizzare solo negli articoli. In questo caso la sintassi è semplicissima visto che non resta che inserire il codice del contenuto all'interno dei due tag come per esempio

<b:if cond='data:blog.pageType == &quot;item&quot;'> 
CODICE DEL BOTTONE DI CONDIVISIONE
</b:if>

che introduce la condizione a un pulsante di essere visto solo nei post. Concludo osservando come sia possibile creare anche altri tag condizionali quale questo
<b:if cond='data:post.showBacklinks'>
che è vero se il post corrente è impostato per visualizzare i link a ritroso, o quest'altro
<b:if cond='data:comment.author != data:post.author'>
che è vero quando l'autore del commento non sia anche l'autore del post.




35 commenti :

  1. Come aprire il link del gadget in una nuova finestra del browser in un blog di Blogger. grazie

    RispondiElimina
    Risposte
    1. @# Dipende da quale gadget. Se ha un codice si mette il tag target="_blank" accanto all'indirizzo dell'URL, se invece non ha un codice allora c'è poco da fare

      Elimina
  2. Ciao Ernesto; esiste un modo per cambiare aspetto solo al primo post, rimanendo invariati gli altri? Grazie mille.

    RispondiElimina
    Risposte
    1. @# Sì ci sono dei metodi al riguardo, personalmente però non mi sono mai cimentato in una guida in questo senso.

      Elimina
  3. Ciao! Complimenti per le dritte e i consigli utilissimi! Vorrei fare una richiesta, sperando di non essere troppo esigente.

    Vorrei sapere se è possibile nascondere i post che hanno una determinata etichetta nella homepage. Vorrei fare una scrematura di post nella home, in modo che appaiano solo alcuni e non tutti (in base alle etichette che gli ho assegnato). Ho cercato sul tuo sito ma non sono ancora riuscito a scovare la soluzione. Grazie ancora.

    RispondiElimina
    Risposte
    1. @# Neppure io :)
      Al momento l'unica possibilità per nascondere post nella home è quella di pubblicarli con una data retroattiva.

      Elimina
  4. Ciao Ernesto
    torno all'attacco...:-)
    Prima di imbarcarmi in una serie di prove volevo capire se per pubblicare dei post di blogspot ESCLUSIVAMENTE in una pagina del blog medesimo (e non in home) posso sfruttare questi strumenti dell'articolo qui sopra o se meglio tentare con i sottodomini come mi suggerivi in passato.
    Grazie mille!

    RispondiElimina
    Risposte
    1. Per pubblicare dei post senza che siano visibili in home, oltre ai sottodomini, puoi sfruttare questo sistema
      http://www.ideepercomputeredinternet.com/2013/09/nascondere-post-homepage-blogger.html
      mentre i tag di questo post sono inutili
      @#

      Elimina
  5. Questo commento è stato eliminato dall'autore.

    RispondiElimina
  6. Ciao Ernesto.
    Complimenti, i tuoi consigli sono utilissimi!!!
    Per creare una linea tratteggiata sopra al post-footer ho usato questo Css ->
    .post-footer {
    border-top: 2px dotted #ADD8E6;
    margin: 30px 0px;
    text-transform: uppercase;
    line-height: 18px; font-size: 12px; }

    Fino a qui tutto bene, l’unico problema è che questa riga si trova in tutte le pagine del blog... purtroppo non riesco a trovare una soluzione per toglierla dalle 2 pagine statiche “about” e “contatti”.
    Mi puoi aiutare per favore? Ci sono dei Css o dei tag condizionali da poter usare?
    Grazie mille!!!! Ciao
    Beba

    RispondiElimina
    Risposte
    1. @# Procedi in questo modo:
      1) Cancella il CSS che hai inserito
      2) Vai su Modello > Modifica HTML e incolla subito sopra a </head> questo codice

      <b:if cond='data:blog.pageType != &quot;static_page&quot;'>
      <style>
      .post-footer {
      border-top: 2px dotted #ADD8E6;
      margin: 30px 0px;
      text-transform: uppercase;
      line-height: 18px; font-size: 12px; }
      </style>
      </b:if>


      Elimina
  7. Ciao Ernesto, grazie per le informazioni!
    Con “Ctrl+F” ho attivato la casella di ricerca per trovare la stringa con HEAD ma non viene evidenziata la scritta.
    Ho fatto varie prove ma non riesco a trovare HEAD .
    Come posso fare? Grazie mille!!!!

    RispondiElimina
    Risposte
    1. Leggiti questi due post e guarda anche i video
      http://www.ideepercomputeredinternet.com/2013/04/how-to-search-blogger-template-code.html
      http://www.ideepercomputeredinternet.com/2013/08/cercare-codice-html-blogger-template.html
      e vedrai che troverai tutte le righe di codice che desideri :)
      P.S. La casella di ricerca si deve visualizzare nell'Editor e non nel browser
      @#

      Elimina
  8. Grazieeeee!!!!!
    Missione compiuta.... è tutto merito tuo!!!!!

    RispondiElimina
  9. ciao Ernesto, volevo chiederti se era possibile oltre a far apparire gli annunci in base al nome cosa che faccio e funziona a meraviglia, anche in base al nome + etichetta. Mi spiego meglio , tizio scrive nel blog ed al nome di tizio se mette etichetta motori, voglio fare apparire annunci sui motori, se mette etichetta sport, voglio fare apparire annunci di sport, è possibile?
    Saluti

    RispondiElimina
    Risposte
    1. Temo di non aver capito bene. Quali annunci? Quelli di Google? Quelli di altro circuito pubblicitario? In ogni caso tali annunci non sono mai gestiti dal publisher
      @#

      Elimina
    2. cerco di spiegarti meglio: scrivo nel blog non da amministratore ma mediante l'utente dal nome tizio.
      Negli articoli di tizio imposto in automatico alla pubblicazione di un articolo, gli annunci adsense all'interno degli articoli solo che, per determinate etichette, voglio far apparire altri banner al posto di quelli adsense.
      Esempio: ho 7 etichette dal nome a-b-c-d-e-f-g
      Alle etichette a-b-c-d-e , all'interno degli articoli, voglio far apparire in automatico negli articoli gli annunci adsense , all'etichetta f voglio far apparire in automatico i banner dell'agenzia caio ma non quelli di adsense e dell'agenzia sempronio, alla categoria g, voglio far apparire i banner dell'agenzia sempronio ma non quelli dell'agenzia caio e degli annunci adsense, è possibile?

      Spero mi sia fatto capire perchè ci ho messo 3 ore a scrivere il commento
      ciao!

      Elimina
    3. Hai scelto il post giusto ma non mi viene in mente un sistema automatico. Fosse una sola categoria potresti usare il tag condizionale di cui alla riga
      "Pagine con quella etichetta"
      ma visto che la cosa riguarderebbe più categorie la vedo di difficile realizzazione dal punto di vista del codice
      @#

      Elimina
    4. ma volendo si potrebbe fare?
      non è che puoi darmi una mano?
      ti lascio i miei contatti?

      Elimina
  10. Come ti ho detto si può fare solo per una etichetta. Cioè se un banner si dovesse mettere solo ai post di una etichetta si potrebbe fare ma con più etichette non so come si potrebbe fare. Non posso escludere che uno più bravo di me ne sappia di più :)
    @#

    RispondiElimina
    Risposte
    1. si potrebbe fare ad esempio mettendo vari widget nella sidebar esempio
      etichetta sport, banner di sport
      etichetta motori, banner di motori e cosi via?

      Elimina
    2. Sì, si può fare. Facciamo un esempio pratico. Se vuoi mettere un banner Sprintrade nelle etichette sport, motori e musica devi installarne tre che chiamiamo HTML1, HTML2 e HTML3. Poi per ciascun widget inserisci i tag condizionali in modo che siano visibili solo nei post con quella etichetta. Ci sono però delle avvertenze
      1)Se hai centinaia di etichette ti ci vogliono settimane se non mesi
      2)Devi stare attento a non duplicare i widget. Se un post ha sia l'etichetta sport sia l'etichetta motori si vedranno due banner invece di uno soltanto
      3)Se i banner sono nella sidebar vanno inseriti i tag condizionali come fossero widget mentre se vengono inseriti nel modello bisogna mettere i tag condizionali prima e dopo il codice
      @#

      Elimina
    3. certo, hai ragione, in questo modo apparirebbero più banner e non va bene,
      quindi come non detto
      Grazie lo stesso Ernesto,
      O.T ma con dfp si può fare qualcosa?
      Saluti

      Elimina
  11. ciao ernesto: sto cercando di modificare la grandezza delle immagini nella home page del mio blog, ma in html trovo questa stringa che mi lascia perplessa, e soprattutto non riesco a modificare la dimensione in modo che le immagini non vengano schiacciate:
    cerco infatti image_tag=img src e la dimensione che è inserita è "image_size+'-c/'"
    if(image_url!="") return image_tag; else return "";

    non c'è una dimensione automatica da inserire o quantomeno più grande? non è un template semplice di blogger.
    grazie!

    RispondiElimina
    Risposte
    1. Non si tratta di una modifica semplicissima ma credo si possa fare. Magari ci potrei fare un post in seguito. Non ho testato ma prova a procedere in questo modo
      1) Leggiti il post su come ridimensionare le immagini in Blogger
      http://www.ideepercomputeredinternet.com/2013/04/resize-images-blogger.html
      2) Usa i tag condizionali per usare questo ridimensionamento solo nella Homepage
      P.S. Se le immagini in home ti vengono schiacciate è perché nel tuo modello c'è già un ridimensionamento automatico che però segue un rapporto larghezza altezza diverso da quello che usi tu
      @#

      Elimina
    2. nulla ancora da fare, sembra non risentire di nessun cambiamento. Ci deve essere qualche blocco css che fa ignorare la stringa da aggiungere...

      Elimina
  12. Ciao Ernesto, sempre valide le tue indicazioni. Volevo chiederti: se i widget hanno una cornice, come nel mio caso, come faccio ad eliminare pure quella dalle pagine statiche?

    RispondiElimina
    Risposte
    1. Forse ti riferisci a questa problematica
      http://www.ideepercomputeredinternet.com/2014/03/blogger-tag-condizionali-nascondere-rettangoli.html
      che ho già affrontato
      @#

      Elimina
    2. Esattamente!!! Mitico, Ernesto. Problema risolto! Grazie!

      Elimina
  13. Questo tag condizionale nel mio caso non funziona: <b:if cond='data:blog.pageType == "data:blog.searchLabel"'>

    Funziona invece se scrivo così: <b:if cond='data:blog.searchLabel'>

    RispondiElimina
  14. Ciao Ernesto, grazie come sempre per i preziosi consigli. Stavo cercando un modo per attribuire i condizionali a tutti i post contenenti una determinata etichetta (non alla pagina di ricerca di una etichetta) e sembra che non sia possibile. Un modo per assegnare delle condizioni a gruppi di post sarebbe il nome autore, da quanto vedo sopra. É possibile modificare il nome autore ai post? Ovviamente ho più di una email associata a blogger. Non ho trovato il modo, anche se apro il post con profilo diverso, lo modifico e lo salvo, resta sempre l'autore che l'ha postato la prima volta. Grazie!

    RispondiElimina
    Risposte
    1. È cosa piuttosto difficile. Adesso Blogger ha messo a disposizione altri strumenti
      http://www.ideepercomputeredinternet.com/2015/05/tag-condizionali-if-else-elseif.html
      però creare delle condizioni non è semplice. Tempo fa ho provato questa condizione

      <b:if cond='data:blog.pageType == "item" and "blogger" in ["data:post.labels"]'>

      che risulterebbe valida se la pagina è un post e se nell'elenco delle etichette c'è la etichetta "blogger" però poi nel test non ha funzionato. Il sistema però è questo per cercare la condizione giusta
      @#

      Elimina
  15. È possibile diminuire lo spazio sopra l'header solo per la versione mobile?

    RispondiElimina
    Risposte
    1. Tu hai installatoquesto menù
      http://www.ideepercomputeredinternet.com/2015/06/blogger-mobile-menu.html
      per il mobile. C'è una riga per settare la distanza tra menù e parte alta
      < div style='margin-top:25px;'/ >
      puoi diminuire il numero dei pixel o azzerarli o addirittura mettere dei numeri negativi. Ti consiglio comunque di lasciare il tag perché ho notato che non so per quale ragione Blogger muta spesso le distanze. Anche a me andavano bene i 25 pixel quando ho messo il menù mentre ora li ho diminuiti perché lasciavano troppo spazio in alto
      @#

      Elimina

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.