In questa lezione per creare un template per Blog ospitato sulla piattaforma Blogger di Google parleremo della creazione del menu di navigazione, elemento fondamentale nella struttura del blog e del suo template grafico.
L’approccio è quello più utilizzato dagli sviluppatori di temi per blogspot: si otterrà un menù che mostra soltanto le pagine all’interno del nostro Blog e non i post. In questo articolo verrà fornito il codice base HTML e XML e verranno inotre illustrate le caratteristiche del CSS. Se hai un po’ di esperienza con HTML e CSS potrai creare menu e personalizzarli a tuo piacimento per ogni sezione del blog.
Il menu che risulta dal codice indicato sotto è ottenuto con la creazione di una sezione widget ed il widget stesso. Il codice può essere incollato ovunque si voglia far apparire il menu delle pagine, utile per la navigazione e solitamente ubicato tra la testata ed il contenuto orizzontalmente:
<b:section class='tabs' id='crosscol' maxwidgets='1' showaddelement='yes'>
<b:widget id='PageList1' locked='false' title='Pages' type='PageList'>
</b:widget>
</b:section>
Questo è solo un pezzo incompleto di codice, ma è sufficiente salvare il modello dopo averlo inserito per ritrovarlo completato automaticamente, come abbiamo già visto nella lezione precedente, nella quale si parlava di come creare la testata nel template.
Per quanto riguarda il CSS, ecco il codice da compilare con le personalizzazioni grafiche che più desideri:
.tabs { }
#corsscol { }
#PageList1 { }
#PageList1 ul { }
#PageList1 ul li { }
#PageList1 ul li a { }
Dopo aver inserito margini, colori, grandezze e tutto ciò che desideri per personalizzare la tua grafica via CSS potrai salvarlo entro i tag <b:skin> e goderti il frutto del tuo lavoro!
Se hai difficoltà, dubbi o considerazioni non esitare a lasciare un commento, saremo felici di risponderti.