Come eliminare gli inestetismi creati dai tag condizionali di Blogger.

Come eliminare gli spazi o i rettangoli che in taluni modelli si visualizzano dopo l'introduzione dei tag condizionali che pongono vincoli di visualizzazione per determinate tipologie di pagine.

I tag condizionali sono uno degli strumenti più potenti per modificare i template di Blogger. Permettono infatti di scegliere in quale tipologie di pagine visualizzare un determinato elemento che può essere un widget o anche solo un semplice banner. Vengono quindi imposti dei vincoli che possono essere positivi o negativi. Si può cioè per esempio imporre che un gadget venga visualizzato solo in Homepage oppure che venga visualizzato ovunque escluso proprio la homepage.

L'utilizzo dei tag condizionali è illustrato dettagliatamente nell'articolo linkato all'inizio. In sintesi ci sono due tipologie di intervento a seconda se si tratti di un widget oppure di un elemento del layout che potrebbe essere per esempio un annuncio pubblicitario. In ogni caso si deve entrare nel modello e inserire una riga all'inizio e uno riga alla fine dell'elemento oppure subito dopo e subito prima dei tag b:includable.

In taluni modelli il nascondere un widget può portare alla visualizzazione di inestetismi quali spazi bianchi o rettangoli del colore dello sfondo del blog. Come esempio vi mostro la Homepage di un mio blog di prova in cui ho usato in maniera massiccia i tag condizionali

Ci sono dei rettangoli residuali dei widget che hanno il vincolo di non essere mostrati in homepage. Come detto esistono dei vincoli positivi e dei vincoli negativi correlati tra di loro. Quella che muta è solo la prima riga visto che in ogni caso la seconda sarà </b:if>.

Facciamo l'esempio di un widget inserito solo in un determinato post e che quindi non lo sarà in tutte le altre pagine. In questo caso il primo tag condizionale utilizzato sarà

<b:if cond='data:blog.url == "URL_del_POST"'>              1) 

con cui abbiamo creato il vincolo modificando il modello in questo modo

inserendo i due tag rispettivamente subito dopo e subito prima di b:includable. Ciascun widget è noto come abbia un suo ID. Questo può essere scoperto andando su Layout > Modifica aprendo il widget e guardando l'ultima parte dell'URL, oppure direttamente dal modello. L'ID sarà l'espressione dopo id=" nel primo tag di b:widget come mostrato nello screenshot. Se siete abbastanza esperti potrete scoprire l'ID di un widget direttamente dalla pagina web usando Firebug, Firebug Lite oppure il tool Ispeziona elemento di Chrome.  I principianti possono comunque cercare nel modello con Ctrl+F il titolo del gadget e se questo non ci fosse, inserirne uno posticcio per poi toglierlo successivamente.

TAG CONDIZIONALE COMPLEMENTARE

L'espressione tag condizionale complementare l'ho inventata io sul momento e probabilmente è impropria dal punto di vista linguistico e dal punto di vista tecnico. Da ogni tag condizionale che inserisce una condizione positiva si può passare facilmente a un tag condizionale che ne inserisca una negativa del tutto opposta e complementare. I vincoli positivi hanno la caratteristica di avere due simboli di uguale. Per passare a quello negativo bisogna sostituire il primo uguale con il simbolo del punto esclamativo. Seguendo questa falsariga la riga 1) diventa così

<b:if cond='data:blog.url != "URL_del_POST"'>              2)

Mentre la 1) introduce la condizione che un determinato widget venga visualizzato solo in quel dato post, la condizione 2) introduce il vincolo che un certo codice debba essere acquisito dal browser ovunque escluso quel determinato post.

ELIMINARE GLI INESTETISMI DEI TAG CONDIZIONALI

Quello detto per l'esempio precedente vale per tutte le condizioni di quel genere come potrebbe essere il vincolo di mostrare un gadget nelle pagine statiche oppure nei post. Nelle pagine in cui non si visualizza il widget potrebbero vedersi degli inestetismi come mostrato nel primo screenshot di questa pagina. Dobbiamo quindi inserire un nuovo tag condizionale per nascondere completamente quel widget ma solo nelle pagine in cui non deve essere visto. Nell'esempio fatto dobbiamo usare il tag display:none per impedirne la visualizzazione. Nella fattispecie andiamo su Modello > Modifica HTML, clicchiamo nell'area del codice e mediante Ctrl+F cerchiamo la riga </head>. Subito sopra a questa incolliamo questo codice

<b:if cond='data:blog.url != "URL_del_POST"'> 
<style>
#HTMLX {display:none;}
</style>
</b:if>

dove ovviamente l'ID HTMLX è generico e deve essere sostituito da quello del vostro gadget. Chiaramente si deve salvare il template. L'esempio di un widget con il vincolo di essere mostrato solo in un post è solo indicativo. Se un gadget avesse un tag condizionale per essere mostrato solo nelle pagine statiche dovremo usare il tag condizionale complementare che porta a questo codice

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<style>
#HTMLX {display:none;}
</style>
</b:if>

dove il tag condizionale evidenziato di giallo è il complementare di quest'altro

<b:if cond='data:blog.pageType == &quot;static_page&quot;'>

Ecco come è diventata la homepage del blog di prova dopo queste modifiche

Nel caso ci fossero più di un widget nascosto dobbiamo seguire la stessa procedura e incollare i codici ottenuti uno dopo l'altro nella stessa posizione.