Come modificare il colore di background del footer di un blog di Blogger

Per cambiare il colore di sfondo solo nel footer (piè di pagina),la sezione in basso in un blog di Blogger,in modo da evidenziare il suo contenuto è possibile aggiungere da “Aggiungi un CSS” il seguente foglio di stile CSS

.footer-inner {
  background: #ff0000 ;
}

come cambiare sfondo background footer blog blogger 

Per modificare il colore dello sfondo da applicare al footer del blog di Blogger è necessario sostituire nel CSS indicato sopra, al rosso (#ff0000) un diverso colore inserendo il relativo codice esadecimale.

38 commenti:

  1. Queste istruzioni mi sono state utilissime. Grazie.

    RispondiElimina
  2. Ciao Ambra,
    sono felice che il post ti sia stato utile!
    Grazie a te per il commento!
    Ciao e buon pomeriggio:)
    Fabrizio

    RispondiElimina
  3. Grazie come al solito, Fabrizio.
    Mi chiedo se tu abbia il codice di un antipixel di uno dei tuoi blog, perchè vorrei inserirlo nella sezione in cui segnalo i blog utili per la grafica. Fammi sapere, un saluto :)
    Giuliana

    RispondiElimina
  4. Grazie a te Giuliana! Sono felice che il post ti sia stato utile!
    Questo è il link ad un mio antipixel personale collegato al profilo Google
    http://screenshotperblog.blogspot.com/2011/11/antipixel-fabri-castelli.html
    se ti fa piacere puoi utilizzarlo con quel link o con il collegamento ad uno dei miei blog.
    Ancora grazie e tanti auguri di un bellissimo 2012!
    Fabri

    RispondiElimina
  5. Seguendo le tue istruzioni ho messo il footer nel blog,grazie mille per la guida cosa non farei senza dite. Un saluto Ornella

    RispondiElimina
  6. Benissimo!
    Grazie a te Ornella,sei molto gentile:)
    Ciao
    Fabri

    RispondiElimina
  7. Ho seguito le tue istruzioni,ma non è cambiato nulla.Sono imbranata però!!!Ciaooooooo

    RispondiElimina
  8. ho risolto il problema,grazie.ciaoooooooooo

    RispondiElimina
  9. Bravissima!
    Grazie a te per l'aggiornamento:)
    Ciao
    Fabri

    RispondiElimina
  10. ha funzionato! grazie! è possibile inserire anche un'immagine come sfondo?

    RispondiElimina
  11. Ciao e se volessi modificare le misure del backgroung come dovrei fare??

    RispondiElimina
  12. Ciao Anna,
    ti riferisci alla larghezza complessiva delle colonne oppure all'immagine di sfondo?
    Ciao
    Fabrizio

    RispondiElimina
    Risposte
    1. Voreei modificare la larghezza dell'immagine di sfondo che nel mio caso sarebbe bianca...che sarebbe l'equivalente della parte blu scuro di questo blog. Inoltre non posso modificarla da da modello-personalizza...
      ti lascio il link del mio blog http://makeuplifeandcolors.blogspot.it/

      Elimina
  13. Ciao Anna,
    desideri quindi estendere lo sfondo bianco anche alla parte esterna attualmente colorata(#F3E8E8)?
    Ciao
    Fabrizio

    RispondiElimina
    Risposte
    1. ciao, non proprio vorrei solamente allargare la pagina bianca di qualche centimetro, mantenendo però la parte rosa separata da quella bianca...spero di essermi spiegata :)

      Elimina
  14. In questo caso dovresti proprio individuare nel codice HTML del tuo blog la larghezza in pixel del blog e provare ad aumentare il valore con una modifica HTML:
    http://www.comefareblog.com/2011/09/come-modificare-codice-html-del-modello.html
    è possibile però che essendo il tuo un template personalizzato sia necessario poi modificare altri valori.
    Ciao
    Fabri

    RispondiElimina
  15. Ciao Fabrizio, volevo sapere se era possibile oltre al cambio di colore anche aumentare la lunghezza del footer in modo che occupi tutta la pagina :)

    RispondiElimina
  16. Ciao Roberto,
    generalmente la dimensione del footer corrisponde al 100% della larghezza disponibile, controlla comunque quali sono le dimensioni del foofer del tuo blog dalla finestra con il codice del template:
    http://www.comefareblog.com/2013/04/la-nuova-versione-dell-editor-html-del.html
    Ciao
    Fabri

    RispondiElimina
    Risposte
    1. Si lo so ma qui per esempio ( un mio blog di prova ) http://blogdiprovabaffo.blogspot.it/ questo template l'ho scaricato da internet , come puoi vedere il centro con post e widget non è al 100% ma ristretto, mentre il footer invece è largo tutta la pagina :) volevo ricreare un effetto simile

      Elimina
  17. In questo caso dovresti proprio provare a replicare la struttura della sezioni di quel template che troverai nella finestra con l'intero codice.
    Ciao
    Fabri

    RispondiElimina
    Risposte
    1. ho provato come hai detto, modificato .footer-outer aggiungendo i codici presenti nel template del blog di prova..niente, la larghezza rimane quella :( grazie comunque per il tuo aiuto!

      Elimina
  18. Se dovessi individuare altre soluzioni da provare ti aggiornerò con piacere!
    Ciao e buon pomeriggio!
    Fabri

    RispondiElimina
  19. Ciao, è possibile sostituire il colore con una immagine di sfondo?

    RispondiElimina
  20. Ciao Edoardo,
    prova con
    .footer-inner {
    background: url(INDIRIZZO IMMAGINE) no-repeat top center;
    }
    Sostituendo dentro la parentesi a INDIRIZZO IMMAGINE l'URL dell'immagine online che desideri utilizzare.
    Ciao
    Fabrizio

    RispondiElimina
  21. vado in personalizza->css oppure modifica html?
    Grazie per la rapidissima risposta!

    RispondiElimina
  22. Sì, da "Personalizza">"Aggiungi un CSS".
    Ciao
    Fabrizio

    RispondiElimina
  23. Ciao Fabrizio, è modificabile invece la trasparenza del footer?

    RispondiElimina
  24. Ciao AmazingMilan
    controlla eventualmente nel template se la trasparenza è ottenuta attraverso un'immagine.
    Ciao
    Fabrizio

    RispondiElimina
  25. ma se io lo voglio il mio footer trasparente cioe senza colore ma ce mi compaia lo sfondo del blog come faccio??

    RispondiElimina
  26. Ciao Principessa,
    puoi aggiungere nel CSS l'elemento:
    opacity: 0.5
    Per regolare il grado di trasparenza, puoi usare valori da 0.0 (completamente trasparente) a 1 ( completamente opaco).
    Buona giornata
    Fabrizio

    RispondiElimina
  27. Grazie, post che ho trovato utilissimo per il mio blog!

    RispondiElimina
  28. Ciao Antonio, sono felice che il post ti sia stato d'aiuto!
    Grazie a te per il commento!
    Ciao e buona giornata
    Fabrizio

    RispondiElimina
  29. Ciao piacere di conoscerti! Complimenti per il blog e tutte le utilissime informazioni presenti. Una domanda.. Sono riuscita a cambiare lo sfondo ma non riesco a cambiare il colore del testo dei gadget. Vorrei cambiare solo il colore del testo di quelli nel footer.. Ho provato da modifica html a inserire color #000000 nei footer-innerma non cambia il colore. Mi puoi aiutare per favore?
    Grazie

    RispondiElimina
    Risposte
    1. Salve Laura,
      prova ad aggiungere un CSS specifico per ogni singolo gadget nel quale desideri visualizzare un colore diverso.
      (Per trovare l'ID del gadget da indicare nel CSS utilizza le indicazioni di questo post http://testperblogger.blogspot.it/2010/11/come-conoscere-codice-widget-id-gadget.html )
      Ciao e grazie a te per i complimenti!
      Fabrizio

      Elimina
    2. Grazie mille per i suggerimenti, studiandoci un po' ho trovato la sintassi giusta e specifica come hai detto tu per il Widget. Se può essere d'aiuto a qualcuno è :
      #footer-1 h2 {font-size:24px; color:#000; font-style:italic; font-family:Arial !important; }

      Grazie ancora :)

      Elimina
    3. Ottimo Laura! Sono felice di esserti stato utile.
      Grazie a te!
      Ciao e buona giornata
      Fabrizio

      Elimina
  30. Mitico. Per adesso grazie Fabrizio, sei una miniera d'informazioni.

    RispondiElimina
  31. Sono felice che il post ti sia stato utile. Grazie a te per le parole di apprezzamento!
    Saluti
    Fabrizio

    RispondiElimina

Se hai bisogno di:
Consulenza ed Ottimizzazione SEO del blog + Assistenza personalizzata 
una proposta realizzata in modo specifico per gli amministratori di  blog di informazione e intrattenimento (fashion, food, news, travel, personali, shopping, artistici/creativi, etc.) su piattaforma WordPress e su Blogger.  

Puoi trovare i dettagli dell'offerta in questa pagina 


Per i lettori di TEST PER BLOGGER è possibile usufruire di una offerta promo, con una riduzione del 30% rispetto al prezzo indicato, utilizzando in fase di acquisto, direttamente dal sito, il codice promozionale: 

promotestperblogger