Come nascondere l'Header di Blogger quando il blog viene aperto con un cellulare.

Come nascondere l'Immagine della Intestazione di Blogger quando la pagina è aperta da un cellulare e come diminuire le dimensioni dei font di titolo e data.

I più grandi nemici dei blogger sono il tempo e lo spazio. Il tempo che dedichiamo alla nostra passione non è mai abbastanza. Se privilegiamo il curare l'aspetto e l'ottimizzazione per i siti di ricerca ci manca il tempo per scrivere post di livello e viceversa se impieghiamo quel poco o tanto che abbiamo a disposizione per pubblicare gli articoli non riusciamo a tenere il passo con tutte le novità apportate ai motori di ricerca.

Un discorso simile vale anche per lo spazio disponibile nel layout. Vorremmo mostrare più contenuti possibili insieme a widget eleganti e utili ma è inevitabile fare delle scelte e eliminare tutto quello che non è strettamente necessario. Nella versione desktop di Blogger si può ottimizzare lo spazio con l'introduzione dei cursori nei widget delle sidebar. Nella versione mobile i problemi vengono acuiti dal fatto che la risoluzione è più bassa. Il primo scroll della pagina viene di solito indicato con l'espressione inglese "above the fold".

I blog su piattaforma Blogger che hanno una immagine di intestazione particolarmente grande nel momento in cui vengono aperti con un cellulare praticamente mostrano poco altro oltre alla stessa immagine e al titolo del post. Ecco quindi che in questa chiave potrebbe essere particolarmente utile nascondere l'immagine dell'Header quando le pagine sono aperte con un dispositivo che abbia una risoluzione inferiore a un certo valore.

Per questa operazione si utilizzano i tag Media Query con cui creare dei CSS che possono mostrare o meno un certo contenuto su desktop, tablet o smartphone in funzione della loro risoluzione. Il risultato che vogliamo creare è quello mostrato nello screenshot seguente

in cui vengono mostrate la homepage e la pagina di un post con l'header e senza l'header. La mancanza della immagine di Intestazione non è un gran danno se il lettore riesce comunque a capire in che sito si trova dal suo nome visibile per esempio in un menù specifico per il mobile.

Per questa operazione si va su Modello -> Modifica HTML e si cerca la sezione <b:skin> quindi si clicca sulla freccetta nera posta sulla sua sinistra per visualizzarne tutto il codice. Poi con Ctrl+F si cerca la riga  ]]></b:skin> e, subito sopra a questa, si incolla questo codice

/* Nascondere Header */
@media only screen and (max-width: 640px) {
#header  {display: none;}
}

Il valore della risoluzione proposto in 640 pixel significa che se la pagina viene aperta con un dispositivo a risoluzione inferiore non viene mostrata l'immagine di intestazione. Nello screenshot di esempio le pagine sono state aperte con un iPhone 7 utilizzando il tool Screenfly. Nella realtà la differenza è ancora più marcata di quello che si vede con l'utilizzo di questo tool.

Ovviamente dovrà prima essere salvato il modello e l'immagine dell'Header continuerà a essere visibile quando le pagine vengono aperte con un dispositivo di risoluzione superiore quindi anche con un tablet. Se anche le dimensioni dei font della data e del titolo vi sembrano grandi potete cercare nel template queste due righe di codice .mobile .date-header span { e .mobile h3.post-title { . Sotto a queste righe potete aggiungere la dimensione ottimale per il vostro layout che potrebbero essere font-size:10px !important; per la data e font-size:15px !important; per il titolo del post.