Come inserire i bordi nel menù delle pagine statiche di Blogger.

Come inserire delle linee o dei bordi nel menù orizzontale delle pagine statiche di Blogger per dividere il menù dal resto del layout o per dividere le varie voci del menù.

Ho più volte scritto che la maggior parte delle idee sui temi degli articoli mi vengono leggendo i vostri commenti e quindi confrontandomi sulle personalizzazioni che richiedete e che ritengo possano essere interessanti non solo per un singolo lettore. Qualche volta mi sono cimentato nello scrivere anche degli "instant post" se ricevo una domanda che non mi consente per la sua complessità di rispondere nei commenti ma che mi dà l'input per l'argomento di un post.

È il caso di questo articolo nato  a seguito di chi mi ha chiesto come inserire due linee in alto e in basso al menù orizzontale delle pagine statiche di Blogger. Ricordo che tale menù viene a formarsi automaticamente dopo la pubblicazione delle Pagine e che si può scegliere di mostrare orizzontalmente in alto, verticalmente in una sidebar o decidere di non mostrare. Nell'articolo linkato mi ero occupato di come modificarne le dimensioni e di come centrarlo. Il menù delle pagine statiche può essere integrato anche con link esterni al blog. In sostanza vogliamo effettuare una modifica di questo tipo

dove le righe aggiunte in alto e in basso risultano evidenti nello screenshot. Dopo aver salvato il template si va su Modello > Modifica HTML e si cerca il codice ]]></b:skin>. Subito sopra a questa riga si incolla il seguente CSS che poi personalizzeremo

#PageList1 ul {
border-bottom: 1px solid #003366 !important;
border-top: 1px solid #003366 !important;
}

Come vedete le due righe sono distinte e quindi possono anche essere settate in modo diverso riguardo ai codici dei colori (#003366), allo spessore della riga (1px) e allo stile del bordo. Ovviamente si salva il modello. Adesso facciamo un passo ulteriore e poniamo che si vogliano inserire delle righe non solo in alto e in basso ma anche tra le varie voci che compongono il menù in questo modo

Ho usato dei colori diversi per le linee orizzontali e verticali per questioni di chiarezza. Il codice da incollare in questo caso sempre sopra alla stessa riga del template è il seguente

#PageList1 ul {
border-bottom: 2px solid #003366 !important;
border-top: 2px solid #003366 !important;
}
#PageList1 ul li {
border-left: 1px solid #00C200 !important;
border-right: 1px solid #00C200 !important;
}

dove i parametri in rosso possono essere personalizzati come detto in precedenza.