Come cercare il codice e modificare il modello di Blogger.

Come cercare stringhe di codice nel modello (template) di Blogger e come modificarlo, salvarlo e ripristinarlo. Modificare la versione mobile e/o quella desktop.

Leggendo alcuni commenti pubblicati in questo sito mi sono accorto che molte difficoltà sulla installazione di widget o modifica del modello sono riconducibili alla non conoscenza di come funziona la versione più recente del template di Blogger anche se non si può più chiamare nuova visto che sono passati diversi anni da quando è stata rilasciata.

Prima di procedere occorre sempre aver salvato il template per un eventuale ripristino. Si va quindi su Bacheca -> Modello -> Backup/Ripristino che aprirà una finestra in cui cliccare su Scarica modello. Verrà salvato nella cartella Download un file .XML denominato template con un numero identificativo. Per evitare confusione sempre possibile quando si abbia più di un blog magari anche solo uno di prova è bene rinominare subito il file dandogli il nome del blog insieme alla data in cui si è scaricato.

Tutti i file .XML non debbono essere mantenuti fino alla verifica che le modifiche sono andate a buon fine m devono essere conservati per mesi o addirittura per anni. Non è infatti raro che ci si accorga dopo molto tempo che una modifica apparentemente andata a buon fine ha invece portato delle conseguenze negative. Si può quindi caricare nuovamente il template individuato dalla data e eventualmente da altre aggiunte che sono state inserite nel nome del file.

Per il ripristino di un template si va sempre su Modello -> Backup/Ripristino -> Scegli file per poi selezionare il file .XML da ripristinare. Si clicca su Carica per applicare quel modello.  Dopo aver effettuato queste operazioni propedeutiche si va su Modello -> Modifica HTML per visualizzare il codice. Occorre cliccare nell'area del codice per cercare una determinata riga. Se non lo facessimo pigiando sulla tastiera la combinazione Ctrl+F aprirebbe un campo di ricerca nel browser e non all'interno del codice del modello. In tale campo si incolla usando il destro del mouse o si digita la riga da cercare. Si va poi su Invio o Enter sulla tastiera affinché venga evidenziata la riga che contiene la stringa cercata.

Sulla sinistra del codice vengono mostrati i numeri delle righe insieme a delle freccette nere

Le freccette nere servono per mostrare o nascondere le righe. Per esempio nello screenshot la sezione <b:skin> è quella che racchiude tutti i CSS del modello. Per aggiungere una nuova regola CSS è consigliato cercare l'ultima riga della sezione per poi incollare il CSS subito sopra a questa. Per poterlo fare su clicca sulla freccetta nera per visualizzare tutte le righe che nel modello preso come test vanno dal numero 9 al 760. Si digita quindi Ctrl+F per aprire la casella di ricerca all'interno del modello e vi si incolla ]]></b:skin. Pigiando su Invio la riga verrà evidenziata nel template in modo da poterci incollare il codice subito sopra ad essa

Per creare uno spazio atto a incollare nuovo codice si clicca a sinistra della riga per poi andare su Invio. Ho postato su Youtube un video tutorial su tutti i trucchi per modificare il template di Blogger

Se ci rendiamo conto di aver digitato erroneamente una stringa sbagliata o di aver incollato in una posizione errata il codice si può andare sul pulsante Annulla Modifiche per ripristinare immediatamente la situazione originaria. Le freccette nere non servono solo per delimitare il codice dei CSS ma anche per suddividere in sezioni il codice della parte principale del blog. Se clicchiamo infatti su Vai al widget -> Blog1 visualizzeremo tali sezioni. Si può cliccare sulle freccette nere sulla sinistra per visualizzarne il codice oppure per nasconderlo se fosse già visibile.

Ciascuna sezione inizia con <b:includable id='... > e termina con </b:includable>. Alla fine del widget Blog1 ci sarà la riga </b:widget> che indicherà il termine delle sezioni. Si possono anche aggiungere nuove sezioni come abbiamo fatto per esempio con i BreadCrumbs.

Quando si vuole modificare la versione desktop si deve modificare il codice della sezione

<b:includable id='post' var='post'>

mentre se si vuole modificare la versione mobile si deve innanzitutto abilitarla andando su Modello -> Cellulare -> Ruota dentata -> Sì. Mostra il modello per cellulari nei dispositivi mobili per poi scegliere Personalizza e andare su Salva. La sezione in cui intervenire in questo caso è

<b:includable id='mobile-post' var='post'>

In queste due sezioni ci sono dei codici molto simili su cui si può fare confusione. In entrambe per esempio le righe seguenti indicano rispettivmente la stessa cosa

<div class='post-header'>, <data:post.body/>,  <div class='post-footer'>

vale a dire l'inizio della parte alta del post, il contenuto del post e l'inizio del footer. 

COME CERCARE I CODICI DEI WIDGET

Cliccando su Vai al widget si può cliccare su uno dei widget presenti nel modello. Il codice del widget propriamente detto non si trova nel modello ma si dovrebbe cercare in Layout e cliccare su Modifica nell'elemento pagina in oggetto. Il codice presente nel modello è però fondamentale per aggiungere i tag condizionali in modo da mostrare un widget solo in determinate tipologie di pagine.

Ciascun widget inizia con la riga <b:widget id=.... > e termina con </b:widget> mentre le due righe <b:includable id='main'> e </b:includable> servono come riferimento per aggiungere i tag condizionali. La riga  <b:include name='quickedit'/> è presente in tutti i widget. Se non lo fosse si può aggiungere per mostrare il Quick Edit ovvero la icona della chiave inglese e cacciavite per modificare il widget al volo direttamente dalla pagina web senza andare su Layout. 

FORMATTARE IL MODELLO E RIPRISTINARE I MODELLI WIDGET

Se si clicca su Formatta non è che si cancella il modello come accade per esempio in una chiavetta USB. Il template non viene modificato ma viene semplicemente organizzato meglio il codice per esempio mostrando i CSS nella forma corretta così come eventuali javascript. Cliccando su Ripristina modelli widget ai valori predefiniti si possono ripristinare uno o più widget. Si tratta di una operazione radicale da usare con molta prudenza. Si aprirà una finestra con l'elenco dei widget

Si mette la spunta a quelli da ripristinare quindi si va su Ripristina widget selezionati. Se per esempio per una modifica azzardata non si vedessero più i post allora andrebbe ripristinato il widget Blog1. Facendolo però perderemo tutte le modifiche apportate nella sezione desktop e mobile.