Pubblicato il 11/10/16 - aggiornato il  | 6 commenti :

Come personalizzare i titoli dei widget nella sidebar di Blogger.

Come personalizzare l'aspetto dei titoli dei widget di una o di tutte le sidebar di Blogger modificando il template.
Ieri ho ricevuto un commento in cui mi si chiedeva come personalizzare i titoli dei widget presenti in una sidebar di Blogger. Visto che il tema pur non essendo fondamentale può interessare altri lettori ho pensato di scrivere un post su questo argomento.

Le personalizzazioni degli aspetti grafici di Blogger in teoria si dovrebbero fare con il Designer Modelli. Si dovrebbe cioè andare su Modello -> Personalizza -> Avanzato -> Gadget per poi scegliere la famiglia di caratteri, il colore e il colore alternativo del titolo.

Con questa procedura però c'è un rischio e una difficoltà. Il rischio è che quando si apre il Designer Modelli vengano azzerate le modifiche inserite nel template con la possibilità che il menù smetta di funzionare insieme ad altri widget e personalizzazioni.  La difficoltà è che modificando l'aspetto dei titoli dei gadget viene modificato anche l'aspetto della data dei post.

Vediamo quindi quale sia la procedura alternativa per personalizzare tali titoli con un codice da inserire nel modello di Blogger. Prima di procedere dobbiamo andare su Layout e trovare l'ID della sezione della sidebar in oggetto. 

id-sidebar-blogger

Ci possono essere sidebar sulla sinistra, sulla destra o in entrambi i lati. Inoltre nel Designer Modelli si possono scegliere dei Layout con sidebar che si sdoppiano in due colonne. In linea di massima le sidebar di sinistra avranno ID sidebar-left e le sidebar di destra sidebar-right. Se ci sono più sidebar sullo stesso lato come nello screenshot precedente ciascuna sidebar avrà avrà anche un numero d'ordine come per esempio sidebar-right-1, sidebar-right-2-1, sidebar-right-2-2.






Dopo aver salvato il template si va su Modello -> Modifica HTML e si cerca la sezione <b:skin>. Si clicca sulla freccetta nera posta sulla sinistra per visualizzare tutto il codice e per trovare l'ultima riga di tale sezione con Ctrl+F che è ]]></b:skin>. Subito sopra a questa si incolla questo codice

#sidebar-right-1 h2, #sidebar-right-2-1 h2, #sidebar-right-2-2 h2 {font-size:24px; color:#f00; font-style:italic; font-family:Georgia !important; }

dove si aggiungono gli ID delle sidebar precedute dal cancelletto ( # )e seguite da h2 che è il tag del titolo. Se abbiamo una sola sidebar è importante togliere la virgola che invece è essenziale per separare gli ID quando ci sia più di una sidebar. Tra le parentesi graffe si aggiungono gli attributi da modificare. Nel codice di esempio ho scelto di personalizzare la dimensione dei font (24px), il colore del titolo (#f00), lo stile del corsivo e la famiglia dei caratteri (Georgia).  

Ovviamente si possono togliere alcuni tag che non interessano e aggiungerne altri. Con questo codice si modificheranno i titoli delle sidebar di cui abbiamo aggiunto gli ID e non la data dei post.

titolo-widget-blogger

Dopo aver salvato il modello il titolo dei gadget sarà modificato dai nuovi codici dei colori e dalla nuova famiglia di font. Su questo tema ho pubblicato altri articoli come quello per racchiudere in un bordo le sidebar, quello per cambiare l'aspetto del titolo solo di un dato gadget e quello per personalizzare l'aspetto di tutto il widget.


6 commenti :

  1. ciao ernesto, purtroppo questo codice non funziona sul mio blog, :-(
    da cosa può dipendere?

    RispondiElimina
  2. Dipende da un diverso ID della tua sidebar. Devi andare su Layout e trovare quale sia. È spiegato nel post
    @#

    RispondiElimina
    Risposte
    1. ho esattamente la situazione che hai illustrato nel post, per cui i miei id dovrebbero essere quelli che hai indicato nel codice, giusto?

      Elimina
  3. Fammi uno screenshot del tuo Layout. La cosa è molto strana perché il codice l'ho testato
    @#

    RispondiElimina
  4. Lo carichi su Imgur e incolli l'indirizzo in un commento ma se sei sicura non importa. Controlla di non aver compreso una parentesi graffa in più nella riga sopra a cui hai incollato il codice. Magari fammi uno screenshot anche del codice poi quando vado al PC ti saprò dire
    @#

    RispondiElimina

Non inserire link cliccabili altrimenti il commento verrà eliminato. Metti la spunta a Inviami notifiche per essere avvertito via email di nuovi commenti.
Info sulla Privacy