Pubblicato il 21/03/10 - aggiornato il  | 40 commenti :

Come personalizzare l'aspetto di ogni singolo widget (gadget) in Blogger.

In quasi tutti i modelli di Blogger i widget (o gadget che dir si voglia) hanno tutti lo stesso aspetto in quanto questo viene definito dallo stessi fogli di stile presenti nella sezione </b:skin> del template. Se si ha la necessità di visualizzarli in modo diverso dobbiamo operare modificando lo stile di ciascun widget. E' ovvio che quelli non modificati continueranno ad avere lo stesso aspetto.

Per prima cosa bisogna cercare i widget presenti nel nostro blog e acquisirne il nome. Si va su Layout > Modifica HTML e, senza espandere i modelli widget, nella parte bassa del modello vedremo delle righe di questo tipo

widget-blogger

 Ciascun widget avrà un titolo e un suo ID univoco. Nello screenshot ne sono stati evidenziati alcuni di colore viola. L'ID può essere dato da un nome, per esempio 'BlogArchive1', oppure da HTML seguito da un numero, per esempio

<b:widget id='HTML4' locked='false' title='ULTIMI ARTICOLI' type='HTML'/>

Nel linguaggio HTML una classe di stile può essere creata in due modi. Il primo è quello di mettere un punto prima della classe stessa il secondo di inserire un cancelletto. Nel primo caso si tratta di classi generiche che riguardano situazione generali ad esempio .post-footer, mentre nel secondo sono relative ad un elemento più specifico, per esempio #sidebar.

In ogni caso la caratterizzazione dello stile deve essere messa all'interno di parentesi graffe e viene una cosa di questo tipo

#sidebar a:visited {
color: $sidebarVisitedLinkColor;
}

che determina l'aspetto dei link visitati nella sidebar. Se vogliamo quindi modificare l'aspetto di un singolo widget dobbiamo inserire delle classi di stile specifiche per quello che ci interessa. Se vogliamo cambiare quello degli "Articoli recenti Blogger" vediamo nello screenshot che ha come identificazione id='HTML7', più precisamente

<b:widget id='HTML7' locked='false' title='ARTICOLI RECENTI BLOGGER' type='HTML'/>

 Prima delle modifiche ha questo aspetto

articoli-recenti-blogger

 

Andiamo in Layout > Modifica HTML e, dopo aver salvato il template, cerchiamo la riga

]]></b:skin>

quindi, immediatamente sopra, incolliamo un codice di questo tipo

#HTML7 {
background:#FFF4BF;
padding-left:10px;
font:12px Arial;
border-bottom:2px solid #FFE25F;
}

#HTML7 h2 {
background: url(http://3zuang.blu.livefilestore.com/y1pGmmxIte9B0eR8J0IBtC5APd8Tjr06EcKooInHFiRpmYI9dE-VQ2augfq2FID3nNezzGMD1KIdfQCdm0HulZmkHeHVXjNAK98/articoli-recenti-blogger.jpg) no-repeat bottom left;
height:35px;
padding-top:10px;
font-size:0px;
}

#HTML7 a:link {
color:#5F5F5F;
text-decoration:none;
}
#HTML7 a:visited {
color:#940F04;
text-decoration:none;
}
#HTML7 a:hover {
color:#800080;
text-decoration:underline;
}

In basso si va su Salva Modello. E' chiaramente solo di un esempio di come personalizzare l'aspetto di un widget e quindi il codice può essere cambiato come ci pare. E' suddiviso in cinque blocchi ognuno con un suo compito.

La prima parte del codice, evidenziata di blu, riguarda la personalizzazione del widget nel suo complesso e può essere utilizzato per inserire un colore di sfondo (background) sfruttando i codici dei colori. Si può personalizzare anche il bordo e la posizione del widget. Può essere utile quando in una sidebar c'è un gadget che non è perfettamente allineato o che vogliamo evidenziare in modo particolare.

La seconda parte del codice, evidenziata di viola, definisce l'aspetto del Titolo del widget e, in questo caso, è stata inserita un immagine di background il cui URL è stato messo in grassetto e di colore diverso.

La terza parte, è evidenziata di verde, riguarda i colori che assumono i link, quelli visitati e quelli puntati dal mouse. Possono essere scelti in qualsiasi modo. 

