Come modificare le linee di divisione dei post nella home della versione mobile di Blogger.

Come modificare un elemento della versione mobile di Blogger trovandone il selettore univoco con Ispeziona Elemento di Chrome o Analizza Elemento di Firefox.

Spesso nei commenti ai miei articoli mi si pongono delle domande a cui non posso rispondere in un altro commento perché la trattazione sarebbe troppo complessa. È il caso di questa domanda in cui il lettore mi chiede come modificare la riga di divisione degli articoli quando si visualizza la homepage con un dispositivo mobile. Se però ritengo che il quesito possa avere un interesse generale allora ci faccio un articolo in modo che possa essere utile anche ad altri frequentatori del sito.

Per procedere alla personalizzazione della versione mobile bisogna averla abilitata.Bisogna quindi andare su Modello > Cellulare e cliccare sulla ruota dentata.  Successivamente si mette la spunta a Sì. Mostra il modello per cellulari nei dispositivi mobili e, tra i modelli disponibili, si sceglie Personalizza. Si va quindi su Salva per rendere le modifiche effettive.

L'aspetto della homepage di un blog di prova sarà simile a questo

In linea di massima per modificare un elemento della grafica del blog nella versione mobile bisogna aggiungere alla pagina in oggetto la stringa ?m=1 e aprire il link con Screenfly. Si utilizzano quindi i tool Ispeziona Elemento di Chrome o Analizza Elemento di Firefox per trovare il selettore unico dell'elemento in oggetto. Non sto a illustrare la procedura. Nella fattispecie però si trova che il CSS che determina l'aspetto della linea di divisione si trova nel blocco di codice

.mobile-date-outer {
border-bottom: 1px solid #ddd;
margin-bottom: 15px;
}

Segnatamente è la seconda riga colorata di rosso che introduce un bordo sotto ciascun post.



Utilizzando gli stili dei bordi possiamo modificare questo blocco di codice in questo modo

.mobile-date-outer {
border-bottom: 3px groove #f00;margin-bottom: 15px;
}

in cui la riga colorata di rosso è stata modificata in quella colorata di blu. C'è anche la possibilità che questo codice non sia presente nel modello ma che i tool Ispeziona Elemento e Analizza Elemento lo abbiano individuato come eredità degli altri codici. In questo caso il codice va incollato subito sopra alla riga ]]></b:skin> che il termine dei fogli di stile. Se adesso si salva il modello l'aspetto della homepage del nostro sito visualizzata da dispositivo mobile sarà il seguente

Questo metodo può essere utilizzato per tutti gli elementi della versione mobile di Blogger. Il selettore univoco trovato per questo blog di test non è detto che sia lo stesso di quello di altri siti specialmente se i loro modelli sono stati scaricati da internet.