Come nascondere un elemento del blog con display:none o visibility:hidden.

Capita spesso di dover intervenire per non mostrare una parte del modello o di un widget. Faccio l'esempio della Barra di Navigazione di Blogger, anche chiamata Navbar, e quello del menù multilivello. Nel primo caso si tratta di nascondere la Navbar mentre nel secondo è possibile non visualizzare le freccette orizzontali e verticali (vedi aggiornamento n°1 in fondo al post). 

In entrambi i casi si procede introducendo nel CSS dell'elemento la riga display:none; che è un tag potentissimo e che consente di nascondere completamente l'elemento a cui si riferisce. Non resta che trovare la classe relativa per inserire appunto questo comando. Per la navbar si cerca la riga che determina la fine dei fogli di stile, cioè ]]></b:skin> e si incolla subito sopra questa riga

#navbar-iframe { display: none !important; } 

Il tag aggiuntivo !important; serve per dare priorità a questa dichiarazione rispetto a tutte le altre che riguardano lo stesso elemento. Nel caso del menù invece la riga viene incollata nei CSS che si riferiscono alle frecce. Nella fattispecie .downarrowclass e .rightarrowclas. Le classi sono individuate dai due selettori punto e cancelletto che precedono il nome dell'elemento. Nel primo caso si tratta di una classe generica mentre nel secondo è specifica.

Si può utilizzare questo sistema anche per inserire un link in un articolo che sarà considerato dai motori di ricerca ma non sarà visto dai lettori. Onestamente non so quanto questa pratica possa essere considerata legittima e personalmente non l'ho mai utilizzata. Nei widget preferisco inserire dei credit visibili piuttosto che invisibili, mi sembra più corretto. Se però qualcuno ha dei problemi con altri siti che copiano i post può inserire in modalità HTML una riga come questa

<div style="display:none;"><a href="URL DEL LINK">TESTO DI ANCORAGGIO</a></div>

Chi copierà il feed dell'articolo, si troverà nel suo post anche il collegamento alla pagina web che è stato inserito in URL DEL LINK senza che lo possa vedere a meno di non andare a visualizzare il sorgente pagina. Questo può essere fatto non solo con un link ma con qualsiasi altro elemento, basta inserire all'inizio e alla fine del codice i due tag colorati di viola.

Oltre a display:none; esiste un altro tag che nasconde la visibilità di un elemento. Si tratta di visibility: hidden; e si usa nello stesso modo del precedente comando. C'è però tra i due una differenza sostanziale. Con display:none; l'elemento sarà come se non esistesse e quindi non occuperà alcuno spazio nel post mentre con visibility: hidden; l'elemento non sarà visualizzato ma occuperò lo spazio come se fosse visibile e quindi il navigatore visualizzerà una zona vuota.