Pubblicato il 06/12/14e aggiornato il

Cambiare colore e carattere al titolo di un widget di Blogger.

Come personalizzare il titolo di ciascun widget di Blogger usando il CSS.
Nel post precedente abbiamo visto come utilizzare Analizza Elemento di Firefox per trovare i selettori di un oggetto o di una selezione presente nel layout. In questo articolo vedremo come applicare queste conoscenze a un tema specifico vale a dire alla modifica dell'aspetto del titolo di uno o più widget del nostro blog su Blogger.

Se si analizza l'elemento con Firefox o con Chrome troveremo che il selettore del titolo di gadget è h2 che però è lo stesso non solo di tutti i titoli dei widget ma anche della data.  Quindi se noi aggiungessimo un CSS del tipo h2 { … } si andrebbero a modificare tutti questi elementi. Per cambiare aspetto solo al titolo di un particolare widget dobbiamo determinarne l'ID. Se utilizzate Firefox o Chrome basterà cliccare nella icona del cacciavite e della chiave inglese che vengono visualizzati dall'amministratore del blog quando si sia loggato con il suo account Google. Alternativamente potete andare su Layout e cliccare su Modifica nel widget di cui volete personalizzare il titolo. Nella finestra che si apre dovete scorrere tutto l'indirizzo fino in fondo aiutandovi con i tasti direzionali

id-widget-blogger

L'ID del gadget è la parte finale dell'URL dopo widgetID= e nello screenshot precedente sarebbe BlogArchive1. Con questo dato possiamo creare il CSS per modificare l'aspetto del titolo di quel widget e solo di quello. Per esempio consideriamo questo codice

#BlogArchive1 h2 {font-size:24px; color:#f00; font-style:italic; font-family:Arial !important; }

dove al posto di BlogArchive1 si deve mettere l'ID del nostro gadget. Se si tratta di un widget HTML l'ID sarà del tipo HTML1, HTML2, HTML3, ecc dove il numero dipende dall'ordine con cui sono stati creati i gadget. I tag che si possono inserire sono moltissimi e dipendono dalle esigenze del webmaster. Con il codice proposto nell'esempio il titolo del widget avrà caratteri con dimensioni di 24 pixel, in corsivo e con famiglia di font Arial. L'inserimento del tag !important serve se una regola fosse in contrasto con una già presente nel modello per comandare al browser di considerarla prevalente rispetto all'altra. 

modificare-aspetto-titolo-widget

Lo screenshot precedente mostra come si modifica il titolo del widget con il codice proposto. Si cambierà solo quel titolo e nessun altro. Se volete operare le stesse modifiche anche ad altri titoli basterà aggiungere tutti gli altri selettori separati da virgole per esempio in questo modo

#BlogArchive1 h2, #Profile1 h2, #HTML1 h2 {font-size:24px; color:#f00; font-style:italic; font-family:Arial !important; }

in cui si modificano i titoli del widget dell'Archivio, di quello del Profilo e di un widget HTML. Va da sé che i codici dei colori, la famiglia di caratteri e gli altri parametri possono essere scelti a piacere da ciascun utente di Blogger.
modificare-aspetto-titoli-widget

Non fate caso alla grafica delle modifiche che ho usato come test perché le ho scelte appositamente improbabili proprio per renderle più evidenti. Concludo ricordando che per operare nel template bisogna andare su Modello > Modifica HTML. Si clicca sulla freccetta nera accanto alla sezione <b:skin> che si trova intorno alla 13-esima riga e tramite Ctrl+F si cerca il tag ]]></b:skin>. Il codice del CSS che si è creato va incollato appunto subito sopra a tale riga come di abitudine.




11 commenti :

  1. se volessi centrare il titolo del widget cosa devo aggiungere? Grazie

    RispondiElimina
  2. @# All'interno delle parentesi graffe devi aggiungere il tag text-align:center;

    RispondiElimina
  3. Questo commento è stato eliminato dall'autore.

    RispondiElimina
  4. Ciao! Funziona tutto, ma il titolo del widget lo lascia col vecchio carattere! :(
    Inoltre volevo cambiare il font della nav bar in alto!
    Sonia

    RispondiElimina
    Risposte
    1. Hai semplicemente delle classi di stile diverse da quelle tipiche di Blogger. Probabilmente hai un modello scaricato da internet. Dovresti trovare da sola tali classi (o selettori)
      http://www.ideepercomputeredinternet.com/2014/12/analizza-elemento-firefox.html
      Comunque prova h2.title insieme agli altri selettori. La Navbar è interamente nei server di Blogger e non credo si possa fare nulla a parte questo
      http://www.ideepercomputeredinternet.com/2012/07/navbar-blogger.html
      @#

      Elimina
  5. Scusami non intendevo la navbar ma le schede che ho creato (o pagine)!
    http://sissahome.blogspot.it

    RispondiElimina
    Risposte
    1. Leggi quello che si può fare
      http://www.ideepercomputeredinternet.com/2012/10/blogger-menu-pagine-altezza-larghezza-centrare-personalizzare.html
      @#

      Elimina
  6. Ho cercato nel blog ma non sono riuscita a trovare se sia possibile modificare anche l'aspetto del menù sottostante il titolo del widget, in questo caso il blog archive, che ho in modalità menù a discesa, e vorrei renderlo graficamente più morbido. Non ho problemi a personalizzare con i dati che preferisco, ma non so dove mettere le mani per iniziare :)

    RispondiElimina
    Risposte
    1. rewind! trovato questo post! http://www.ideepercomputeredinternet.com/2011/04/menu-tendina-verticale-colorato-con-le.html
      grazie infinite, mi metto subito all'opera ;)

      Elimina

Non inserire link cliccabili altrimenti il commento verrà eliminato. Metti la spunta a Inviami notifiche per essere avvertito via email di nuovi commenti. Se ti ho aiutato con il post o con le risposte ai commenti condividi su Facebook o su Twitter. Grazie.