Personalizzare il titolo dei widget di Blogger


Quando creiamo un widget su Blogger (es. HTML/Javascript) vi sono due spazi vuoti: nel primo campo vuoto si inserisce il titolo del widget e nel secondo tutto ciò che si vuole come testo, immagini, script e altro ancora. Il titolo del widget così come qualsiasi testo del blog può essere personalizzato a proprio piacimento, quindi è possibile sia cambiare il colore sia il carattere del titolo di un widget di Blogger.


Per personalizzare il titolo di ogni widget dovete prima individuare il loro rispettivo ID andando su Layout > Modifica e poi prendendo solo la parte finale dell'url presente nella finestra che apre.



Cambiare colore, font e dimensioni

Si va su Modello > Modifica HTML e si cerca il tag ]]></b:skin> e prima di esso si va ad incollare il seguente codice:
#HTML1 h2 {font-size:24px; color:#f00; font-style:italic; font-family:Arial !important;}

In questo caso HTML1 è evidenziato in rosso perché è il parametro che varia per ogni widget. Il selettore del titolo dei widget normalmente è h2, ma nei temi più personalizzati potrebbe essere anche h3, h4 ecc.
Con questo codice css è possibile cambiare le dimensioni del titolo dei gadget (24px), il colore (#f00), il font (Arial),

Allineamenti

E' anche possibile aggiungere margini per spostarlo più a sinistra o a destra o per posizionarlo centralmente. In questo caso il codice potrebbe essere:
#HTML1 h2 {margin-left: 10px important;} se lo volete 10px più a destra.
#HTML1 h2 {margin-left: -10px important;} se lo volete 10 px più a sinistra.
#HTML1 h2 {margin-left:auto; margin-right:auto; width:200px; } se lo volete centrato, ma in questo caso va indicato in pixel la larghezza totale in modo che calcoli automaticamente le misure.

Sottolineatura

Se volete che il titolo dei widget si veda sottolineato, il codice da usare sarà il seguente:
#HTML1 h2 {text-decoration:underline !Important;}

Icona prima o dopo il titolo dei widget

Per inserire un'icona prima del titolo di un widget dovete usare il seguente codice:
#HTML1 h2:before { content: url(LINK ICONA); padding-right:8px; }

Per inserire un'icona dopo del titolo di un widget dovete usare il seguente codice:
#HTML1 h2:after { content: url(LINK ICONA); padding-left:8px; }

In entrambi i casi va inserito all'interno delle parentesi tonde il vero url dell'icona che volete visualizzare.



Nessun commento :

Scrivi un commento

I commenti dovranno prima essere approvati da un amministratore. Verranno pubblicati solo quelli utili a tutti e attinenti al contenuto della pagina. Per commentare utilizzate un account Google/Gmail, altrimenti la modalità "anonimo".