Pubblicato il 23/04/16e aggiornato il

Come personalizzare l'aspetto di un singolo widget di Blogger.

Come modificare aspetto di titolo, colore, sfondo e link di un determinato widget di Blogger lasciando inalterati gli altri.
Nei blog su piattaforma Blogger con l'introduzione del Designer Modelli è possibile personalizzare l'aspetto dei widget presenti nella sidebar o nel footer. Dopo aver salvato il template si va su Modello > Personalizza > Avanzato > Gadget. Nella colonna di destra si potranno in questo modo scegliere la famiglia e la dimensione del carattere del titolo, il suo colore e eventualmente anche il grassetto o il corsivo.

Dopo le modifiche bisogna sempre andare in alto a destra su Applica al blog per rendere le modifiche effettive. In basso si visualizzerà l'Anteprima dei cambiamenti introdotti prima di averli salvati. Da notare che di default i titoli dei gadget hanno l'aspetto determinato dallo stesso CSS usato per la data dei post. Utilizzare il Designer Modelli nei template che hanno subito delle personalizzazioni non è però consigliabile visto che talvolta basta cliccare su Personalizza per perdere molte di queste modifiche. Inoltre con il Designer Modelli non si può intervenire nello sfondo del widget, nel colore del testo o in quello dei link.

modificare-titolo-widget-designer-modelli

In questo post vedremo come personalizzare l'aspetto di un singolo widget lasciando inalterati tutti gli altri. Si tratta di una soluzione interessante qualora si volesse evidenziare un particolare gadget.

 

TROVARE L'ID DEL WIDGET DI BLOGGER


Per qualsiasi modifica di un gadget occorre conoscere il suo ID univoco. Potremmo usare i tool Ispeziona Elemento di Chrome o Analizza Elemento di Firefox ma è molto più semplice ricavare l'ID in modo empirico. Si va su Layout quindi si clicca su Modifica nell'elemento in oggetto e si scorre fino in fondo l'indirizzo della finestra che si apre 

id-widget-blogger

L'ID del widget è la stringa che si trova dopo widgetId= e che è evidenziato di giallo nello screenshot. Nel test che ho effettuato ho preso un gadget delle etichette con Label1 come ID. Se fosse stato un widget HTML/Javascript il suo ID sarebbe stato HTMLX con X un numero naturale che dipende dalla cronologia della sua installazione (il primo widget installato nel modello sarà HTML1, il secondo HTML2 e così via). Per personalizzare il widget si va su Modello > Modifica HTML e si cerca la sezione <b:skin>. Si clicca sulla freccetta nera alla sua sinistra per visualizzare tutto il codice della sezione. Poi con Ctrl+F si cerca la riga ]]></b:skin> quindi, subito sopra, si incolla questo codice

#Label1 {
background:#ffffe0;
padding-left:15px;
font:14px Georgia;
border-bottom:2px dotted #8b8b00;
}
#Label1 h2 {
padding-top:10px;
font-size:20px;
color:#fd3835;
}
#Label1 a:link {
color:#d239d0;
text-decoration:none;
}
#Label1 a:visited {
color:#34d808;
text-decoration:none;
}
#Label1 a:hover {
color:#6414f3;
text-decoration:underline;
}

L'ID Label1 è solo indicativo e deve essere sostituito dall'ID del widget che vogliamo personalizzare. I quattro blocchi di codice servono rispettivamente per personalizzare tutto il widget, personalizzare il suo titolo, il colore dei link, il colore dei link visitati e quello dei link puntati dal mouse. Si salva il modello e le modifiche introdotte porteranno a questo risultato

personalizzazione-widget-blogger

I parametri ei tag utilizzati riguardano i codici dei colori, lo stile del bordo e la famiglia dei caratteri. Naturalmente possono esserne aggiunti anche altri. Chi volesse approfondire questo tema può scaricare il mio e-book gratuito Guida all'HTML e al CSS.




2 commenti :

  1. Salve Signor Ernesto. Questo mio commento non c'entra niente con questo post. Innanzitutto inizio con congratularmi con Lei per l'ottimo lavoro che svolge; le sue guide sono molto esaurienti. Volevo chiederLe se fosse possibile realizzare un post in cui spiega come è possibile creare in blogger un'area riservata. Le spiego meglio: gestisco un sito bloger; questo sito è stato trasformato con dominio personalizzato (es. rossi.it senza più l'appoggio a blogspot), vorrei creare un'area riservata per i miei collaboratori in modo tale da non fornire a tutti email e password o dando la possibilità di modificare tutto e di più ma limitarli ad usare un login e una password per gestire una o più pagine all'interno del sito.Cercando su google ho trovato delle "guide" per wordpress ma niente di niente di blogger. Lei sarebbe così gentile da fornirmi maggiori spiegazioni? Credo che questo potrebbe essere un suggerimento a tutti coloro che gestendo il proprio sito in collaborazione con altri potranno mettere dei "limiti". Quindi ricapitolando: vorrei creare un area riservata composta da login e password e affidare ad ogni collaborare una pagina da gestire in piena autonomia, evitando la possibilità di modificare altro.

    RispondiElimina
    Risposte
    1. Al massimo su Blogger possiamo fare quello che è illustrato in questo post
      http://www.ideepercomputeredinternet.com/2015/11/blogger-password-privacy.html
      Non si può configurare una parte del blog come privata e una come pubblica ma si dovrebbero creare due blog distinti anche se potrebbero essere uniti in una specie di network
      http://www.ideepercomputeredinternet.com/2012/06/creare-dei-sottodomini-di-un-dominio.html
      http://www.ideepercomputeredinternet.com/2012/06/come-creare-un-network-di-blog-su.html
      @#

      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.