Come eliminare i rettangoli vuoti dal layout di Blogger quando si applicano i tag condizionali.

Come nascondere gli inestetismi di Blogger che si manifestano quando vengono applicati i tag condizionali.

Una delle funzionalità più potenti che Blogger mette a disposizione degli utenti è sicuramente quella dei tag condizionali. Tramite due righe di codice si possono mettere dei vincoli per visualizzare un widget o un elemento solo in una determinata tipologia di pagine oppure anche solo in una data pagina. In alcuni modelli in cui sono presenti delle ombreggiature o delle immagini di sfondo questi vincoli lasciano dei residui visibili anche nelle pagine in cui non lo dovrebbero essere.

Un  caso tipico di inestetismi che rimangono dopo aver utilizzato i tag condizionali è quello in cui ci siano degli sfondi diversi nell'area del post e nella sidebar in cui vengono posizionati i gadget. Ecco un esempio tipico di rettangoli residuali visibili in un blog di prova in cui ho fatto un grande uso di tag condizionali per mostrare una demo di widget solo in un determinato articolo.

 

Quella mostrata è la homepage e i widget con il vincolo di non essere visibili in homepage lasciano comunque visibile un rettangolo che è indubbiamente antiestetico. I tag condizionali vengono inseriti con due righe di codice, la seconda è sempre </b:if> mentre la prima è il tag condizionale vero e proprio. Vediamo alcuni degli esempi più utilizzati

<b:if cond='data:blog.url == "URL_del_POST"'>      1)per mostrare un elemento solo in una data pagina
<b:if cond='data:blog.pageType == "static_page"'>    2)per mostrarlo solo nelle pagine statiche
<b:if cond='data:blog.pageType == "item"'>                3) per mostrare un elemento solo nei post.

Il vincolo viene creato inserendo i due tag tra le due righe <b:includable id='main'> e </b:includable> all'interno del codice del widget in oggetto.

Se non si trova nel Modello il codice del widget ci si può aiutare scoprendone il suo ID.

TAG CONDIZIONALI COMPLEMENTARI

Quando si mette un vincolo di visibilità a un elemento di Blogger è come se si dividesse un insieme in due parti. Se consideriamo l'insieme totale come tutte le pagine del blog allora il sottoinsieme in cui un elemento o in widget è visibile ha anche un sottoinsieme complementare. Detto in altri termini se un gadget ha il vincolo di essere mostrato solo nei post e nelle pagine statiche, tutte le altre pagine quali quelle delle etichette, la homepage, quelle di archivio sono il suo sottoinsieme complementare. I residui antiestetici si vedono appunto nelle pagine facenti parte del sottoinsieme complementare. Dobbiamo quindi creare un secondo codice per risolvere il problema.

I tag condizionali sono di due categorie, quelli che hanno un doppio uguale (==) e quelli che hanno un punto esclamativo e un uguale (!=). I tag condizionali complementari dei tre esempi sono:

<b:if cond='data:blog.url != "URL_del_POST"'>      1.bis)
<b:if cond='data:blog.pageType != "static_page"'>   2.bis)<b:if cond='data:blog.pageType != "item"'>                 3.bis)

Mentre la 1) introduce la condizione che un determinato widget venga visualizzato solo in quel dato post, la condizione 1.bis) introduce il vincolo che un certo codice debba essere acquisito dal browser ovunque escluso quel determinato post. Si può fare un discorso analogo per le condizioni 2) e 2.bis) e per quelle 3) e 3.bis). In sostanza per trovare il tag condizionale complementare basta sostituire == con != o viceversa. Il doppio uguale significa identità mentre != non identità.

COME ELIMINARE I RETTANGOLI VUOTI DEI WIDGET

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. Negli esempi fatti dobbiamo usare il tag display:none per impedirne la visualizzazione. Nella fattispecie andiamo su Modello > Modifica HTML, cliccare nell'area del codice e, mediante Ctrl+F, cercare la riga </head>. Subito sopra a questa incolliamo questi codici aggiuntivi

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

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

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

scegliendo quello appropriato tra i tre esempi presi in considerazione. Naturalmente si possono ricavare anche altri tag condizionali complementari e utilizzarli al posto di quelli presi come esempio. Dopo aver salvato il modello verranno nascosti tutti i rettangoli residuali

HTMLX è l'ID del widget a cui è stato applicato il vincolo e la X rappresenta un numero naturale identificativo. Queste tipologie di ID sono relative ai widget HTML/Javascript ma il problema potrebbe porsi anche per altri widget come quello dei Post più Popolari con ID #PopularPosts1 o delle Etichette che ha come ID #Label1.