Pubblicato il 06/12/11e aggiornato il

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.





14 commenti :

  1. E se dovessi nascondere un qualsiasi widget in html dove lo metto il codice "{ display: none !important; }"?
    Per esempio per il widget di linkwithin. Grazie.

    RispondiElimina
  2. eppure dovrò trovare un modo di vincolare il singolo post al display:none senza caricarmi ogni volta il modello!!! mannaggia mannaggiolina

    a te non viene niente in mente? magari un vincolo qualunque di configurazione post a cui attaccarmi. ad esempio se nego la possibilità di commentare automaticamente mi esclude un widget grazie al tag che ho inserito nel modello... così almeno ne inserirei uno soltanto almeno! ma ho bisogno dei commenti e non posso utilizzarlo per quest altro scopo :(

    RispondiElimina
  3. @Auto ...
    Non mi viene in mente nulla. Poi francamente non vedo la necessità di creare tutti questi tag condizionali, forse tu hai esigenze particolari ...

    @Momo
    La cosa è semplicissima ma non immediata come credevo. Forse è meglio che ci faccia un "instant post"

    RispondiElimina
  4. Comunque grazie per aver escluso il mio nick dai top commentatori, dimostri di essere una persona prevenuta nonchè superficiale. Se hai visto Benigni ieri sera su rai uno ha eseguito l'inno del corpo sciolto in prima serata, luttazzi diceva che la merda è la pietra filosofale della satira e fò la osannava. La tua piccola azione da censore denota la piccola persona che sei, nonché ignorante in quanto non ti sei mai degnato neanche di appurare il messagio del mio sito al quale fece riferimento anche Cohen sul Corriere della Sera tempo fà. E' la gente come te che sporca la civiltà non la merda, perchè fino a prova contraria quest'ultima, superiore ad ogni forma di intolerranza e unica forma di uguaglianza terrena che accomuna le razze, con tutta la buona volontà, non riuscirai mai ad eguagliare uno stronzo come te.

    Cordiali Saluti e buon proseguimento.
    Paolo DeGarmo

    RispondiElimina
  5. @Auto ...
    Deduco che ti sei arrabbiato di brutto ;) Guarda che il tuo nick è presente nel widget dei commentatori da un sacco di tempo e non lo avevo mai tolto. L'ho fatto adesso perché era diventato troppo grande rispetto agli altri. Avevi superato i 60 commenti. L'ho fatto anche con altri prima di te

    http://www.ideepercomputeredinternet.com/2010/12/il-widget-dei-top-commentatori-in.html#c241226697864232954

    che ho poi rimesso quando il numero dei commenti contabilizzati è diminuito. Mi dispiace che tu l'abbia presa male. In ogni caso non capisco francamente le offese gratuite che mi hai rivolto. Sono sempre stato estremamente disponibile con te come con tutti e sono cose che non merito. Non mi sento neppure toccato perché la tua reazione isterica è dovuta a una cosa che non esiste.

    RispondiElimina
  6. Ma scherziamo? E questa è la tua gratitudine verso Ernesto che ha sempre aiutato? Dovresti rivedere Benigni mentre ti rileggi... forse capirai meglio te stesso... prima d'insultare gli altri. Resto sbigottita. Ma poi mi chiedo se nella vita reale... faccia a faccia... si abbia il coraggio di offendere così gratuitamente! Bah.

    RispondiElimina
  7. @ Soffio di Dea
    La questione non credo la riguardi.
    Il proprietario di questo blog trae i suoi vantaggi in altro modo mentre per quanto riguardi la disponibilità e la gratitudine è stata da entrambi sempre ben misurata, per cui al momento lei può farsi da parte. Le faccio notare poi come sia lei a subentrare in un insulto nei miei confronti, anche se personalmente per me sarebbe stato un'onore rivedermi nell'inno di Benigni.

    Premettendo che a me il vedere il mio nick in questo o in quell'altro posto non mi frega assolutamente nulla, faccio notare all'autore di questo blog che ho visto il codice sorgente HTML e nelle esclusioni appariva solo il mio nick e per ovvie ragioni il suo. Quindi poteva risparmiarsi anche l'arrampicata sgli specchi (rotti)
    Saluti.

    RispondiElimina
  8. @Soffio di Dea
    Lascia perdere, sono cose che lasciano il tempo che trovano. Tu sai benissimo che cancellai il tuo nick dal widget dei Top Commentatori perché avevi commentato molto e era diventato troppo grande. L'ho fatto anche con altri di cui al commento già linkato

    http://www.ideepercomputeredinternet.com/2010/12/il-widget-dei-top-commentatori-in.html#c241226697864232954

    Ogni tre o quattro mesi modifico il filtro dei Top commentatori rimettendo quelli che per loro ragioni non commentano più e togliendo quelli che hanno superato i 60 commenti.

    @Auto ...
    Mi spiace ma hai preso una cantonata e le tue offese sono assolutamente gratuite. Sono cose però che offendono te e non me. Tre giorni fa ho rimesso Soffio di Dea, Tutti gli scandali del vaticano e altri nick che avevo filtrato e ho eliminato il tuo perché era diventato troppo grande. Punto. Non me ne frega nulla del tuo nick che tra l'altro era presente da mesi se non da anni.Se lo avessi voluto togliere per ragioni di opportunità lo avrei fatto da un pezzo.

    RispondiElimina
  9. AUTO... vergognati e basta!
    Bisogna imparare ad avere rispetto cavolo! Ma non ti vergogni?

    RispondiElimina
  10. Hai tolto pure me :-) ...ma forse perchè è un po' che non commento ...

    Vorrei però commentare la reazione di AUTOdiMERDA che non conosco e penso possa essere del tutto imparziale ...

    Il fatto di chiedere il motivo per il quale il tuo nome non è nei top commentatori non ti autorizza a giudicare una persona che (credo) non conosci arrivando ad insultarla...

    Potevi benissimo (e con ragione) chiedergli spiegazioni in privato, ma anche in pubblico educatamente ed eventualmente riservandoti poi di replicare ...

    Le citazioni che fai sono del tutto sporcate dai tuoi insulti gratuiti, scomposti e fuori luogo ...

    Non conosco Ernesto, ma vedere certi atteggiamenti mi rende tremendamente nervoso ...

    In poche righe riesce a dargli del prevenuto, superficiale, censore, piccola persona, ignorante e pure stronzo :-)citando personaggi come Roberto Benigni che hanno costruito la loro immagine proprio contro la volgarità e la maleducazione, di contro il suo Lei "distaccato" e la sua padronanza della lingua italiana che nasconde una volgarità senza confini ...

    Anche se non ci conosciamo, seguo sempre il tuo blog Ernesto e ti sono vicino moralmente perchè so che certe cose in un certo modo fanno "soffrire" ...

    Scusami per il lungo commento, ma ci voleva :-)

    RispondiElimina
    Risposte
    1. Questo commento è stato eliminato dall'autore.

      Elimina
  11. Sto usando il display:none per nascondere un elemento (un gioco flash) solo dai dispositivi mobili. Il risultato è che il gioco da mobile non si vede, però si sente l'audio della canzone e per di più Pagespeed se ne accorge e mi segnala il problema che la pagina risulta troppo pesante. Non esiste qualcosa che me lo escluda meglio? Non so' che pesci pigliare adesso :D

    RispondiElimina
    Risposte
    1. Non so se esiste nulla del genere. Dovresti trovare il codice che riproduce l'audio e metterlo tra tag condizionali però è più facile a dirsi che a farsi. Ovviamente tu hai solo il codice dell'oggetto nel suo complesso e non nelle sue parti costitutive
      @#

      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.