Pubblicato il 01/12/16 - aggiornato il  | 14 commenti :

Come personalizzare i titoli dei widget di Blogger.

Come personalizzare il colore, lo sfondo, il bordo, la dimensione e la famiglia dei caratteri del titolo di tutti i widget di Blogger o di uno soltanto.
Ho ricevuto una richiesta in un commento a cui mi era difficile rispondere in modo esauriente quindi ho deciso di farlo con un post che penso possa interessare anche altri lettori e che prende in esame un aspetto più generale.

La domanda riguarda la possibilità di modifica del colore di sfondo del titolo del widget dei Lettori Fissi. In questo post vedremo gran parte delle possibili modifiche che si possono effettuare all'aspetto dei titoli di tutti i widget di Blogger. Vedremo come modificare i titoli di tutti i widget e come invece modificare quello di uno soltanto. Oltre al colore di sfondo potremo cambiare il colore del testo, la famiglia di caratteri, l'allineamento e la dimensione dei font.

COME MODIFICARE L'ASPETTO DEI TITOLI DI TUTTI I WIDGET DELLE SIDEBAR


Come prima ipotesi consideriamo quella di modificare l'aspetto di tutti i titoli dei widget visualizzati nelle sidebar che possono essere a sinistra o a destra. Il sistema è quello di creare delle regole CSS da incollare nel modello. Ciascuna riga della regola inciderà su un particolare aspetto. Potremo incollare solo le righe delle modifiche che ci interessano e tralasciare le altre.

Dopo aver salvato il template si va su Modello -> Modifica HTML e si cerca la sezione <b:skin> che nei modelli ufficiali si trova intorno alla ottava, 12-esima riga. Si clicca sulla freccetta alla sua sinistra per visualizzare tutto il codice al suo interno. Dovremo trovare con Ctrl+F l'ultima riga della sezione che è la seguente ]]></b:skin> quindi subito sopra a questa si incolla questo codice

.sidebar h2  {
font-size:24px !important; /* dimensione caratteri */
color:#f00 !important/* colore testo */
background-color:#ff0; /* colore sfondo */
font-style:italic !important; /* corsivo */
font-family:Georgia !important; /* Famiglia di font */
text-align:center; /* allineamento al centro*/
}

Si salva il modello. Ecco come cambia l'aspetto dei titoli dei widget

personalizzare-titoli-widget

Come già detto si possono eliminare le righe che riguardano modifiche che non ci interessano. Si possono cancellare anche i commenti colorati di verde che servono solo per indicare il significato dei valori dei vari parametri. Tali valori possono essere evidentemente modificati cambiando i codici dei colori, il nome della famiglia di font o il numero di pixel della dimensione dei caratteri .






Possiamo anche fare di più. Per esempio con questo codice

.sidebar h2  {
font-size:24px !important; /* dimensione caratteri */
color:#f00 !important;  /* colore testo */
background-color:#ff0 !important; /* colore sfondo */
font-style:italic !important; /* corsivo */
font-family:Courier !important; /* Famiglia di font */
text-align:center; /* allineamento al centro*/
border: solid 2px #882c13; /* bordo intorno a titolo */
border-radius: .7em; /* arrotondamento */
padding: .5em; /* distanza bordo da titolo */
}

si aggiunge un bordo arrotondato intorno ai titoli dei widget in questo modo

modifica-titoli-widget

Con questo secondo codice oltre ai parametri già visti si può personalizzare anche lo stile del bordo, il raggio dell'arrotondamento e la distanza tra bordo e titolo. L'unità di misura utilizzata è quella em che prende come base la dimensione standard dei caratteri utilizzati. Quindi .5em significa la metà della dimensione dei caratteri mentre 1.2em significherebbe una dimensione di 1,2 volte






COME MODIFICARE UN TITOLO DI UN SOLO WIDGET


Se decidiamo di modificare l'aspetto del titolo di un solo widget allora sono sempre valide le righe dei CSS ma dobbiamo cambiare la classe a cui applicarle. Si deve trovare quello che è l'ID del widget. Si va su Layout e si clicca su Modifica nell'elemento pagina che ci interessa. Possiamo anche cliccare direttamente sulla icona del cacciavite e chiave inglese che solo il proprietario del sito visualizza quando apre il blog

id-widget-blogger

L'ID del widget sarà la parte finale dell'URL visibile nella barra degli indirizzi della pagina popup che si apre. Si deve quindi copiare la stringa che si trova a destra di widgetId= . L'ID da inserire nel modello sarà quindi quello trovato preceduto dal simbolo del cancelletto. Per il widget del Lettori Fissi sarà #Followers1, per la casella di ricerca ufficiale di Blogger è invece #CustomSearch1 mentre per i widget HTML/Javascript sarà della forma #HTMLX con al posto di X un numero naturale che ne indica l'ordine con cui è stato inserito nel nostro layout. Prendendo come esempio il gadget dei Lettori Fissi il codice da incollare sempre sopra alla stessa riga sarà 