Ho messo online anche la dimostrazione di questa personalizzazione. Il risultato non è eccellente dal punto di vista estetico ma è stata inserita in un minuto solo per testare l'hack. Certamente voi farete di meglio. Infine ricordo che ogni template fa storia a se e non è detto che le personalizzazioni siano universalmente possibili. Inoltre se si usa il nuovo Designer Modelli di Blogger, invece di inserire il codice prima della riga   ]]></b:skin> si può andare in Avanzato > Aggiungi CSS e incollarlo nel campo sulla destra quindi salvare il modello dopo aver controllato l'anteprima.




40 commenti :

  1. ciao parsifal. è parecchio che ti leggo e approfitto dei tuoi tutorial e finalmente mi decido a scriverti. oltre alle congratulazioni volevo chiederti se c'è un modo per posizionare i singoli widget con l'HTML. Ho un template modificato su blogger e designer modelli ed elementi pagina non funzionano correttamente. grazie!

    RispondiElimina
  2. @CercoSanso
    Non so se ho ben compreso la domanda. Vorresti posizionare il widget meglio perché è troppo a destra, troppo a sinistra o troppo in alto?
    Se è così devi trovare l'ID del widget in genere è HTMLX con un numero al posto della X e creare un CSS di questo tipo
    #HTMLX {
    margin-left: ...;
    margin-top: ...;
    }
    da inserire prima della riga che contiene
    /b:skin
    Quando ho tempo potrei farci anche un post. Se invece ti riferisci al fatto che in questo periodo molti widget non funzionano. Questo accade soprattutto con Chrome e questo è strano visto che è di Google come Blogger. Bisogna provare a togliere i cookie e rinfrescare la pagina o alternativamente a reinstallare il widget.

    RispondiElimina
  3. wow! non pensavo di ricevere una risposta così in fretta. io uso chrome infatti e ho scaricato una template per gallerie fotografici trovata qui nel tuo sito. mi ha dato subito problemi, ma amen. Amo smanettare :) Negli elementi pagina i gadget sono tutti sfalsati e non riesco a posizionarli, quindi sono un po in alto mare :) vorrei mettere i "post più popolari" di fianco alla slide, se hai visto il mio bloggherino.

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

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

    RispondiElimina
  6. problema risolto. per visualizzare i post i widget dove voglio, al tuo codice ho modificato così:

    #HTMLX {
    margin-left: ...;
    margin-top: ...;
    }

    #HTMLX {
    left: ...;
    top: ...;
    position: fixed
    }

    grazie parsi!

    RispondiElimina
  7. Ernesto allora per avere il titolo del Widget così -> Visualizzazioni totali
    e non come l'ho attualmente cioè così -> VISUALIZZAZIONI TOTALI
    ho inserito il codice text-transform:capitalize; dopo il codice che ha h2 { come mi hai detto tu e il risultato è stato ->
    /* Headings
    ----------------------------------------------- */
    h2 {text-transform:capitalize;
    margin: 0 0 1em 0;

    Ma continuo ad avere scritto VISUALIZZAZIONI TOTALI e non Visualizzazioni totali :(

    Mi puoi dire come devo fare ?

    RispondiElimina
  8. @Rossovermiglio
    Il tuo blog è molto personalizzato. Prova a inserire questo codice

    .fauxcolumn-left-outer .fauxcolumn-inner h2 {
    text-transform:capitalize !important;
    }
    .fauxcolumn-right-outer .fauxcolumn-inner h2 {
    text-transform:capitalize !important;
    }
    subito sopra la riga

    /* Headings
    ----------------------------------------------- */
    Però non garantisco ...

    RispondiElimina
  9. .fauxcolumn-left-outer .fauxcolumn-inner h2 {
    text-transform:capitalize !important;
    }
    .fauxcolumn-right-outer .fauxcolumn-inner h2 {
    text-transform:capitalize !important;
    }
    h2 {text-transform:capitalize;
    margin: 0 0 1em 0;

    /* Headings
    ----------------------------------------------- */
    h2 {text-transform:capitalize;
    margin: 0 0 1em 0;


    Così intendi???

    RispondiElimina
  10. Ci sono riuscito grazie mille :)

    RispondiElimina
  11. Ernesto adesso come posso fare per diminuire la grandezza? :) purtroppo da blogger non è più gestibile la grandezza e penso bisogna intervenire direttamente sull'html e io non so proprio come fare,

    Grazie in anticipo per la risposta

    RispondiElimina
  12. @Rossovermiglio
    La grandezza di che? Dei caratteri? Vai su Modello > Personalizza e cerca titoli widget per applicare le modifiche

    RispondiElimina
  13. Si la grandezza dei titoli del widget, ho fatto come hai detto tu ma non me la modifica io passo da 15px a 10px però la grandezza rimane sempre quella non diminuisce hai qualche suggerimento? io penso si debba intervenire sull'html

    RispondiElimina
  14. @Rossovermiglio
    Visto che hai il profilo non disponibile ti prego la prossima volta che commenti di incollare l'URL del tuo blog altrimenti mi riesce difficile aiutarti.
    Credo di averlo trovato. Prova a sostituire questo codice
    .fauxcolumn-left-outer .fauxcolumn-inner h2 {
    text-transform:capitalize !important;
    }
    .fauxcolumn-right-outer .fauxcolumn-inner h2 {
    text-transform:capitalize !important;
    }
    h2 {text-transform:capitalize;
    margin: 0 0 1em 0;
    /* Headings
    ----------------------------------------------- */
    h2 {text-transform:capitalize;
    margin: 0 0 1em 0;
    font: normal normal 11px 'Times New Roman', Times, FreeSerif, serif;
    color: #ffffff;
    text-transform: uppercase;
    }
    con quest'altro
    .fauxcolumn-left-outer .fauxcolumn-inner h2 {
    text-transform:capitalize !important;
    font-size:200% !important;
    }
    .fauxcolumn-right-outer .fauxcolumn-inner h2 {
    text-transform:capitalize !important;
    font-size:200% !important;
    }
    h2 {
    margin: 0 0 1em 0;
    /* Headings
    ----------------------------------------------- */
    h2 {
    margin: 0 0 1em 0;
    font: normal normal 11px 'Times New Roman', Times, FreeSerif, serif;
    color: #ffffff;
    text-transform: uppercase;
    }
    dove il 200% lo puoi anche aumentare

    RispondiElimina
  15. Scusami Ernesto non so come mai il mio profilo non sia disponibile, comunque ho messo il codice che mi hai dato tu ma i titoli del widget restano sempre della stessa grandezza nonostante io vari il 200%

    Il codice che ho inserito si presenta così:

    /* Columns
    ----------------------------------------------- */
    .main-outer {
    border-top: $(main.border.width) solid $(body.rule.color);
    }

    .fauxcolumn-left-outer .fauxcolumn-inner h2 {
    text-transform:capitalize !important;
    font-size:150% !important;
    }
    .fauxcolumn-right-outer .fauxcolumn-inner h2 {
    text-transform:capitalize !important;
    font-size:150% !important;
    }
    h2 {
    margin: 0 0 1em 0;
    /* Headings
    ----------------------------------------------- */
    h2 {
    margin: 0 0 1em 0;
    font: normal normal 11px 'Times New Roman', Times, FreeSerif, serif;
    color: #ffffff;
    text-transform: uppercase;
    }

    /* Widgets
    ----------------------------------------------- */

    Il sito del mio blog è questo ->http://rossovermiglioilblog.blogspot.com/

    RispondiElimina
  16. Ernesto avendo messo il tuo codice ora non mi fa modificare nemmeno la grandezza del testo delle schede come posso fare? I comandi per diminuire la grandezza per qualsiasi elemento del blog non rispondono piu :(

    RispondiElimina
  17. @Rossovermiglio
    Se il codice che ti ho postato ti dà dei problemi, lo puoi togliere. Consiglio sempre di salvare il modello prima di fare qualsiasi modifica.
    Lo vedo solo adesso ma hai una riga
    text-transform: uppercase;
    che era quella che trasformava tutto il testo del titolo del widget in maiuscolo. Quindi togli il codice che ti ho indioato ma toglie anche quella riga se vuoi eliminare il maiuscolo.
    Per aumentare la grandezza del carattere, nel caso in cui lasciassi il mio codice, puoi provare a mettere il valore invece della percentuale cioè sostituire le due righe
    font-size:150% !important;
    con
    font-size:24px;

    RispondiElimina
  18. Perfetto Ernesto ho risolto tutto grazie infinitamente, solo che da quando ho aggiustato questo io prima vicino ai commenti il pulsantino per condividere sulle varie piattaforme da quanto ho aggiustato non compare più, ogni cosa che aggiunto ad esempio anche etichetta sotto il post centrale non me la carica come mai adesso cista questo problema? :(

    RispondiElimina
  19. @Rossovermiglio
    Non credo che dipenda dalla modifica del codice. Comunque puoi sempre caricare il modello che avrai certo salvato per sicurezza. Per far comparire i pulsanti di condivisione devi andare su Layout > Post sul Blog > Modifica e seguire le istruzioni di questo post
    http://www.ideepercomputeredinternet.com/2010/12/impostazioni-per-configurare-il-post-su.html
    Prova anche con un altro browser perché spesso questi problemi sono dovuti a problemi relativi a un particolare browser. Passa per esempio a Firefox se usi IE oppure a Chrome o a Opera per vedere se il problema permane oppure fai l'aggiornamento.

    RispondiElimina
  20. Perfetto ho aggiustato tutto anche se ho seguito la tua guida correlata per eliminare un bottoncino come quello della condivisione su un altro blog di blogger ma il bottoncino non si è tolto purtroppo. Sempre grandissimo sei stato Ernesto, avrei una domanda da farti però avendo cambiato lo sfondo al blog è uniforme da tutte le parti tranne dietro al titolo come puoi ben vedere ->http://rossovermiglioilblog.blogspot.com/ vorrei togliere quella parte scura e rendere tutto uniforme sai dirmi come fare? mi sono scervellato per 3 ore e non sono riuscito a fare niente, sono andato in Design ->Intestazione->carica sfondo dietro il titolo del blog ma mi sfalsa tutto mettendomi il titolo perpendicolare e la striscia nera permane, hai qualche suggerimento in merito?

    GRAZIE DI CUORE :) per tutto

    RispondiElimina
  21. @Rossovermiglio
    Prova a sostituire questo URL
    http://www.blogblog.com/1kt/simple/gradients_deep.png
    con quest'altro
    http://1.bp.blogspot.com/-wGVWfycD2qY/TyXfazn6sMI/AAAAAAAAArA/eBQCMU9SRl0/s0/1.gif
    Non so però se funzionerà.

    RispondiElimina
  22. Sei un GENIO! GRAZIE MILLE funziona tutto, sei stato a dir poco grandioso :) ancora grazie alla prossima ;)

    RispondiElimina
  23. Ciao Ernesto, nel mio blog il titolo dei widget e di default maiuscolo (es. TITOLO). Come posso personalizzare il titolo di un singolo widget per farlo diventare minuscolo (es. Titolo)?

    RispondiElimina
    Risposte
    1. @Lacucinaimperfetta
      C'è una riga di codice del genere anche nel mio modello. Devi cercare questo codice

      text-transform: uppercase;

      e toglierlo. Magari prima salva il modello. Potrebbe esserci non solo per i widget ma anche per l'Header quindi scegli la sezione giusta

      Elimina
    2. Ok funziona!!! Grazie mille

      Elimina
  24. Ho seguito questo procedimento mille volte ma i gadget non cambiano aspetto.
    A cosa può essere dovuto?

    RispondiElimina
    Risposte
    1. @Startfromscratch
      Si tratta di una procedura collaudata. Se non ti funziona significa che hai inserito dei comandi sbagliati o che non hai rilevato bene l'ID dei widget.

      Elimina
  25. ciao Ernesto, innanzitutto devo ringraziarti perché grazie al tuo blog sono riuscita a personalizzare il mio con le mie più che basiche conoscenze di html e css! Ho inserito un widget per le etichette sotto il header, personalizzandolo senza problemi, ma... l'unico problema è che quando si va alla pagina dell'etichetta, il link attivo rimane con un font, un colore e un'allineamento diverso, dando un effetto estetico brutto...
    non sono brava a spiegarmi, spero che tu riesca a capire...comunque basta che clicchi su uno dei nomi delle etichette e vedrai di quello che sto parlando. Non riesco a trovare dove modificarlo.
    Il blog è in spagnolo ma non credo ti cambi niente...
    Ti ringrazio ancora, ti sarò eternamente debitrice...

    RispondiElimina
    Risposte
    1. @marivitrombetta
      Hai inserito un widget di un elenco di etichette che eredita lo stile dal blog segnatamente da .tabs-inner .widget ul {
      Per modificare quel particolare si dovrebbe mettere mano a tutto il codice del template. Potresti provare a inserire un menù semplice per poi collegarlo alle singole etichette. Ti consiglio per esempio questo
      http://www.ideepercomputeredinternet.com/2011/06/menu-orizzontale-semplice-ma.html

      Elimina
  26. Dopo i miei banali ma immancabili complimenti
    al forse primo faro di riferimento italiano e oltre.
    Come posizionare un widget sovrapposto ad un altro? Es.: Il widget "ultimi post" sopra il widget "intestazione" dove in genere c'è una grande foto di sfondo. In genere sapendo la tecnica sarebbe un modo per i CREATIVI per uscire dagli schemi rigidi del Layout.

    RispondiElimina
    Risposte
    1. @DanieleModica
      Ti ho risposto su Facebook dove mi hai fatto la stessa domanda. In linea di massima si possono inserire dei widget scorrevoli ma un widget sopra a un altro, ma...

      Elimina
  27. celo una domanda come fare lo sfondo trasparente di un singolo widget ???

    RispondiElimina
    Risposte
    1. @# Leggi qui
      http://www.ideepercomputeredinternet.com/2011/01/come-inserire-uno-sfondo-o-una-immagine.html

      Se lo vuoi trasparente sostituisci l'ultimo codice con
      background:transparent url(URL DELLA IMMAGINE DI SFONDO);
      oppure meglio ancora leggiti questo post
      http://www.ideepercomputeredinternet.com/2013/01/codici-colori-trasparenza.html
      e inserisci un colore con trasparenza con il canale alpha

      Elimina
  28. Ciao Ernesto, sempre riguardo le personalizzazioni font, carattere, dimensioni (sia per i titoli che per i link nei gadget) non so per quale motivo alcuni contenuti (tipo liste blog, post popolari ecc) non me li fa cambiare, alcuni si altri no, ho inserito dei font di google ma continua a mostrarmi il vecchio font che usavo i primi tempi con il designer di blogger, avevo tolto i vecchi widget e adesso ho deciso di riaggiungerli ex novo, seguo sempre le stesse istruzioni per gli uni come per gli altri, i post popolari li ho chiamati post correlati ma se vedi il titolo va bene così com'è, mentre il contenuto dovrebbe avere un font differente, (a parte che il widget dei post correlati lo cambierò) ma nel frattempo vorrei capire come cambiare questo carattere... grazie
    http://lemedichessediclo.blogspot.it/

    RispondiElimina
  29. rettifico, forse ci sono riuscita usando
    #PopularPosts1 ul a
    ancora devo capire bene come usare questi codici per i link

    RispondiElimina
    Risposte
    1. Devi usare lo strumento Ispeziona elemento di Chrome
      http://www.ideepercomputeredinternet.com/2015/07/ispeziona-elemento-chrome-selettore-univoco-css-html.html
      o Analizza elemento di Firefox
      http://www.ideepercomputeredinternet.com/2014/12/analizza-elemento-firefox.html
      per trovare i selettori univoci dell'elemento specifico del widget che può essere la miniatura, il titolo, il testo, l'elenco, ecc
      @#

      Elimina
    2. ciao Ernesto grazie, ammetto che avevo sbirciato in ispeziona elemento ma questa volta ho letto meglio i tuoi post e devo dire che è fantastico, si possono davvero risolvere un bel pò di cose, grazie!

      Elimina
  30. ciao ernesto e se si volesse modificare il colore di tutti i titoli dei widget della barra laterale quale codice occorrerebbe inserire?

    RispondiElimina
    Risposte
    1. Non posso rispondere in un commento. Salvo la tua domanda per poi farci un post visto che l'argomento potrebbe interessare anche altri
      @#

      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