Pubblicato il 30/01/11 - aggiornato il  | 36 commenti :

Come sottolineare i titoli dei post in Blogger.

Un articolo molto breve di risposta a una domanda che ho letto adesso in un commento e che mi chiede come si possa sottolineare il titolo di un articolo in Blogger. Che io sappia ci sono solo due modi per farlo. In entrambi i casi dobbiamo andare su Design > Modifica HTML e cercare la classe di stile che determina l'aspetto dei titoli dell'articolo. Nel modello Simple del Designer Modelli si trova questo blocco di codice

h3.post-title, .comments h4 {  
  font: $(post.title.font); 
  margin: .75em 0 0;
}

Nei modelli più vecchi potrebbe essere simile a questo

.post h3 {
  text-align:justify;
  font-size: 150%;
  font-weight:bold;
 
}

Ci deve essere comunque il riferimento a h3 che individua il titolo dell'articolo mentre h2 ne individua la data, questo almeno nei modelli ufficiali. Per sottolineare il titolo si usa il tag text-decoration che ha queste opzioni

text-decoration: underline;         : sottolineatura
text-decoration: overline;             : soprallineatura
text-decoration: line-through;        : testo barrato
text-decoration: none;                 : testo puro e semplice

Per sottolineare i titoli del blog è quindi sufficiente aggiungere la riga in rosso al blocco di codice come mostrato qui di seguito

h3.post-title, .comments h4 {  
  font: $(post.title.font); 
  margin: .75em 0 0;
 
text-decoration: underline;
}

Ecco come appariranno i post prima e dopo questa modifica

text decoration underline

In linea di massima la sottolineatura prenderà il colore del titolo dell'articolo. Con questo attributo non si può fare di più. Quindi, se vogliamo inserire una sottolineatura personalizzata, bisogna inserire nello stile del titolo un bordo inferiore. Il codice va inserito nello stesso blocco, nella stessa posizione del metodo precedente e potrebbe essere così

border-bottom:2px #940F04 dashed;

dove si può personalizzare lo spessore del bordo inferiore, il suo colore e il suo stile (solid, dashed, dotted, ecc). In questo caso ecco come si modifica il titolo dell'articolo

bordo tratteggiato

I più esperti di voi sapranno che dashed significa tratteggiato da cui l'aspetto. Con questo metodo sono possibili più personalizzazioni ma ci sono due inconvenienti. Il bordo si vedrà per tutta la lunghezza del layout e, nel caso di un titolo su due righe, sarà visibile solo in quella più bassa.





