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

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

nascondere-header-blogger

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.




2 commenti :

  1. Ciao, a proposito di header, sono alle prese con un problema di per sé non particolarmente rilevante, ma a che a me personalmente sta dando parecchia noia. Sto utilizzando un header di dimensioni 350x1200 di per sé perfettamente nitido tanto nelle immagini quanto nelle scritte anche se ingrandito. Purtroppo, quando lo inserisco nel blog (lo spazio apposito è di dimensioni 420x1200) le scritte appaiono lievemente sfocate. Ho selezionato anche l'opzione per adattare le dimensioni dell'header da me scelto a quelle del blog, ma la situazione non cambia. Se apro il blog da smartphone la visualizzazione migliora, ma da tablet o peggio ancora da computer il problema non vuole risolversi. Qualche suggerimento? Grazie in anticipo.

    RispondiElimina
    Risposte
    1. Prova a rifare l'immagine dell'Header con dimensioni uguali a quelle richieste
      @#

      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