Come usare il nuovo Layout di Blogger per Sezioni e Widget.

Come interpretare la scheda Layout di Blogger con le Sezioni e i Widget per trovarli nel codice del modello e per modificsrne i CSS.

Da un paio di giorni se siete utenti di Blogger e se avete aperto la pagina Layout della Bacheca vi sarete accorti che qualcosa è cambiato.  Oltre ai soliti Elementi Pagina con il nome del singolo widget sono stati aggiunti anche i nomi delle sezioni. Questo non è che nell'immediato aiuti particolarmente gli utenti ma in prospettiva può essere interessante per una migliore organizzazione delle modifiche del codice del template.

Nella Guida di Blogger è specificato che cosa siano le Sezioni e i Widget e quali attributi possano contenere. Le sezioni iniziano tutte con il codice <b:section… e terminano con il tag </b:section>. Al loro interno ci possono essere questi parametri:

   1) id (obbligatorio) che è il nome identificativo univoco con lettere e numeri
   2) class (facoltativo) con nomi comuni di classi tipo "navbar", "header", "main", "sidebar" e "footer" che possono anche essere sostituiti da altri e che servono a Blogger in caso di cambiamento del modello
   3) maxwidgets (facoltativo) che indica il numero massimo di widget che si possono inserire nella sezione. In caso di maxwidgets=' '  senza specifiche se ne possono aggiungere in un numero illimitato
   4) showaddelement (facoltativo) per mostrare il ben noto elemento Aggiungi un gadget che ci permette di aggiungere altri widget.
   5) growth (facoltativo) che può essere "horizontal" o "vertical" (di default).

La nuova grafica della scheda Layout è la seguente

dove i nomi delle Sezioni sono in grassetto e quelli dei widget in caratteri normali. Ci sono sezioni e widget che possono essere confusi come per esempio la Sezione Navbar che al suo interno contiene il Widget Navbar così come la Sezione Header al suo interno contiene il Widget Intestazione

Se cerchiamo nel codice con Ctrl+F questi termini questa suddivisione sarà visibile anche lì

I possibili attributi per i widget sono invece i seguenti:

1. id (obbligatorio) costituito da lettere e numeri per individuare univocamente il widget.
2. type (obbligatorio) indica il tipo di widget tra questi possibili: BlogArchive, Blog, Feed, Header, HTML, SingleImage, LinkList, List, Logo, BlogProfile, Navbar, VideoBar, NewsBar. Quando ci siano più widget dello stesso tipo nell'id si aggiunge un numero p.e. HTML1.
3. locked (facoltativo) che può essere yes o no e che consente all'utente di eliminare tale gadget nel caso sia settato il no 
4. title (facoltativo) per la visualizzazione nella scheda Layout. Se non specificato verrà aggiunto di default come PageList1
5. pageType (facoltativo) che è molto interessante e che può contenere  "all", "archive", "main" o "item". Serve per mostrare un widget solo in un determinato tipo di pagine ed è una valida alternativa ai tag condizionali.
6. mobile (facoltativo) che può essere yes o no per mostrare o meno un widget nella versione mobile.

Ho postato sul mio canale di Youtube un video esemplificativo di questa novità appena introdotta

Se dopo aver aperto una pagina del vostro sito digitate Ctrl+U per controllare il Sorgente Pagina vale a dire il codice HTML della pagina visualizzata non troverete i codici che abbiamo visto vale a dire <b:section … e <b:widget … ma all'inizio di ciascuna sezione o widget ci sarà il tag <div … 

È noto che si può usare lo strumento Analizza Elemento per scoprire il selettore di una sezione o di un widget. Conoscendone però l'ID e sapendo che il suo codice inizierà con <div .. potremo individuarlo subito. Per esempio il selettore della sidebar del blog di test che ho usato sarà div#sidebar-right-1 mentre il selettore del widget Etichette sarà div#Label1. Il significato di div lo abbiamo già visto, il cancelletto # si antepone nei CSS che hanno id invece di class e infine sidebar-right-1 e Label1 sono rispettivamente gli ID della sezione e del widget in oggetto. 

Continuando nell'esempio se per esempio incolliamo nel template sopra a ]]></b:skin> il codice 

div#sidebar-right-1 {font-size:18px; background-color:yellow;}

produrremo questo effetto 

Se oltre a questo aggiungiamo nella stessa posizione anche il codice

div#Label1 h2 {font-size:26px; color:green;}
div#Label1 li a {color:#f00;}

l'aspetto del gadget delle Etichette diventerà così

Nel CSS sono stati aggiunti a cascata anche i tag h2, li e a rispettivamente per il titolo del widget, gli elementi dell'elenco e il collegamento. Chi non abbia ben compreso quello di cui ho parlato fino a questo momento può scaricarsi il mio ebook gratuito Guida all'HTML e al CSS.