Personalizazzione Blogger: Sidebar Titles

Nel layout del blog, le Sidebar sono la o le barre ai lati del corpo vero e proprio del blog. Nelle sidebar è possibile aggiungere vari gadget ed ogni gadget ha un suo titolo. Ad esempio informazioni personali, etichette o archivio blog sono alcuni dei gadget più comunemente inseriti nelle sidebar.

Di default questi hanno un semplice titolo, spoglio di ogni artifizio grafico e di cui si può modificare ben poco ( in genere solo stile, colore e dimensione del font ) tramite l'interfaccia di Blogger.

Visto che ho dovuto farlo per me, ho deciso di condividere quello che ho imparato. Vorrei sottolineare che la procedura di seguito descritta potrebbe essere leggermente diversa per alcuni modelli di blog e non valere affatto per altri, quindi c'è bisogno di un pizzico di elasticità mentale.

Allora, selezionato il blog da modificare...

...andiamo su Modello e:

1. facciamo un Backup del modello del Blog ( pulsante in alto a destra nell'immagine ).
2. Clicchiamo su Modifica HTML.

Ora bisogna trovare ( magari aiutandoci con CTRL + F ) la parte di codice:

.sidebar h2 {
    ....
}
]]></b:skin>
    ....
</head>

Se non è presente proprio dovremo aggiungere qualche linea di codice subito prima della parte riportata sopra in rosso. Purtroppo non sono qui a spiegarvi le basi, che neanche io posseggo pienamente, dei CSS. Per cui da adesso quello che nel seguito riporto è il codice che ho aggiunto io e che ingloba la maggior parte delle modifiche possibili per il titolo dei gadget della sidebar, ovvero bordi, margini, background etc..

Se possedete già le basi allora non avrete problema alcuno, altrimenti basta fare piccole ricerche per capire perfettamente ogni riga del codice e modificarlo a vostro piacimento. E se anche questo dovesse risultarvi arduo, allora abbandonate l'approccio razionale e virate verso quello empirico!

.sidebar h2 {
    border:1px solid #1862dc;
    background:#889fec;
    margin:5;
    padding:0 1.2em;
    line-height:2.5em;
}

Per inserire invece una immagine di background il codice è:

background:url(URL DELLA VOSTRA IMMAGINE)no-repeat; 

That's all folks!