Pubblicato il 03/04/16 - aggiornato il  | 8 commenti :

Come personalizzare l'aspetto del titolo dei post di Blogger.

Come personalizzare il titolo dei post di Blogger aggiungendo Occhiello, Cappello, Immagini e modificando dimensione, colore e famiglia di ciascun carattere.
Il titolo del post è uno dei più importanti fattori di ranking per i motori di ricerca ma anche un elemento fondamentale per far preferire agli utenti il nostro articolo, e quindi cliccarci sopra, quando visualizzano risultati di ricerca di Google. Un titolo deve essere breve ma descrittivo e tale compromesso non è sempre facile da trovare.

In questo articolo mi occuperò del titolo da un altro punto di vista cioè del suo aspetto. Le dimensioni dei caratteri e il colore del titolo del blog sono determinati dal modello e possono essere modificati cercando nel template il blocco di codice che inizia con h3.post-title e che tra le parentesi graffe contiene le informazioni per colori, dimensioni, margini e famiglia di font.

In molti modelli di Blogger la classe del titolo del post è associata a quella del titolo dei commenti con l'aggiunta di .comments h4 alla classe precedente dopo la virgola di separazione. In questo modo questi due elementi avranno lo stesso aspetto. Si può naturalmente sostituire quell'unico blocco di codice con due blocchi distinti per titoli e commenti.

COME AGGIUNGERE IMMAGINI AL TITOLO DEL POST


Il campo del titolo del post di Blogger supporta dei tag HTML imprevedibili come quello delle immagini. Si possono quindi aggiungere immagini prima e/o dopo il titolo. Se nell'Editor di Blogger si incolla nel campo del titolo un codice come questo

<img src="https://lh4.googleusercontent.com/-gJtXH4TVqqY/UZNAPDnUD9I/AAAAAAAAhtw/VXu-hbTs9Jg/s32/cuore.png" /> Post San Valentino <img src="https://lh4.googleusercontent.com/-gJtXH4TVqqY/UZNAPDnUD9I/AAAAAAAAhtw/VXu-hbTs9Jg/s32/cuore.png" />

in questo modo

titolo-blogger-personalizzato

si otterrà un risultato simile al seguente

titolo-blogger-immagini

che può essere una buona idea per articoli di determinate tipologie di blog.

PERSONALIZZARE I SINGOLI CARATTERI DI UN TITOLO


I titoli di Blogger hanno caratteri tutti della stessa dimensione e colore. Si può creare un titolo multicolore e con caratteri diversi utilizzando il tag <font> e i codici dei colori. Questo codice

<font size="5" face = "Arial" color="#000"><em>C</em></font><font size="4" face = "Verdana" color="#0f0"><b>O</b></font><font size="2" face = "Courier" color="#off"><em>L</em></font><font size="4" font="Impact" color="#f0f"><b>0</b></font><font size="5" face = "Arial" color="#036"><em>R</em></font>

se incollato nel campo del Titolo dell'Editor di Blogger porta a questo risultato

titolo-multicolore-blogger

Sono stati usate diverse famiglie di font e il tag <em> per il corsivo e <b> per il grassetto. I caratteri del Titolo possono anche essere intervallati da immagini. Per esempio con questo codice

<font size="5" face = "Arial" color="#000"><em>C</em></font> <img src="https://lh4.googleusercontent.com/-gJtXH4TVqqY/UZNAPDnUD9I/AAAAAAAAhtw/VXu-hbTs9Jg/s18/cuore.png" />  <font size="2" face = "Courier" color="#off"><em>L</em></font> <img src="https://lh4.googleusercontent.com/-gJtXH4TVqqY/UZNAPDnUD9I/AAAAAAAAhtw/VXu-hbTs9Jg/s18/cuore.png" />  <font size="5" face = "Arial" color="#036"><em>R</em></font>

porterà ad avere un titolo con questo aspetto

titolo-blogger-immagini


COME AGGIUNGERE OCCHIELLO E CAPPELLO AL TITOLO


In tipografia si definisce Occhiello il testo che viene visualizzato sopra al titolo dell'articolo e Cappello il testo che invece viene mostrato sotto il titolo. Volendo avere un risultato come questo
cappello-occhiello-titolo-post

si deve partire da un codice che definisca l'aspetto di Occhiello e Cappello. Tale codice va incollato nell'Editor di Blogger, all'inizio del corpo del post, in Modalità HTML. Questo esempio di codice

<style>
.post-title small {
display:block !important;
color:#aaa;
border-bottom:1px dotted #000;
margin-bottom:10px;
padding-bottom:15px;
font-size:18px !important;
font-weight:normal !important;
}
.post-title div {
display:block !important;
color:#aaa;
border-top:1px dotted #000;
margin-top:20px;
padding-top:15px;
font-size:18px !important;
font-weight:normal !important;
}
</style>

