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
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
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.
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:
RispondiElimina"Dichiarazione variabile non valida nell'interfaccia della pagina: La variabile viene utilizzata ma non definita. Inserimento: pagefwcolor"
da cosa potrebbe dipendere secondo te?
RispondiElimina@Webmaster
RispondiEliminaNon 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?
l'url del mio sito è www.calcionapoli365.com, il codice è stato incollato come da te suggerito..
RispondiElimina@Webmaster
RispondiEliminaDopo 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
Ho riprovato, era proprio dove l'avevo incollata e non me la fa salvare.. :(
RispondiEliminaPer 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?
@Webmaster
RispondiEliminaDovrebbe 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
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@Webmaster
RispondiEliminaInserire l'ora è possibile. Posso studiare la cosa
Ti ringrazio davvero tanto per la tua disponibilità Parsifal.
RispondiEliminaBuonasera Parsifal, hai novità?
RispondiElimina@Webmaster
RispondiEliminaVedo 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 ^_^
Questa me l'ero persa... ;)
RispondiEliminaLa proverò e ti farò sapere, grazie!
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@StefanoVinci
EliminaA 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.
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!
Eliminaciao! come sottolineare invece il testo dei widget? grazie di cuore!
RispondiElimina@# Per sottolineare un testo del widget bisogna conoscere l'ID del widget e incollare sopra /b:skin un CSS del tipo
Elimina#IDWidget h2 {text-decoration:underline !important;}
Se ho tempo ci posso fare un post
Ernesto volevo dire "gadget" ma è la medesima cosa vero? grazie di aver risposto, provo..
RispondiElimina@# 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
Eliminahttp://www.ideepercomputeredinternet.com/2013/05/modificare-titolo-widget.html
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 > »
RispondiEliminaAggiungo: 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"
RispondiEliminaCiao.
Ti potrà essere d'aiuto questo post
Eliminahttp://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
@#
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:
Eliminahttp://imgur.com/AujPjY6&aWz0uNL#0
http://imgur.com/AujPjY6&aWz0uNL#1
Mentre negli altri post, il font è un normalissimo verdana, come ho impostato io stesso di default.
EliminaSi vede il codice e il risultato Se sai già tutto non capisco.
Elimina@#
Quel che volevo sapere io è come rendere, in questo caso, il testo Bold. Nel senso, cosa devo scrivere perché appaia in grassetto?
EliminaBastava che me lo chiedessi subito :)
EliminaProva questo codice
<font face="georgia"><font size=5"><b>TITOLO ARTICOLO</b></font></font>
@#
Tutto qui? Tutto qui. Vedi, lo sapevo che avevo fatto un casino cercando di spiegare cosa intendessi, AHAHAHAHAHAH!
EliminaComunque, perfetto, grazie mille davvero per questa piccola, ma per me molto importante, modifica.
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.
EliminaOra, 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 >"
Prova con un codice di questo genere
Elimina<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>
@#
Proverò appena finisco di vedere l'altra faccenda dell'ora della pubblicazione.
EliminaTanto per sapere, questo codice "vale", diciamo così, per un solo colore? Nel senso, voglio usare 10 colori e 10 volte devo incollare questo codice?
No, scusa, lascia perdere la domanda. Ho guardato meglio e si legge la parola COLOR. Grazie mille =D
EliminaProblema (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
Elimina< font face = "Arial" > < font size = 5" > Ciao < font face = "Arial" > < font size = 5" > A < font face= "Arial" > < font size=5" > Tutti
Con il tag font si possono mettere più attributi. Prova così
Elimina<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>
@#
Sarò io inesperto, ma sono davvero senza parole. E' proprio come lo volevo.
RispondiEliminaUn immenso grazie, sopratutto per la disponibilità.