Pubblicato il 14/08/17 - aggiornato il  | 3 commenti :

Come modificare o nascondere la scritta Visualizzazione dei post con etichetta ... nei Nuovi Temi di Blogger.

Come nascondere la barra delle pagine delle etichette con la scritta Visualizzazione dei post con etichetta ... o come modificarla nei colori e nei caratteri.
Nel post precedente abbiamo visto come funziona  lo strumento Ispeziona Elemento di Chrome che ci permette di trovare il selettore univoco di un elemento di una pagina web.

I selettori classici del CSS si dividono in due tipi .NomeClasse e #NomeID e sono delle regole con cui selezionare  rispettivamente lo stile di una serie di elementi con caratteristiche comuni o un singolo elemento presente nella pagina web. Ci sono anche altri selettori introdotti non le ultime versioni del linguaggio CSS come per esempio .NomeClasse:before, .NomeClasse:after, #NomeID:before, #NomeID:after per inserire un contenuto rispettivamente prima o dopo dell'elemento selezionato.

Quando si sia individuato il selettore giusto possiamo creare una nuova regola con questa sintassi

.NomeClasse { .... }  o   #NomeID { .... } 

dove tra le due parentesi graffe si aggiungono le righe per regole di dimensioni dei caratteri, sfondi, colori, bordi, famiglie di font o anche per nascondere l'elemento con quel tale ID o con quella tale classe.






Vediamo come usare questa procedura per nascondere o per modificare la scritta che si visualizza nei Nuovi Temi Responsive di Blogger quando si apre una pagina di etichette.

Avevo già presentato questa personalizzazione per i Modelli di Blogger precedenti. Sono però cambiati i Nomi delle Cassi nei Nuovi Temi Responsive di Blogger e il codice presentato non è funzionante. Lo è invece nei precedenti template che non siano appunto Contempo, Soho, Emporio e Rilevanti.






NASCONDERE LA SCRITTA VISUALIZZAZIONE DEI POST...


Con il Tool Ispeziona di Chrome il cui tutorial è stato linkato all'inizio si riesce facilmente a trovare il Nome della Classe della Barra orizzontale in cui viene mostrata questa scritta

emporio-contempo

Sia nel Tema Contempo sia in quello Emporio il nome della classe è

.post-filter-message

Non ho testato gli altri Temi ma ritengo verosimilmente che il nome della classe sia la stessa per tutti i nuovi modelli. Se si decidesse di nascondere tale barra, che comunque è esteticamente migliore di quella dei precedenti Temi, si devono usare i tag display:none; e visibility:hidden;. 





Si va su Tema -> Modifica HTML e si cerca la riga ]]></b:skin> quindi, subito sopra, si incolla questo codice

.post-filter-message {display:none; visibility:hidden;}

e infine si salva il Tema. La Barra in oggetto verrà nascosta per tutte le etichette.

COME MODIFICARE LA BARRA VISUALIZZAZIONE DEI POST ...


Se la barra con la scritta ci piace ma volessimo modificarla nei colori si può incollare per esempio questo codice

div.post-filter-message {background-color:#defcd6 !important; color:#f00 !important;}
div.post-filter-message a {color:#00f !important;}

sempre subito sopra a ]]></b:skin> per poi salvare il Tema. Il risultato sarà il seguente

modifica-barra-etichette

Naturalmente possono essere modificati i codici dei colori dello sfondo, del testo e del link Visualizza tutti. Si possono anche aggiungere altre righe per modificare la famiglia dei font, per aggiungere il grassetto, per togliere il corsivo, ecc.




3 commenti :

  1. Ciao Ernesto,
    grazie per l'articolo!
    Il codice funziona solo su browser PC, ma su smartphone la frase
    "Visualizzazione dei post con etichetta ..."
    rimane presente.
    Come è possibile risolvere?
    Grazie

    RispondiElimina
  2. Non ci dovrebbe essere differenze tra mobile e desktop nei nuovi modelli. Forse dipende dal browser che hai usato. Non ti so aiutare di più, mi spiace
    @#

    RispondiElimina
    Risposte
    1. Grazie Mille aver risposto!
      Utilizzo sia su PC che smartphone google chrome.
      Il BLOG è http://eyelpis.blogspot.it/

      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.