mercoledì 20 febbraio 2013

Come sottolineare i titoli dei gadget della colonna laterale in un blog di blogger


Eccoci alla quinta puntata sulle modifiche da apportare per fare un piccolo restyling del blog.


Inserendo questo codice CSS come abbiamo già visto qui aggiungerete una sottolineatura al titolo del gadget sulle barre laterali del blog: 


.sidebar h2{
border-bottom: 1px dotted grey !important;
padding-bottom: 5px}


Questo però è un codice composto da elementi che potete modificare a seconda delle vostre esigenze. 



border-bottomQuesta proprietà del bordo produce l'effetto di sottolineare il titolo del gadget delle colonne laterali. Potete cambiare la larghezza modificando il valore 1px. Potete anche cambiare la linea in puntini oppure in riga doppia ecc. inserendo solid | groove | ridge | double | inset | outset | dotted. Fate delle prove e vedete quale vi piace di più!  
Alla fine potete cambiare il colore della linea usando i codici che trovate in questa tabella di colori di riferimento.

padding-bottom: definisce lo spazio tra la sottolineatura e il titolo. Potete aggiustare il valore dei pixel a vostro gusto. 

Spero che anche questo breve tutorial vi possa essere utile! 

*******
Aggiornamento del 03/10/2013

Per modificare grandezza font, font, centrare il titolo, ecc date un'occhiata qui



20 commenti:

  1. Fatto!!Grazie per questi accorgimenti!!^_^

    RispondiElimina
    Risposte
    1. Saralilla sono contenta che d'esserti stata utile! fa sempre piacere ricevere un feedback positivo! :-))))

      Elimina
  2. Utili questi tutorial, sono facili e veloci! Grazie :)

    RispondiElimina
    Risposte
    1. Ciao Silvia! prego! grazie per aver lasciato un segno del tuo apprezzamento! :-)))

      Elimina
  3. oh finalmente.... era una vita che cercava una cosa simile!!! devo dire che il tutto mi piace proprio !!! grazie mille. Ps. nuova follower

    RispondiElimina
  4. grazie per questo tutorial!
    vorrei farti un altra domanda, ma se io voglio che la linea vada fino al bordo della pagina come devo fare?
    francesca

    RispondiElimina
    Risposte
    1. Mi spiace Francesca ma in questo caso nn so aiutarti! Ciao!!!

      Elimina
    2. ti ringrazio lo stesso
      francesca

      Elimina
  5. Grazie mille!!!
    Sono riuscita a sottolineare i titoli dei gadget e a inserire anche una linea sopra ogni titolo usando questo CSS:
    .sidebar h2{
    border-bottom: 1px solid #000000!important;
    padding-top: 3px}

    .sidebar h2{
    border-top: 1px solid #000000!important;
    padding-bottom: 3px}

    E’ tutto merito tuo, non ci sarei mai riuscita senza i tuoi consigli preziosi!!!!
    Domanda: c’è un modo per fare la stessa cosa con il menu delle pagine di blogger (come in questo sito http://www.domainehome.com/ dove decor, celebrity e tutti i nomi delle pagine sono evidenziati da 2 linee orizzontali sopra e sotto.)
    Grazie!!! Beba

    RispondiElimina
    Risposte
    1. Ciao Beba!
      scusa se risp solo ora! come vedi ultimamente non ho molto tempo da dedicare al blog ... sigh!
      grazie per il css! purtroppo non so aiutarti per quello che domandi, dovrei cercare un po' ma dopodomani parto per le vacanze e quindi rimando tutto a settembre!

      ciaoooooo :-)

      Elimina
  6. Ciao!!! Grazie... nessun problema!
    Buone vacanze!! Ciao ciao :-)

    RispondiElimina
  7. Grazie per questo tutorial a te Smile e a Beba, per l'aggiunta... sapete come posso modificare il font e la grandezza del titolo del gadget attraverso il codice HTML, senza dover modificare automaticamente anche la data del post?
    grazie Francesca

    RispondiElimina
    Risposte
    1. Francesca, domani cerco di rispondere alla tua richiesta! ciao! :-)

      Elimina
    2. grazie! ^_^
      Francesca

      Elimina
    3. Francesca
      per cambiare font e grandezza dei titoli della colonna laterale senza modificare anche quelli della data devi aggiungere qs css

      .sidebar h2 {
      font-family:Verdana, Geneva, sans-serif;
      font-size:17px;
      }

      ora questo è un esempio, quello che è scritto dopo i due puntini lo devi cambiare tu a tuo piacimento!
      se poi avevi aggiunto i puntini sotto al titolo come ho spiegato nel post il tutto verrà così:

      .sidebar h2{
      border-bottom: 1px dotted grey !important;
      padding-bottom: 5px
      font-family:Verdana, Geneva, sans-serif;
      font-size:17px;
      }

      ok? spero d'essere stata chiara, comunque nei prossimi giorni scriverò un post più dettagliato!
      ciao!!!

      Elimina
  8. ti ringrazio ancora!
    provo subito!
    Francesca

    RispondiElimina
    Risposte
    1. mi conviene aspettare il tuo post!!!
      perché facendo questa modifica l'unica cosa che cambia è la grandezza e non il tipo di font!. Ho provato varie modifiche anche direttamente dal codice sorgente, ma nulla...
      Francesca

      ti ringrazio nuovamente per la disponibilità.

      Elimina
  9. Grazie mille per questo tutorial, veloce e chiarissimo! ^_^
    Alice

    RispondiElimina
  10. Grazie mille per il tutorial!! Utilissimo! :)

    RispondiElimina

Il tuo commento è prezioso per me, grazie per aver trovato il tempo per fermarti e condividere il tuo pensiero!

*** Ai post un po' datati ho applicato la moderazione altrimenti, con la testa che mi ritrovo, i commenti rimarrebbero nel limbo!***




LinkWithin

Related Posts with Thumbnails