Pubblicato il 14/08/17 - aggiornato il  | 67 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.


67 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
  3. Tu non hai il tema Emporio, hai un template normale. Devi seguire questo post
    http://www.ideepercomputeredinternet.com/2016/09/messaggio-etichette-blogger.html
    @#

    RispondiElimina
  4. Ciao Ernesto io vorrei che le etichette non fossero visualizzate nella HOME sotto gli articoli (ho un modello simple un po' modificato). Ora vado in Layout post dei blog, deselezione etichette, ma restano nella Home. Cambio la dicitura etichette (per provare) e funziona, anche se resta deselezionata (quindi dovrebbero essere nascoste)...ci sono delle cose che posso fare? grazie mille

    RispondiElimina
    Risposte
    1. Incolla questo codice

      <b:if cond='data:blog.url == data:blog.homepageUrl'>
      <style>
      span.post-labels {display:none;}
      </style>
      </b:if>

      subito sopra alla riga </head> poi salva il Tema
      @#

      Elimina
  5. Ciao Ernesto sto preparando un blog con il modello Emporio, vorrei togliere l'immagine sfumata che si vede nei post dietro il titolo (quando nel post è presente un'immagine) e far salire la barra laterale, ti chiedo se è possibile e nel caso come fare, grazie.

    RispondiElimina
    Risposte
    1. I Temi Responsive sono difficili da personalizzare perché hanno codici tutti diversi. Me ne sono occupato raramente e onestamente non so se sia neppure fattibile quello che mi hai chiesto
      @#

      Elimina
    2. Ti ringrazio per l'interessamento, ciao.

      Elimina
  6. Ciao Ernesto,
    seguo sempre il tuo blog e mi ha aiutato in parecchie occasioni. Grazie per il tuo lavoro. Anche questo post è piuttosto interessante e utile.
    Volevo condividere un paio di cose:
    1) Senza modificare l'xml in maniera diretta, è possibile implementare in maniera più pulita e facilmente manutenibile il tuo codice direttamente nella sezione css del tema.
    2) Secondo te è possibile cambiare il testo anziché font o colori? "Visualizzazione dei post con etichetta" vorrei sostituirlo con "Articoli disponibili".
    Grazie!

    RispondiElimina
    Risposte
    1. La risposta alla prima domanda è sì mentre quella alla seconda è no a meno di non cancellare completamente i tag di Blogger e sostituirli con un codice. Sarebbe però procedura rischiosa e non è detto che andrebbe a buon fine
      @#

      Elimina
    2. Grazie Ernesto, in effetti usando un css con After: e "content" non ci sono riuscito.
      Peccato!
      Ciao,
      Daniele

      Elimina
  7. Salve Prof. IO vorrei semplicemente sapere come sia possibile rimuovere regole di implemento css precedentemente introdotte nella sezione "avanzate" del menu "personalizza"

    RispondiElimina
  8. Solo una domanda definitiva che taglia la testa al toro: è possibile in qualche modo integrare su Blogger il proprio messenger personale di facebook?

    RispondiElimina
    Risposte
    1. Era possibile qualche anno fa adesso non so più se lo è ancora. Qui le istruzioni
      https://www.ideepercomputeredinternet.com/2015/08/facebook-modulo-commenti-blogger-moderazione.html
      e qui si può provare la Demo
      http://prove-parsifal.blogspot.com/2015/08/demo-del-modulo-dei-commenti-di.html
      @#

      Elimina
  9. Buongiorno, nel mio Blog è rimasta traccia di uno sfondo precedente che compare per pochissimi millisecondi prima del caricamento totale. Come posso fare a rimuovere questa anomalia? Grazie!

    RispondiElimina
  10. Buongiorno, io utilizzo anche la tecnica di "incastrare" nel titolo di un Post delle porzioni di codice. Di solito si tratta di un href accompagnato da una img. Però, come posso a questo punto fare per dare una aggiustata al link di riferimento titolo pagina ed al permalink?

    RispondiElimina
    Risposte
    1. Mi sono occupato del tema in questo post
      https://www.ideepercomputeredinternet.com/2015/10/immagine-prima-dopo-titolo-blogger.html
      è divertente esteticamente però dal punto di vista SEO è sicuramente perdente. Non si può fare nulla per migliorare
      @#

      Elimina
  11. Buongiorno, esiste in qualche modo la possibilità che se un utente qualsiasi apre un sito o un blog con Chrome, come abitualmente succede, con sua estrema sorpresa vada a trovarlo aperto in automatico con un Browser di mia scelta? Alludo ad esempio a Vivaldi

    RispondiElimina
  12. Cerco di reiterare una domanda alla quale non ho ancora avuto risposta che spero cortesemente di avere. Su alcuni browser, ma non su tutti, e nelle visualizzazioni prodotte dai test relativi alle velocità di caricamento, per alcuni millisecondi nel mio blog compare lo sfondo predefinito di blogger. Quel marroncino tipico dell'icona classica di Blogger tanto per intenderci. Insomma l'effetto non è che vada a ostacolare più di tanto i tempi di caricamento della pagina complessiva, anche perché ad un secondo caricamento di solito questo fastidioso effetto non si ripete. Ad ogni modo ritengo che sia davvero fastidioso questo "effetto Speciale" per gli utenti finali del mio Blog. Grazie

    RispondiElimina
    Risposte
    1. Non sono obbligato a rispondere a tutte le domande e a pubblicare tutti i commenti. Ti prego inoltre di fare domande solo inerenti a argomenti che ho trattato. Non sono onnisciente 😊
      @#

      Elimina
  13. Buongiorno, io per motivi molto attentamente ragionati e testati, adotto per la versione mobile l'impostazione "predefinita". Ho anche dedotto che per ridurre ulteriormente nella versione mobile il Cumulative Layout Schift, dovrei riuscire, proprio in questa versione, ad allargare leggermente il layout di pagina complessivo. E' possibile magari iniettando un Css?

    RispondiElimina
    Risposte
    1. Si possono modificare le larghezze del blog su desktop
      https://www.ideepercomputeredinternet.com/2016/07/blogger-layout-larghezza-sidebar.html
      per quanto riguarda la versione mobile non me ne sono mai occupato. Cmq con la scelta Predefinita credo che non si possano aggiungere modifiche al template. Per farlo bisogna scegliere quella Personalizzata
      @#

      Elimina
  14. Una domanda sola ed univoca" Come e con quali criteri nel Tema, andare A CACCIA di tutto lo Javascript inutilizzato?"

    RispondiElimina
    Risposte
    1. Non me ne sono mai occupato. Guarda se ti può aiutare questa conversazione
      https://support.google.com/blogger/thread/107225521/how-to-remove-unused-javascript-and-eliminate-render-blocking-resources?hl=en
      @#

      Elimina
  15. Ciao, scusa c'e' modo di modificare il testo nella barra di visualizzazione dei post,non il colore o il carattere ma proprio la dicitura?

    RispondiElimina
    Risposte
    1. Come dicitura intendi il testo? Lo puoi cambiare solo rieditando il post
      @#

      Elimina
    2. intendevo se era possibile personalizzare la dicitura: "visualizzazione dei post con etichetta "XX"" con una breve descrizione in base a una o due etichette. Ciao e grazie.

      Elimina
  16. Buongiorno sig. Ernesto, abbiamo un metodo per bypassare il problema dei Tag deprecati durante la scrittura html delle nostre pagine o post? Grazie!

    RispondiElimina
    Risposte
    1. Bisognerebbe aprire tutti i post in cui ci sono e modificarli. Poi il fatto che siano deprecati non significa che non funzionano più. Per esempio il tag marquee è deprecato ma io lo uso ancora per creare del testo scorrevole anche nei video editor e continua a funzionare benissimo. Quello che conta è che siano supportati dai browser.
      @#

      Elimina
  17. Buonasera sig. Ernesto. Con Blogger, è possibile in qualche modo abilitare la compressione della pagina web? Grazie!

    RispondiElimina
  18. Buongiorno sig Ernesto, io ho realizzato la Home in forma di pagina statica permanente e in funzione della accessibilità l''ho ridotta con la classica interruzione "continua a leggere". In che modo potrebbe essere possibile ingrandire la scritta "continua a leggere? Grazie!

    RispondiElimina
    Risposte
    1. Qui ci sono le istruzioni per tutte le personalizzazioni
      https://www.ideepercomputeredinternet.com/2019/08/read-more-blogger-customize.html
      Per le dimensioni fai riferimento alla fine del post
      @#

      Elimina
  19. Buongiorno sig Ernesto, dopo una lunga serie di manipolazioni ora il mio Blog risulta Eccellente ai test di almeno 4 diversi tools. Però dopo le manipolazioni suddette piace sempre di meno a Pingdom, che principalmente accusa: "evita i reindirizzamenti delle url" e " aggiungi intestazioni con scadenza" Cortesemente ci potrebbe dare maggiori indicazioni su come risolvere questi due errori? Grazie!

    RispondiElimina
    Risposte
    1. Ti consiglio di non perdere troppo tempo con queste questioni. Blogger è di Google e ci pensa lui a ottimizzare quello che è ottimizzabile. Il tempo risparmiato usalo per pubblicare contenuti di qualità ed è quello che fa la differenza
      @#

      Elimina
  20. Solo una ultima domanda di carattere tecnico: può essere vero che in Blogger le Pagine, seppur non visibili in Home, assumono maggior indicizzazione dei Post? Grazie!

    RispondiElimina
  21. Buongiorno: una domanda che dovrebbe tagliare la testa al toro. Ammettiamo che io stia caricando una foto in un post. Ovviamente all'interno del tag img, la sezione src viene completata da una url dominio di google/blogspot, URL MOLTO LUNGA. Tutti i tutorial avvertono di mettere il Server in condizione di leggere URL BREVI. Per cui io prendo la URL MOLTO LUNGA e la accorcio co un servizio come BITLY. Però, andando a fare una analisi scanner del mio Blog, mi accorgo che in relazione alle risorse ed alle richieste che vado ad inviare al Server, BITLY e i corrispondenti reindirizzamenti, mi bruciano il 27% di risorse nella velocità di caricamento. Allora mi chiedo: vale davvero la pena fare questo tipo di operazione? Grazie!

    RispondiElimina
    Risposte
    1. Sbagliato. Ci saranno due reindirizzamenti che appesantiranno molto di più di un URL lungo che poi secondo me è irrilevante
      @#

      Elimina
  22. Infatti, come dicevo, credo di essermi ripreso appena in tempo, dopo essermi accorto che questi reindirizzamenti divorano un 27% di risorse. Però il danno fatto non è più recuperabile, in quanto sarebbe richiesto ricaricare soprattutto tutte le immagini. Ma siccome per il momento ho dei punteggi ottimi lo stesso a tutti i livelli (tranne una carenza del First Input Delay, ma solo secondo alcuni scanner...), cercherò semplicemente di non incorrere nello stesso errore per il futuro. Grazie

    RispondiElimina
  23. Huston abbiamo un problema. Praticamente ho scoperto che ci sono tante cose che non so, tipo come adeguare il sito alle reali regole della SEO, non solo con criteri di velocità, ma anche con criteri di on site e off site. Il mio blog non ha un index google. Nonostante correttamente registrato sulla Search di google, il rapporto degli ultimi tre mesi non testimonia alcun movimento o alcuna fluttuazione. Ovviamente posso aprire il blog con chrome, ma senza un equivalente index. Su Bing il la mia url nemmeno esiste,e altri utenti esterni rispetto al mio ID, non riescono nemmeno ad effettuare il page speed insight con questo Blog. Cosa dobbiamo fare? Grazie!

    RispondiElimina
    Risposte
    1. Per le regole SEO leggi questo post
      https://www.ideepercomputeredinternet.com/2019/05/blogger-seo.html
      Bing neppure lo considero. Mi hanno tolto dall'indice non so perché e non ho neppure fatto ricorso.
      @#

      Elimina
  24. Buongiorno, se importo il mio Blog Blospot in Altervista, è consigliabile chiudere il Blogspot? Si corre il rischio dei contenuti duplicati se non lo faccio? Grazie!

    RispondiElimina
    Risposte
    1. Avere due blog uguali non è consigliabile ma perché farlo?
      @#

      Elimina
  25. per ritornare ad essere indicizzato dopo che per qualche motivo sono stato bannato

    RispondiElimina
  26. Buonasera, dunque, ho acquistato un dominio personalizzato. Secondo la mail di riscontro che mi è arrivata ho una nuova url che cercando di aprirla mi da subito errore 404, e non so assolutamente da dove gestire un qualsiasi Cpanel. Grazie!

    RispondiElimina
    Risposte
    1. Dipende da quale Registrar hai acquistato il dominio. Hanno tutti una grafica diversa. Qui ci sono le istruzioni per un dominio acquistato su Tophost anche con un video tutorial
      https://www.ideepercomputeredinternet.com/2020/06/blogger-dominio-personalizzato-tophost.html
      Il procedimento è sempre lo stesso ma la grafica può essere anche molto diversa. Si può acquistare anche direttamente da Google e allora le cose diventano molto più semplici
      https://www.ideepercomputeredinternet.com/2018/03/blogger-google-domains.html
      Con tutte le domande che hai posto non ne hai pubblicata una per chiedere consiglio su dove acquistare il dominio 😯
      @#

      Elimina
  27. Io ho semplicemente acquistato il dominio su Blogger, e adesso non so più cosa devo fare

    RispondiElimina
    Risposte
    1. Allora segui il secondo post linkato nel precedente commento
      @#

      Elimina
  28. Ebbene, io ho acquistato il Dominio direttamente da Blogger, ma in questo preciso istante non so davvero cosa farne e come gestirlo. Però ho letto nel suo post che la configurazione può essere effettuata in un secondo momento, e sono appunto questi i passi che devo apprendere. Grazie!

    RispondiElimina
  29. Dunque, sono arrivato alla risoluzione del problema, almeno credo, e mi è anche servito per capire con non sono molto intelligente: Quindi ho acquistato su Google Domains. Teoricamente, in base alle mie poche conoscenze, adesso il mio Blogspot dovrebbe subire un rendirizzamento www.com e il dominio dovrebbe essere visibile dopo un po' di giorni?

    RispondiElimina
    Risposte
    1. Il reindirizzamento sarà a www. ..... .com dove al posto dei punti devi mettere il nome del dominio acquistato. Devi seguire le istruzioni di questo post
      https://www.ideepercomputeredinternet.com/2018/03/blogger-google-domains.html
      È tutto molto semplice.
      @#

      Elimina
  30. Una cosa che non capisco, è perché, avendo "inoltrato" il dominio acquistato in goolge domains verso il mio blogspot, il dominio a pagamento non lo trovo indicizzato! Grazie!

    RispondiElimina
  31. Buongiorno sig Ernesto, avrei una domanda atipica: esistono tante possibilità per la condivisione di files, tipo Smash. Io ho mandato al mio avvocato con questo sistema della documentazione riservata, e stranamente è stata scaricata dopo le una di notte. Ma non è per caso che questi link per la condivisione files sono indicizzati su google e chiunque li può "agganciare"? Grazie!

    RispondiElimina
    Risposte
    1. Non conosco Smash ma lo escludo. Per la indicizzazione ci vuole il consenso del proprietario di un sito. I link di condivisione non rientrano in questa tipologia.
      @#

      Elimina
  32. Buongiorno sig. Ernesto, avrei una esigenza un po' particolare che non so nemmeno se sia realizzabile. Ho costruito una pagina di Blogger alla quale vorrei mettere una restrizione, ossia che può essere aperta solo tramite una qualche forma di pagamento. Come possiamo fare? Grazie!

    RispondiElimina
    Risposte
    1. Collegarla a un pagamento credo sia piuttosto difficile. Qualche anno fa ho pubblicato un post su come far aprire una pagina di Blogger solo con password
      https://www.ideepercomputeredinternet.com/2015/11/blogger-password-privacy.html
      La password potrebbe essere condivisa a fronte di un pagamento ma poi nulla vieta a chi la conosce di condividerla con altri
      @#

      Elimina
  33. ciao scusa si puo' togliere il grassetto dal testo?
    ciao e grazie

    RispondiElimina
    Risposte
    1. Prova a aggiungere questa riga di codice

      font-weight: normal !important;

      tra le parentesi graffe del CSS. Magari inseriscila in tutti e due i campi dell'ultimo codice.
      @#

      Elimina
    2. Ah ecco cosa sbagliavo. Provo in questo modo.grazie mille

      Elimina
  34. ci sarà in modo per cambiare proprio il messaggio testuale: "Visualizzazione dei post con l'etichetta" con uno personalizzato?

    RispondiElimina
    Risposte
    1. Non posso escludere che esista io però ho trovato solo il modo di modificare il colore della scritta ma non il testo.
      @#

      Elimina

Non inserire link cliccabili altrimenti il commento verrà eliminato. Metti la spunta a Inviami notifiche per essere avvertito via email di nuovi commenti.
Info sulla Privacy