Pubblicato il 20/09/16 - aggiornato il  | 11 commenti :

Nascondere o cambiare il messaggio "Visualizzazione post" quando si apre una pagina di etichetta in Blogger.

Come modificare i colori di testo e sfondo (anche in modo diverso per desktop e mobile) o come nascondere il messaggio Visualizzazione post con etichetta ... quando si apre una pagina delle etichette di Blogger.
Nei blog su piattaforma Blogger quando si apre una pagina di etichetta si visualizza un messaggio in uno sfondo grigio con scritto "Visualizzazione post con etichetta nome-etichetta" dove nome-etichetta è in grassetto ed è il nome della etichetta su cui si è cliccato.

Questa grafica non è certamente il massimo e il colore grigio dello sfondo spesso non si addice agli altri colori scelti per il blog. Va ricordato che gli stessi CSS che sovrintendono all'aspetto del rettangolo grigio con il testo sono gli stessi del messaggio di errore 404 pagina non trovata.

Se si vuole modificare l'aspetto di questo messaggio o addirittura nasconderlo bisogna quindi fare attenzione a utilizzare i tag condizionali per applicare le regole CSS sono alle pagine di etichetta.

COME MODIFICARE IL COLORE DI SFONDO E DI TESTO


Se il vostro obiettivo è quello minimo di modificare solo il colore di testo e di sfondo del messaggio allora procedete in questo modo. Dopo aver salvato il template andate su Modello ->Modifica HTML e cercate la riga </head>. Subito sopra a questa incollate questo codice

<b:if cond='data:blog.pageType != "error_page"'>
<style>
div.status-msg-body {background-color:#defcd6 !important; color:#f00 !important;}
div.status-msg-body a {color:#f00 !important;}
</style>
</b:if>

dove ovviamente possono essere personalizzati i codici dei colori dello sfondo e del testo. Dopo aver salvato il modello il risultato sarà il seguente

aspetto-messaggio-etichette-blogger

Possiamo anche scegliere due colori diversi per la scritta Visualizzazione post con etichetta ... e il link Mostra tutti i post. Il colore del link è quello della seconda occorrenza di #f00 scelto come test.






SCEGLIERE COLORI DIVERSI PER DESKTOP E MOBILE


Questa personalizzazione sarà applicata anche alla versione mobile di Blogger 

messaggio-versione-mobile

Se abbiamo i colori della versione mobile del blog significativamente diversi da quelli della versione desktop allora potremmo personalizzarle in modo diverso. Usando per esempio questo codice

<b:if cond='data:blog.pageType != "error_page"'>
<b:if cond='!data:blog.isMobile'><style>
/* Aspetto Desktop */
div.status-msg-body {background-color:#defcd6 !important; color:#f00 !important;}
div.status-msg-body a {color:#f00 !important;}
</style>
<b:else/>
<style>
/* Aspetto Mobile */div.status-msg-body {background-color:#eae2fd !important; color:#00f !important;}
div.status-msg-body a {color:#00f !important;}
</style>
</b:if></b:if>

che può servire come esempio di personalizzazione con colori diversi per desktop e mobile
.

COME NASCONDERE DEL TUTTO IL MESSAGGIO


Se invece questo messaggio non vi piace per niente allora per nasconderlo in Modello -> Modifica HTML, sempre sopra alla riga </head> , si incolla questo codice

<b:if cond='data:blog.pageType != "error_page"'>
<style>
.status-msg-wrap {visibility:hidden;display:none;}
</style>
</b:if>

Aggiungendo un'altra coppia di tag condizionali si può fare in modo che tale messaggio venga nascosto solo nella versione mobile o solo nella versione desktop. Inserendo all'inizio e alla fine del codice precedente le righe evidenziate di giallo il messaggio non si visualizzerà nella versione desktop mentre sarà visibile in quella mobile. Per non visualizzarlo nella versione mobile ma solo in quella desktop bisogna modificare la prima riga così <b:if cond='data:blog.isMobile'> .


11 commenti :

  1. Risposte
    1. È una personalizzazione che ho applicato anche a questo blog e che funziona benissimo nella versione desktop, meno in quella mobile. Infatti in quella mobile l'ho tolta
      @#

      Elimina
    2. Forse non funziona con i nuovi modelli. Possibile?

      Elimina
    3. Vuoi dire con quelli Responsive? Se hai uno di quelli allora è tutto spiegato
      @#

      Elimina
    4. Nel caso del Tema Contempo la classe dell'elemento è
      div.post-filter-message

      @#

      Elimina
  2. Io l'ho nascosto eliminando il codice all'interno di "b:includable id='status-message" e "/b:includable"

    RispondiElimina
  3. buongiorno,
    ho una pagina statica come homepage, dopo aver selezionato un'etichetta il link "mostra tutti i post" rimanda a questa pagina statica,
    come si può modificare?
    Grazie RG

    RispondiElimina
    Risposte
    1. Mostra tutti i post di default rimanda alla Homepage che nel tuo caso è la pagina statica. Non so se sia possibile cambiarlo. Prova però a cercare nel modello queste due righe

      <div class='status-msg-wrap'>
      <div class='status-msg-body'>

      Sono quelle che creano il link. Non ho trovato il modo di cambiarlo ma può darsi che tu possa essere più fortunato
      @#

      Elimina
  4. non le ho trovate, grazie per la disponibilità

    RispondiElimina

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