36 commenti :

  1. Ciao Parsifal, ti ringrazio per aver aperto un articolo, ho provato ad inserire la riga da te suggerita ma non mi fa salvare i cambiamenti in quanto visualizzo il seguente errore:
    "Dichiarazione variabile non valida nell'interfaccia della pagina: La variabile viene utilizzata ma non definita. Inserimento: pagefwcolor"

    RispondiElimina
  2. da cosa potrebbe dipendere secondo te?

    RispondiElimina
  3. @Webmaster
    Non ho idea perché non conosco l'URL del tuo blog e il tuo Profilo non è disponibile quindi non posso neppure accedere al codice sorgente. Mi sembra però molto strano che non ti salvi i cambiamenti visto che siamo nella sezione head. Sei sicuro di aver trovato il blocco di codice giusto?

    RispondiElimina
  4. l'url del mio sito è www.calcionapoli365.com, il codice è stato incollato come da te suggerito..

    RispondiElimina
  5. @Webmaster
    Dopo la riga
    margin: -0.25em 0 0;
    incolli
    text-decoration: underline;
    prima della parentesi graffa. Salvi il modello. Se non te lo salva non ne conosco la ragione.
    Ciao

    RispondiElimina
  6. Ho riprovato, era proprio dove l'avevo incollata e non me la fa salvare.. :(

    Per adesso ho messo la linea sotto il titolo come da te suggerito nell'altro post..da qualche giorno mi dà anche la data del post in grassetto senza che l'abbia impostata...mi sapresti dire dov'è ubicata per la personalizzazione?

    RispondiElimina
  7. @Webmaster
    Dovrebbe essere questo
    .date-header span {
    background-color: transparent;
    color: #052a6b;
    padding: inherit;
    letter-spacing: inherit;
    margin: inherit;
    }
    però non c'è bold che determina il grassetto

    RispondiElimina
  8. Strano che sia in grassetto visto che non risulta impostato...ti risulta possibile inserire l'ora nei posts con carattere piccolo nell'angolo alto sinistro o destro prima del titolo?

    RispondiElimina
  9. @Webmaster
    Inserire l'ora è possibile. Posso studiare la cosa

    RispondiElimina
  10. Ti ringrazio davvero tanto per la tua disponibilità Parsifal.

    RispondiElimina
  11. Buonasera Parsifal, hai novità?

    RispondiElimina
  12. @Webmaster
    Vedo che non mi segui a dovere :-)
    http://www.ideepercomputeredinternet.com/2011/02/aggiungere-ora-di-pubblicazione-alla.html
    Come Webmaster non dovresti lasciarti scappare neppure un post ^_^

    RispondiElimina
  13. Questa me l'ero persa... ;)

    La proverò e ti farò sapere, grazie!

    RispondiElimina
  14. Ciao Ernesto, lo so che non c'entra niente con questo post ma non so dove devo postare questo commento... comunque perché quando dalla home page clicko su un titolo di un post quando lo apre il titolo perde il suo formato...cioè da blu, corsivo, diverta nero e con un carattere di default, è possibile rimediare a questa cosa molto antiestetica?? grazie

    RispondiElimina
    Risposte
    1. @StefanoVinci
      A quale dei tuoi 4 blog ti riferisci? Credo a uno dei due The Work Revolution. Li ho aperti entrambi con Chrome ed è tutto OK. Forse hai problemi con il tuo browser o hai un virus nel PC.

      Elimina
    2. tutti e 4! l'importante è che sia tutto ok per chi visita i blog, su The Work Revolution ad esempio i titoli dei post nella home sono blu e con carattere trebuchet, quando ci clikko sopra per entrare nel post, il titolo diventa bianco e arial... comunque se il problema si presenta solo quando lo visualizzo io non ci sono problemi :) grazie mille!

      Elimina
  15. ciao! come sottolineare invece il testo dei widget? grazie di cuore!

    RispondiElimina
    Risposte
    1. @# Per sottolineare un testo del widget bisogna conoscere l'ID del widget e incollare sopra /b:skin un CSS del tipo
      #IDWidget h2 {text-decoration:underline !important;}
      Se ho tempo ci posso fare un post

      Elimina
  16. Ernesto volevo dire "gadget" ma è la medesima cosa vero? grazie di aver risposto, provo..

    RispondiElimina
    Risposte
    1. @# E' la stessa cosa ma credo di aver letto troppo in fretta il tuo commento. Ci ho anche fatto un post ma forse chiedevi una cosa diversa
      http://www.ideepercomputeredinternet.com/2013/05/modificare-titolo-widget.html

      Elimina
  17. Ciao, scusa se scrivo qui, ma ho fatto un giro e una ricerca tra i post a tema "titolo post" e non essendo un esperto e non sapendo quindi come proseguire, vorrei chiederti un consiglio: voglio personalizzare il titolo del mio ultimo post, quindi, anziché modificare l'HTML dell'intero blog, solo per questa volta voglio aggiungere quanto segue al momento di iniziare a scrivere l'ultimo post:< / style > < font face = " STILEFONT " > < font size = " 5 " > TITOLOPOST < / font > < / font > »

    RispondiElimina
  18. Aggiungo: non essendo un esperto, ho messo tutti quegli spazi perché altrimenti non potevo pubblicare il post e non sapevo come fare per aggirare la limitazione (tutta mia) del "non è possibile accettare il codice Tag non consentito: STYLE specificato"

    Ciao.

    RispondiElimina
    Risposte
    1. Ti potrà essere d'aiuto questo post
      http://www.ideepercomputeredinternet.com/2014/10/blogger-titolo-corsivo-colorato.html
      Si tratta di un tutorial per mostrare parte del titolo in corsivo, con un altro font e un altro colore che penso tu possa adattare alle tue esigenze
      @#

      Elimina
    2. In realtà avevo già provato con quel post, ma purtroppo, niente. Forse mi sono espresso male, quindi, ti lascio un link ad Imgur, per farti meglio capire cosa intendessi:

      http://imgur.com/AujPjY6&aWz0uNL#0

      http://imgur.com/AujPjY6&aWz0uNL#1

      Elimina
    3. Mentre negli altri post, il font è un normalissimo verdana, come ho impostato io stesso di default.

      Elimina
    4. Si vede il codice e il risultato Se sai già tutto non capisco.
      @#

      Elimina
    5. Quel che volevo sapere io è come rendere, in questo caso, il testo Bold. Nel senso, cosa devo scrivere perché appaia in grassetto?

      Elimina
    6. Bastava che me lo chiedessi subito :)
      Prova questo codice

      <font face="georgia"><font size=5"><b>TITOLO ARTICOLO</b></font></font>

      @#

      Elimina
    7. Tutto qui? Tutto qui. Vedi, lo sapevo che avevo fatto un casino cercando di spiegare cosa intendessi, AHAHAHAHAHAH!

      Comunque, perfetto, grazie mille davvero per questa piccola, ma per me molto importante, modifica.

      Elimina
    8. Scusa se rompo ancora, ma seguendo i tuoi vari tutorial, ora riesco, utilizzando il metodo che ti dicevo pochi commenti sopra, a personalizzare il titolo del post come voglio. Però, c'è una cosa che mi sfugge (e ripeto, utilizzando questo metodo qui, che a me vien particolarmente comodo) come cambiare il colore del testo.

      Ora, ho fatto una prova, e installando nuovi font da Google Fonts, riesco a scrivere titoli di 10 parole con 10 tipi di font diversi (è un po' un casino, ma vabbé), però non so come cambiare il colore anche ad una sola lettera. Per favore, dimmi che è semplice come rendere il testo bold "< / b >"

      Elimina
    9. Prova con un codice di questo genere
      <font color="#000">C</font><font color="#0f0">O</font><font color="#off">L</font><font color="#f0f">0</font><font color="#036">R</font>

      @#

      Elimina
    10. Proverò appena finisco di vedere l'altra faccenda dell'ora della pubblicazione.

      Tanto per sapere, questo codice "vale", diciamo così, per un solo colore? Nel senso, voglio usare 10 colori e 10 volte devo incollare questo codice?

      Elimina
    11. No, scusa, lascia perdere la domanda. Ho guardato meglio e si legge la parola COLOR. Grazie mille =D

      Elimina
    12. Problema (scusami ancora per la mia ignoranza), ma facevo una prova, piccola piccola, ma non so dove mettere il codice del colore all'interno di quello del titolo del post. Esempio testo: ciao a tutti

      < font face = "Arial" > < font size = 5" > Ciao < font face = "Arial" > < font size = 5" > A < font face= "Arial" > < font size=5" > Tutti

      Elimina
    13. Con il tag font si possono mettere più attributi. Prova così

      <font size="5" color="#000">C</font><font size="4" color="#0f0">O</font><font size="2" color="#off">L</font><font size="4" color="#f0f">0</font><font size="5" color="#036">R</font>

      @#

      Elimina
  19. Sarò io inesperto, ma sono davvero senza parole. E' proprio come lo volevo.

    Un immenso grazie, sopratutto per la disponibilità.

    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