Pubblicato il 20/09/16e aggiornato il

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




Nessun commento :

Posta un commento

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.