Pubblicato il 13/10/12e aggiornato il

Come personalizzare il grassetto e il corsivo di tutto il blog.

Come personalizzare il grassetto e il corsivo in tutti i post di un blog su Blogger.
Dopo aver illustrato come creare una classe specifica per formattare un determinato testo vediamo come si possa mostrare tutto il grassetto e tutto il corsivo dei post sempre dello stesso colore e della stessa dimensione. Le parole di questo post in grassetto saranno visualizzate nei caratteri Verdana, avranno una dimensione di 11.5 pixel e saranno di colore fucsia mentre il testo in corsivo sarà mostrato con caratteri Arial di dimensione 12 pixel e di colore smeraldo.

Questo succederà solo per il grassetto e il corsivo che non abbiano dei link perché il questo caso il colore sarà quello solito dei collegamenti di questo blog. Inserendo un particolare codice nel modello possiamo colorare all'istante tutto il grassetto e il corsivo presente in tutti gli articoli del blog.

Ricordo che per il grassetto ci sono due tag praticamente equivalenti che vengono usati nell'HTML


<b>Testo in grassetto prima versione</b>
<strong>
Testo in grassetto seconda versione</strong>

Lo stesso discorso vale per il corsivo in cui si possono usare indifferentemente i seguenti tag

<i>Testo in corsivo prima versione</i>
<em>
Testo in corsivo seconda versione</em>

Si possono quindi creare dei CSS per personalizzare questi  quattro tag. Si va su Modello > Modifica HTML > Procedi e si cerca la riga ]]></b:skin>. Subito sopra si incolla il seguente codice

b, strong {
font-size: 11.5px;
font-family:Verdana;
color: #C200FF;
}
i, em {
font-size: 12px;
font-family:Arial;
color:#006000;
}

Si salva il modello. I parametri in rosso possono essere modificati e riguardano la dimensione dei caratteri, la famiglia dei font e il loro colore. Le righe che non interessano possono anche essere tolte. Se ne possono però inserire altre che riguardano per esempio la sottolineatura come text-decoration: underline; oppure la soprallineatura con text-decoration: overline; o ancora la cancellazione di queste opzioni con text-decoration: none;.

Se si vuole inserire questa personalizzazione di grassetto e corsivo in un solo post basta aprire l'Editor di Blogger in Modalità HTML e incollare questo codice

<style>
b, strong {
font-size: 11.5px;
font-family:Verdana;
color: #C200FF;
}
i, em {
font-size: 12px;
font-family:Arial;
color:#006000;
}
</style>

subito sotto il codice del Read More che è <!--more--> . Questo serve per fare in modo che il CSS non modifichi anche gli altri articoli della homepage o delle pagine delle etichette. Se si inserisce il grassetto corsivo in una parola o frase il suo aspetto sarà quello del tag più interno vale a dire

<b><i>Grassetto corsivo prima versione</i><b> avrà l'aspetto del corsivo
<i><b>Grassetto corsivo seconda versione</b></i> avrà l'aspetto del grassetto




6 commenti :

  1. *______* siiiiiiiiiiii volevo proprio questo!!! GRAZIE!!!!!

    RispondiElimina
    Risposte
    1. il mio blog ora è senza dubbio più bello! ascolta e per inserire una lista di link e immagini con collegamento nella zona a destra sotto l'elenco di chi mi segue? in che zona del codice dovrei inserirla?

      Elimina
    2. @Erika+-+-
      Temo di non aver capito. Se ti riferisci a un widget prova con il Brogroll ovvero l'Elenco di Blog. Vai su Layout > Aggiungi un gadget > Elenco di blog. Se invece vuoi inserire immagini e link manualmente il codice lo puoi ricavare da questo ebook gratuito
      http://www.ideepercomputeredinternet.com/2012/09/guida-html-ebook.html

      Elimina
    3. grazie mille, la mia connessione velocissima lo sta scaricando! il codice dovrei in realtà solo copiarlo dal codice del vecchio blog.. mi occorre sapere in che parte incollarlo in modo che risulti sotto il widget di chi mi segue ^^

      Elimina
    4. Vai su Layout > Aggiungi un gadget > HTML/Javascript e incolla il codice in Sezioni del sito. Clicca su Salva. Vai su Layout e con il mouse trascina l'elemento pagina nella posizione che desideri quindi clicchi in alto a destra su Salva Disposizione @

      Elimina

Non inserire link cliccabili altrimenti il commento verrà eliminato. Metti la spunta a Inviami notifiche per essere avvertito via email di nuovi commenti. Se ti ho aiutato con il post o con le risposte ai commenti condividi su Facebook o su Twitter. Grazie.