va incollato nell'articolo in questo modo

occhiello-cappello-titolo-blogger

La struttura del titolo che sarà incollato nel campo apposito invece sarà la seguente

<small>Questo è l'occhiello dell'articolo che sta sopra al </small>Titolo Principale <div> e
questo è il cappello che si visualizza sotto il titolo principale</div>

con l'Occhiello compreso tra i tag <small> e </small> e il Cappello tra i tag <div> e </div>. Naturalmente in un titolo si può decidere di aggiungere solo il Cappello o solo l'Occhiello.  Nel codice ci sono i parametri per i codici dei colori, per lo stile del bordo, per le dimensioni dei caratteri e per i margini tra Occhiello, Cappello e Titolo del post.

CAPPELLO E OCCHIELLO NEL MODELLO


Se decidiamo di inserire molto spesso Occhiello e/o Cappello insieme al titolo del post allora è consigliabile inserire il codice nel modello invece che in ogni singolo post. Il codice va incollato in Modello > Modifica HTML, subito sopra alla riga </head> per poi salvare il template. Quando si edita un nuovo articolo basterà digitare la struttura del titolo nell'apposito campo senza l'aggiunta di nessun altro codice.

COME MOSTRARE PARTE DEL TITOLO IN CORSIVO


Concludo questo articolo con una piccola chicca a beneficio dei blogger che si occupano di botanica o che comunque hanno a che fare con una nomenclatura scientifica in latino. Per convenzione la denominazione di una pianta o di una specie animale in latino va pubblicata in corsivo. Questo crea difficoltà quando questa denominazione latina va inserita direttamente nel titolo. Il nostro obiettivo sarà quello di pubblicare dei titoli che abbiano questo aspetto

titolo-blogger-corsivo

con la denominazione latina della specie in corsivo. Dopo aver salvato il template si va su Modello > Modifica HTML e, subito sopra alla riga   ]]></b:skin>, si incolla questo codice

.post-title span {font-style: italic;}

Si salva il modello. Quando si crea un post, nel campo del titolo si digiteranno questi caratteri

Camomilla - <span>Camomilla recutita</span>

Va da sé che ci possono essere anche due parti in corsivo e che queste possono stare all'inizio, alla fine o nel mezzo del titolo senza alcun problema di posizionamento.


8 commenti :

  1. Grazie mille per questo post!
    Se non creo disturbo vorrei chiederLe se c'è una possibilità di centrare il titolo di un post su blogger.
    Grazie ancora e buona giornata.

    RispondiElimina
    Risposte
    1. Seguimi nei prossimi giorni. Salvo il tuo commento e ci faccio un post anche a beneficio di altri lettori
      @#

      Elimina
    2. Più di così non potevo sperare!
      Grazie!

      Elimina
  2. Nel mio blog non funziona. Nella home sono riuscita a personalizzare il codice, ma nella pagina del post no. :-(

    RispondiElimina
  3. Quale personalizzazione non funziona tra quelle illustrate?
    @#

    RispondiElimina
  4. Ciao, Ernesto.
    Scrivo qui, perchè dopo aver cercato in giro, non trovo post più vicino a quanto di devo chiedere.
    Ho deciso di importare uno dei nuovi modelli responsive di Blogger sul mio blog (Soho).
    Prima di sistemare tutti i post, sto sistemando la scatola. Ho modificato tutto come volevo (colori, carattere, larghezze, ecc). Non riesco però a modificare il titolo del post (che esce sempre e solo tutto maiuscolo, TITOLO) e il titolo dei widget nella parte principale del blog (anche qui solo tutto maiuscolo, IN PRIMO PIANO, ULTIMI POST). Nella sidebar, invece, il problema non si pone, perché i titoli possono essere scritti indifferentemente in tutti i modi.
    Immagino di debba intervenire sul modello, ma non ho proprio idea di dove.
    Mi puoi aiutare?
    Grazie

    RispondiElimina
    Risposte
    1. Ho provato con questa riga
      #Header1 > div {text-transform: lowercase;}
      per rendere tutte le lettere minuscole
      e con questa
      #Header1 > div {text-transform: capitalize;}
      per lasciare maiuscola solo la prima lettere inserite sopra all'ultima riga della sezione b:skin ma non funziona e non funzionano neppure queste

      #Header1 > div > h1 {text-transform: !important lowercase;}
      #Header1 > div > h1 {text-transform: !important capitalize;}
      Mi spiace ma i nuovi temi sono difficilmente personalizzabili 😑
      @#

      Elimina
    2. Grazie, Ernesto, l'avevo quasi immaginato.
      Ho cambiato font, ne ho scelto uno che, anche maiuscolo, non mi disturba.

      Elimina

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