#Followers1 h2 {
font-size:24px !important; /* dimensione caratteri */
color:#f00 !important;  /* colore testo */
background-color:#ff0 !important; /* colore sfondo */
font-style:italic !important; /* corsivo */
font-family:Courier !important; /* Famiglia di font */
text-align:center; /* allineamento al centro*/
border: solid 2px #882c13; /* bordo intorno a titolo */
border-radius: .7em; /* arrotondamento */
padding: .5em; /* distanza bordo da titolo */
}

che porterà a questo risultato

personalizzazione-titolo-widget

Se si volesse personalizzare il titolo della casella di ricerca dovremmo sostituire #Followers1 h2 con #CustomSearch1 h2.  Se si vogliono personalizzare due o più titoli di gadget nello stesso modo ma non tutti allora basterà aggiungerne i relativi ID separati da virgola. La prima riga del codice precedente diventerebbe quindi per esempio

#Followers1 h2, #CustomSearch1 h2, #Label1 h2, #HTML1 h2 {

nel caso si volessero modificare i titoli dei Lettori Fissi, della Casella di Ricerca, del widget delle Etichette e di un widget HTML. Anche in questo caso ovviamente si possono eliminare le righe delle personalizzazioni che non ci interessa applicare.


14 commenti :

  1. Ciao Ernesto,
    Stavo cercando di personalizzare i titoli h2, h3 sul mio blog con nuovo tema Contempo seppur la procedura la conoscevo e riesco a farla "in prova" cliccando "ispeziona elemento" e copiando i css di un altro mio blog, non riesco poi a concretizzarla nella pagina html. Sono sicura di sbagliare la prima parte ".sidebar h2 {" ho provato vari nomi ".h2" - ".blog-post h2" pure copiando il css path ma niente.
    Se hai già avuto a che fare con questo nuovo tema magari mi puoi illuminare.
    Grazie.

    RispondiElimina
    Risposte
    1. Non mi ricordo di essermi già occupato della modifica delle Intestazioni dei nuovi Temi anche perché hanno tutti un codice diverso uno dagli altri e quindi è dispendioso farci dei post
      @#

      Elimina
    2. Errore mio. Qualcosa avevi scritto sui nuovi temi responsive di blogger per cui, erroneamente, immaginavo avessi "giocato" con i vari codici facendo esperimenti.
      Se può essere utile ai lettori del tuo blog confermo che la velocità del sito è aumentata con il cambio del tema, c'è una lettura migliore sui vari schermi (tablet...). Per il resto, miglioramenti seo, risposta di google al cambio del template ecc.. vedrò con il tempo se ho fatto bene o male.
      Buon fine settimana.

      Elimina
  2. scusa Ernesto ho una domanda anche su questo tema: è possibile "giustificare" il testo del widget di informazioni sulla colonnina di destra dove c'è il nome del proprietario del blog? intendo rendere il contenuto del testo rettangolare senza spazi asimmetrici fra le parole finali?

    RispondiElimina
    Risposte
    1. Prova a incollare questa riga
      dd.profile-textbox {text-align:justify !important;}
      subito sopra a questa riga
      ]]></b:skin>
      nel Tema e poi salva
      @#

      Elimina
    2. SCUSA IN che stringa si trova ]]> ? all'inizio? sotto header, sidebar content, profile...o cosa? sotto che gruppo è ?

      puoi darmi il numerino? non sono bravo a trovare e leggere le stringhe html...

      (a tal proposito non esiste uno schema facile a mappa col disegno per capire ogni stringa html a che blocco della pagina si rierisce? )

      avrei bisogno anche di sapere il codice per inserire il widget di ricerca con la lente di ingrandimento per il blog stesso. se possibile.

      Grazie della gentilezza.

      Elimina
    3. L'interfaccia di Blogger è cambiata ma per cercare una stringa di codice si fa così.
      1) Si clicca sulla pagina del codice
      2) Si digita la scorciatoia da tastiera Ctrl + F
      3) Verrà aggiunta una riga in alto nel codice
      4) Si digita la stringa da cercare
      5) Si va su Invio
      6) Tutte le occorrenze della stringa verranno evidenziate
      Non c'è una corrispondenza tra numero di riga e stringa. Dipende da molti fattori. Leggi questo post
      https://www.ideepercomputeredinternet.com/2020/09/blogger-bacheca-impostazioni-tema.html
      e qui c'è il video tutorial
      https://youtu.be/Po0YS9eEGnE
      Per le istruzioni su come cercare il codice vai al minuto 30 e 50 secondi.
      E' pure mostrato come cercare la riga indicata nel commento 2.a
      P.S Forse ti conviene consultare tutto il video per avere le idee più chiare di quello che si può fare e di quello che non si può fare
      @#

      Elimina
  3. L'ho attaccato sia così:
    dd.profile-textbox {text-align:justify !important;}]]>

    sia così:
    dd.profile-textbox {text-align:justify !important;}
    ]]>

    sia così:
    dd.profile-textbox {text-align:justify !important;
    }]]>

    e non mi giustifica in nessun modo. ho sbagliato qualcosa?

    la stringa in cui mi dà il b:skin è la n°384. nel blocco c'è questi elementi qui subito sopra:
    #footer {
    width:660px;
    clear:both;
    margin:0 auto;
    padding-top:15px;
    line-height: 1.6em;
    text-transform:uppercase;
    letter-spacing:.1em;
    text-align: center;
    }
    .Header .description {
    font-size: 15px
    }]]>

    è GIUSTO O SBAGLIATO? è un'altra b skin dove devo inserirla?

    RispondiElimina
    Risposte
    1. Vedo che tu non sai come inserire il codice HTML nei commenti. Leggiti questo post
      https://www.ideepercomputeredinternet.com/2017/02/codice-html-commenti-blogger.html
      Nella fattispecie presumo ti riferisca a questo blog
      pop-e-orrori.blogspot.com
      per giustificare il testo del widget nella sidebar. Il destro del mouse non è supportato nella pagina quindi non posso analizzare il codice. Probabilmente il codice che hai incollato te l'ho indicato io.
      Questa riga di codice è nel modello di Blogger
      ]]></b:skin>
      e non la devi toccare! Serve solo come riferimento per incollare sopra di essa i codici CSS. Il selettore del tuo widget dovrebbe essere dd.profile-textbox
      quindi il codice da incollare subito sopra alla riga indicata dovrebbe essere
      dd.profile-textbox {text-align:justify !important;}
      oppure
      dd.profile-textbox div {text-align:justify !important;}
      Non posso controllare il selettore perché hai disabilitato il destro del mouse e ci metterei troppo tempo ad andare nel sorgente pagina
      @#

      Elimina
    2. @# Ho analizzato meglio il tuo codice anche con il destro disabilitato e il codice da aggiungere, sempre sopra alla riga indicata nel commento 3.a è questo
      #sidebar-wrapper {text-align: justify;}

      Elimina
  4. si ha funzionato e io ti ringrazio. però ti consiglio di spiegarla diversamente a livello di comunicazione per chi non sa nulla di html, perchè se non gli vai chiarendo che la parentesi GRAFFA finale di--> justify;} deve andare al rigo sotto e toccare le parentesi quadre --->]] di b:skin, la gente lo inserirà sempre male.

    l'espressione "attaccarlo subito sopra" è poco chiara. significa poco in quell'apparente casino del html.

    (infatti all'inizio non mi ha funzionato). QUi non si tratta di non conoscere html ma di capire come è strutturata la cosa tramite una comunicazione chiara. (e in rete ce n'è così poca). Te sei comunque bravissimo sia chiaro.

    (grazie anche di averci chiarito che nei commenti incollare html non funziona xchè l'altra persona non vede bene i codici. Insomma è sempre tutto molto pesante e da studiare ANCHE quando si tratta di sta roba. Mai una gioia :D ).

    spero di non romperti più le palle. Buone feste.

    RispondiElimina
    Risposte
    1. Non occorre che la parentesi graffa vada al rigo di sotto insieme a ]]></b:skin> in questo modo }]]></b:skin>. Anzi è meglio che non ci vada andare anche se è irrilevante. Molti utenti di Blogger non riescono a personalizzare i Temi proprio perché hanno una parentesi graffa prima di
      ]]></b:skin>
      senza che se ne accorgano e che è sempre meglio separare perché se incolli il codice prima della parentesi graffa non funzionerà. Per farlo si inserisce il cursore tra la graffa e il resto della riga per poi andare su Invio. La maggior parte di chi mi segue lo fa da anni e quindi è abbastanza esperto. Mi rendo conto che per chi si avvicina a questi temi per la prima volta è più complicato comunque cerco di prendermi carico anche di queste problematiche e faccio spesso dei video tutorial per rendere le cose più chiare.
      @#

      Elimina
    2. cioè vorresti dirmi che se li stacco, funziona uguale? Proverò ora non ho tempo.
      Fatto sta che a me all'inizio non ha funzionato, mettendo il codice "subito sopra" il bi skin con le parentesi quadre sotto.
      La graffa va staccata comunque e messa al rigo sotto. (e sotto ancora c'è il b skin) E' questo il nodo se ho capito bene come funziona. quindi questo va comunicato.

      In realtà basterebbe guardare come sono fatti gli altri codici sopra, per arrivare a capire il meccanismo, e questo lo capisco (e l'ho fatto infatti), però a livello di comunicazione non funziona molto. Lo dico xchè il tuo blog è quasi perfetto a livello di chiarimenti.

      e Grazie.

      Elimina
    3. Puoi mettere anche più spazi tra un blocco e un altro oppure non mettere nessuno spazio. Funziona lo stesso. Il codice del commento 3.b lo puoi incollare così

      #sidebar-wrapper {text-align: justify;}

      in una sola riga oppure in tre righe così

      #sidebar-wrapper {
      text-align: justify;
      }

      come sono strutturati i blocchi di Blogger. Non fa differenza nel risultato finale. Purtroppo nella nuova interfaccia non c'è più il pulsante per la formattazione automatica che metteva in ordine tutto il codice con un click senza modificarlo. Invece quel pulsante lo hanno messo nei post ed è molto utile.
      @#

      Elimina

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