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

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 

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'> .