Pubblicato il 13/06/09 - aggiornato il  | 17 commenti :

Personalizzazione delle tre colonne inserite nella parte bassa del blog su Blogger.

Come personalizzare nei colori e nei caratteri le tre colonne inserite nel footer di un blog su Blogger.
Nel precedente articolo avevo parlato di

      - Inserimento di tre colonne nella parte bassa del blog -
    Adesso pensiamo a come si può personalizzare le colonne in funzione delle altre sezioni del blog. Per quanto riguarda questo blog per esempio dotted lo sostituisco con dashed perché il bordo tra il post e la sidebar è formato da delle linee tratteggiate. Per quanto riguarda il colore di queste linee prendo quello di default del blog.
    Il codice è stato così cambiato

    #footer-columns {
    border-top:1px dotted #999999;
    clear:both;
    margin:0 auto;
    }
    metto le seguenti righe

    #footer-columns {
    border-top:2px dashed $mainTextColor; clear:both;
    margin:0 auto;
    }

    In rosso sono visualizzate le modifiche effettuate. Oltre che a dotted (linea punteggiata) e a dashed (linea tratteggiata) possiamo scegliere anche altri attributi come solid, groove, ecc.
    Se si sostituisce border-top con border il bordo sarà visibile sull’esterno di tutta l’area bassa del blog. Se invece si aggiunge 


    border-bottom:2px dashed $mainTextColor;

    si creerà un bordo tratteggiato anche nella parte bassa di 2 pixel.
    Per personalizzare i colori possiamo inserire, proprio sotto il codice di cui abbiamo parlato in questo momento, il seguente codice aggiuntivo

    #footer-columns h2 {
    margin:5px 0 5px;
    font-family:Trebuchet MS, arial, verdana, sans-serif;
    font-size:22px;
    font-weight:normal;
    line-height: 1.4em;
    text-transform:none;
    letter-spacing:.1em;
    color:#1A2865;
    }

    In cui le parti in rosso possono essere ovviamente personalizzate. Sono particolarmente importanti la dimensione (22px) e il colore (ho inserito quello dei titoli dei widget del mio blog).
    Per cambiare anche il colore del testo basta aggiungere la riga in rosso (ovviamente personalizzata) alla prima sezione di codice

    #footer-columns {
    border-top:2px dashed $mainTextColor;
    clear:both;
    margin:0 auto;
    color:#1A2865;
    }

    Si può anche inserire un colore di background nel settore delle tre colonne. Occorre aggiungere questo codice
    background:#C6FFFF;
    dopo #footer-columns { . Ovviamente il codice del colore in rosso va scelto seguendo i colori del nostro blog.

    Si potrebbero fare ancora molte cose ma ne voglio sottolineare solo altre due. La prima è quella di inserire i comportamenti e i colori per i link attivi, link visitati e quelli puntati con il mouse.
    Andate su Layout > Colori e caratteri e procuratevi i codici esadecimali di

    1. Colore link
    2. Colore link visitato
    poi cercate il seguente codice a:hover { andando su Layout > Modifica HTML, pigiando su F3 e guardate cosa dice il foglio di stile. Nel mio caso si trova

    image
    che significa che se il mouse punta un collegamento ad un testo o una immagine questo genera una linea tratteggiata rossa nella parte bassa. E’ chiaro che per uniformità amcje nelle tre colonne in basso inserirò lo stesso comportamento.
    Adesso create il seguente codice personalizzato

    #footer-columns a {
    color:#0000FF;
    text-decoration:none;
    }
    #footer-columns a:visited {
    color:#800080;
    text-decoration:none;
    }
    #footer-columns a:hover {
    color:#8B4513;
    text-decoration:underline;
    }

    dove al posto dei colori presenti avrete inserito quelli del vostro blog individuati nel modo indicato.
    Tale codice va inserito sotto questo codice o un altro simile se lo avete già personalizzato

    #footer-columns {
    border-top:1px dotted #999999;
    clear:both;
    margin:0 auto;

    La seconda cosa riguarda le percentuali della larghezza di ciascuna colonna. Ci sono due percentuali per ogni colonna per un totale di sei percentuali. Per un blog dal layout stretto dovrebbero andare bene queste; cioè 31%, 32%, 31% per lo spazio interno e 32%, 33%, 32% per quello esterno. Se si ha un modello largo come questo si possono sostituire rispettivamente con 31%, 33%, 31% per la parte interna e 32%, 33%, 32% per quella esterna. Si può agire anche sul padding cioè sui pixel di margine tra la colonna e i widget che sono inseriti al loro interno.

    Forse ho incasinato un po’ le cose e allora per renderle più chiare potete vedere in questa pagina come si presenta il complesso del codice che ho inserito in questo blog al di sopra della riga

    ]]></b:skin>

    Potrebbe essere un’idea inserirlo totalmente e successivamente personalizzare colori, background (che nel mio modello non ho inserito), percentuali, padding e link.


    17 commenti :

    1. Ciao Ernesto,
      puoi anche mettere nella modifica del carattere il testo centrato usando "text-align:center;" per centrare il titolo nella parte in cui parli di personalizzazione dei colori del testo; inoltre, per evitare spiacevoli sorprese, conviene pure mettere 3 font (io ho messo arial,verdana,sans-serif).

      Ciao

      RispondiElimina
    2. @Mr Nessuno
      Certo ci possiamo sbizzarrire quanto si vuole :-) Ho solo indicato qualche personalizzazione. Ti ringrazio per il contributo :-)

      RispondiElimina
    3. Ciao Ernesto, senti, dove tu scrivi CI SONO DUE PERCENTUALI PER OGNI COLONNA PER UN TOTALE DI SEI PERCENTUALI,io francamente nel codice ne vedo una per ogni colonna,o forse mi sto sbagliando?
      In attesa di una cortese tua risposta
      ti porgo un cortese saluto e una buona domenica.

      RispondiElimina
    4. @Claudio
      Prima di leggere questo articolo dovevi leggere quest'altro.
      Ci sono tre percentuali per quanto riguarda la larghezza interna delle colonne ma, nella parte finale ce ne sono altre tre che riguardano la parte esterna. Puoi scaricare questo file dove c'è il codice che ho inserito in questo blog.
      Nella parte finale c'è la percentuale di
      body#layout .column1
      body#layout .column2
      body#layout .column3
      Spero di essere stato più chiaro.
      Ciao

      RispondiElimina
    5. Grazie Ernesto.....pardon! ho letto male io scusami per il disturbo.
      Ciao buonagiornata.

      RispondiElimina
    6. Ciao!! Non riesco a capire perché mi crea tre righe invece che tre colonne... ho provato a rifare il procedimento due volte ma non riesco... qualcuno mi sa aiutare?

      RispondiElimina
    7. @Federica
      leggiti le risposte che ho dato in precedenti commenti a Claudio.
      Probabilmente devi solo modificare le percentuali.
      Fammi sapere se hai risolto.
      Ciao

      RispondiElimina
    8. Niente da fare ho cambiato le percentuali più volte, ma il risultato sono sempre righe invece di colonne....

      RispondiElimina
    9. @Federica
      Il tuo blog ha già un modello molto personalizzato e probabilmente quest'altra modifica è incompatibile.
      Ciao

      RispondiElimina
    10. ciao ernesto molto belle le 3 colonne.le ho installate tempo fa e non ho mai capito perchè la terza colonna,qella di sinistra,non mi riconosce il colore di background del titolo.hai un'dea di come risolvere il problema?è come se nel tuo blog ad.es si vedesse solo la scritta etichette ma non lo sfondo rosa.a me non si vede nulla perchè lo sfondo è bianco e il titolo del widget idem.

      RispondiElimina
    11. ciao ernesto molto belle le 3 colonne.le ho installate tempo fa e non ho mai capito perchè la terza colonna,qella di sinistra,non mi riconosce il colore di background del titolo.hai un'dea di come risolvere il problema?è come se nel tuo blog ad.es si vedesse solo la scritta etichette ma non lo sfondo rosa.a me non si vede nulla perchè lo sfondo è bianco e il titolo del widget idem.

      RispondiElimina
    12. @Tutti ...
      Controlla questo post
      http://www.ideepercomputeredinternet.com/2009/06/come-aggiungere-tre-nuove-colonne-nella.html
      Se la terza colonna non mostra sfondo significa che c'è un errore o una mancanza in questo tipo di codice
      .column3 {
      padding: 0px 5px 3px 5px;
      width: 30%;
      float: right;
      margin:3px;
      text-align: left;
      }
      .column3 h2{
      background-color: #FDBCB7;
      padding: 2px 2px 2px 10px;
      }
      Specie per il secondo blocco.

      RispondiElimina
    13. grazie mille,gentilissimo come sempre.gli do un'occhiata,sperando di risolvere il problema.ti auguro un buon pomeriggio.cordiali saluti e grazie di tutto come sempre.

      RispondiElimina
    14. risolto!grazie,l'errore era davvero minimo.avevo .column3 h3 anzichè h2.grazie mille arcano risolto.mi inchino davanti alla tua conoscenza.a presto.

      RispondiElimina
    15. Ciao Ernesto, ho temporaneamente accantonato i commenti fb che purtroppo non funzionano anche con i tuoi ultimi consigli, ed adesso ti volevo chiedere come cambio invece il colore del testo dei link nel footer? Ho provato da modifica html ad inserire #000000 (il nero) nel footer-inner ma non succede nulla mi rimane bianco..? Dove sbaglio? Grazie

      RispondiElimina
      Risposte
      1. Andare su Modello > Personalizza è molto pericoloso, si possono perdere tutte le personalizzazioni che si sono inserite. Il tuo blog è questo?
        http://lallylu.blogspot.it/
        Se sì nel footer vedo un solo link cioè
        Dichiarazione di Copyright
        Vai in Modello e cerca questa riga

        .footer-inner .widget a:link {

        Subito sotto vedrai quest'altra riga
        color: #000000 !important;
        Basterà cambiare il codice del colore.
        @#

        Elimina
    16. Si è quello. Fatto funziona! Grazie

      RispondiElimina

    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