Pubblicato il 06/09/14e aggiornato il

Come aggiungere Occhiello e Cappello al Titolo di un Articolo.

Come creare un Occhiello e un Cappello per i Titoli dei Post in Blogger direttamente con l'Editor dell'articolo o modificando il template.
Proprio ieri ho letto un post nella Pagina Facebook di questo blog che ha stimolato la mia curiosità. Mi si chiedeva se fosse possibile creare dei sottotitoli con Blogger. Sul momento sono rimasto un po' interdetto e ho pensato che la lettrice avesse fatto confusione tra un post e un video. Riflettendo però ho realizzato che si riferiva alla impaginazione degli articoli tipica dei quotidiani cartacei. Insieme al titolo principale che prende la maggior parte del riquadro e al corpo dell'articolo spesso ci sono uno e talvolta altri due elementi che illustrano meglio il contenuto e che si trovano sopra o sotto il titolo principale.

In gergo giornalistico il titolo secondario che si trova sopra a quello principale si chiama Occhiello e serve a introdurre il tema del contenuto mentre l'altro elemento che si trova sotto al titolo principale si chiama Cappello e funziona come introduzione all'articolo. Vediamo come sia possibile in Blogger pubblicare un post con questi due elementi di contorno del titolo principale.

CREARE L'OCCHIELLO DIRETTAMENTE NELL'ARTICOLO


Se questa funzione ci serve solo in un determinato articolo non occorre modificare il template. Si apre l'Editor di Blogger e si confeziona il post come al solito. Quando si è terminato si clicca su HTML accanto a Scrivi e nella parte alta dell'Editor si incolla questo codice

<style>
.post-title small {
display:block !important;
margin-bottom:10px;
padding-bottom:15px;
font-size:14px !important;
font-weight:normal !important;
}
</style>

Si passa poi a creare il titolo incollando nel campo apposito un testo con questa sintassi

<small>Questo è l'occhiello dell'articolo che sta sopra al </small>Titolo Principale.

occhiello-nel-titolo

con l'Occhiello compreso tra i tag small. Il risultato è il seguente

Occhiello-post

I parametri servono per distanziare Occhiello e Titolo Principale, per non avere l'Occhiello in grassetto e per settare una dimensione giusta dei font. Naturalmente si possono aggiungere altre righe. Si può per esempio pensare di aggiungere un bordo tra Occhiello e Titolo Principale

occhiello-con-bordo

che si crea con questo codice

<style>
.post-title small {
display:block !important;
border-bottom:1px solid #000;
margin-bottom:10px;
padding-bottom:15px;
font-size:14px !important;
font-weight:normal !important;
}
</style>

dove si può operare sullo stile del bordo come si desidera.

CREARE IL CAPPELLO NELL'ARTICOLO


Con le stesse modalità illustrate in precedenza si incolla su HTML questo codice

<style>
.post-title div {
display:block !important;
margin-top:20px;
padding-top:15px;
font-size:14px !important;
font-weight:normal !important;
}
</style>

con i parametri in rosso che servono per distanziare i due elementi, per la dimensione dei font e per eliminare il grassetto. Il titolo va pubblicato con questa sintassi

Titolo principale. <div> e questo è il cappello che si visualizza sotto il titolo</div>

cappello-titolo-blogger

Il risultato è il seguente

cappello-titolo-post

Anche in questo caso si può aggiungere un bordo

<style>
.post-title div {
display:block !important;
border-top:1px solid #000;
margin-top:20px;
padding-top:15px;
font-size:14px !important;
font-weight:normal !important;
}
</style>

con questo risultato

cappello dell'articolo

 

AGGIUNGERE OCCHIELLO E CAPPELLO AL TITOLO


Se si vuole un titolo molto descrittivo si può decidere di mostrare insieme al titolo principale anche cappello e occhiello. Il codice da incollare su HTML sarà il seguente

<style>
.post-title small {
display:block !important;
margin-bottom:10px;
padding-bottom:15px;
font-size:16px !important;
font-weight:normal !important;
}
.post-title div {
display:block !important;
margin-top:20px;
padding-top:15px;
font-size:16px !important;
font-weight:normal !important;
}
</style>

mentre la sintassi con cui pubblicare il titolo sarà questa

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

con l'Occhiello compreso tra <small> e </small> e il Cappello tra <div> e </div>.

cappello-occhiello-blogger-titolo

Il risultato sarà il seguente

occhiello-cappello-titolo-post

Si possono fare molte personalizzazioni. L'unica a cui accenno è quella di un bordo punteggiato sotto l'Occhiello e sopra il Cappello con il testo di colore diverso. Si usa questo 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>

che produce questo risultato

cappello-occhiello-titolo-post

che è già un risultato apprezzabile dal punto di vista estetico e funzionale.

OCCHIELLO E CAPPELLO NEL MODELLO


Se si preferisce utilizzare questa tecnica per molti articoli del nostro sito allora conviene incollare i fogli di stile nel template e basterà pubblicare il titolo del post con la struttura vista precedentemente per Occhiello,  per il Cappello e per entrambi. Il codice prescelto va incollato sopra la riga </head> andando su Modello > Modifica HTMLSi salva il template. Concludo ricordando che non si può dire nulla di certo per quello che riguarda la SEO però potrebbero esserci degli aspetti positivi come la possibilità di aggiungere più parole chiave al titolo e degli aspetti negativi quali il titolo troppo lungo.




9 commenti :

  1. Potrebbe essere utile anche nel caso di blog che pubblicano racconti suddivisi in più capitoli: nell'occhiello ci starebbe il titolo del racconto e nel titolo principale quello del capitolo.

    RispondiElimina
  2. Bravo molto utile! Avevo suggerito io l'argomento;) Ho provato e sono riuscita.
    Mi chiedo però...ma se lo si vuole rendere permanente come si potrebbe "operare" nel codice?

    RispondiElimina
    Risposte
    1. Il codice lo puoi inserire nel modello come spiegato alla fine del post. Però il titolo va sempre spezzato con i tag appositi. Non è possibile creare un sistema automatico
      @#

      Elimina
  3. Buon giorno, ho una domanda. Nel mio blog ho il titolo e la data dei post centrati. Se operassi nel modello per aggiungere questa personalizzazione o la usassi solo in un determinato post, occhiello e cappello sarebbe anche loro centrati insieme al titolo e alla data?
    Grazie per l'attenzione.

    Lucia Alocchi

    RispondiElimina
    Risposte
    1. Ritengo di sì. Bisognerebbe testare perché ogni template fa storia a sé ma sarebbero centrati anche cappello e occhiello. Volendo si possono anche allineare diversamente o tre elementi. Per esempio occhiello a sinistra, cappello a destra e titolo centrato, ecc
      Il codice da aggiungere nei rispettivi blocchi è questo
      text-align:center !important; per centrare
      text-align:right !important; allineamento a destra
      text-align:left !important; allineamento a sinistra

      @#

      Elimina
    2. Grazie per la risposta :)

      Lucia Alocchi

      Elimina
  4. Questo commento è stato eliminato dall'autore.

    RispondiElimina
    Risposte
    1. @# Forse non hai letto l'articolo interamente perché nella sezione finale con il titolo
      OCCHIELLO E CAPPELLO NEL MODELLO
      c'è scritto come fare per inserire il codice nel modello subito sopra alla riga < /head > cioè bisogna incollare questo 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>

      quindi si pubblica il titolo del post con questa struttura
      <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>

      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.