Come aggiungere una sottolineatura anche animata al titolo del post in Blogger.

Come inserire una sottolineatura sotto il titolo dell'articolo di Blogger. La si può mettere fissa o anche animata che si vede al passaggio del cursore.

Ho recentemente pubblicato un articolo su come si possa personalizzare il titolo del post in Blogger. Queste modifiche sono sempre molto richieste tanto che in questo post voglio aggiungerne un'altra vale a dire la possibilità di sottolineare il titolo anche per dividerlo dal resto del contenuto e eventualmente anche da banner pubblicitari che possono essere inseriti subito sotto.

L'inserimento di una riga di sottolineatura può essere fatta con l'aggiunta di un tag HTML  o con un CSS. In entrambi i casi dobbiamo modificare il modello quindi prima di procedere bisogna aver salvato il template per un eventuale ripristino.

Si va su Modello > Modifica HTML e si cerca la sezione <b:skin> quindi si clicca sulla freccetta nera sulla sinistra per visualizzare tutto il codice. Con Ctrl+F si cerca la riga ]]></b:skin> e, subito sopra a questa, si incolla questa regola per i CSS

h3.post-title {border-bottom:2px #036 dotted;}

Si salva il modello. Il risultato sarà il seguente



Si possono personalizzare i codici dei colori e lo stile del bordo che nel test ho scelto punteggiato.

COME SOTTOLINEARE IL TITOLO DEL POST CON L'HTML

Adesso vediamo un altro sistema per ottenere un risultato simile sfruttando il tag della riga orizzontale <hr> al posto del tag border-bottom che inserisce un bordo nella parte bassa di un elemento. Su Modello > Modifica HTML sempre con Ctrl+F si cerca la riga

<b:includable id='post' var='post'>

che è quella iniziale della versione desktop del blog. Si clicca sulla freccetta nera posta sulla sinistra quindi si scorre il codice verso il basso fino a trovare le righe

<div class='post-header'> e 
<div class='post-header-line-1'/>

Nel mezzo a queste due righe si incolla questo codice

<hr align='center' width='95%' size='2' color='#036'>

dopo averlo "parsato" con lo strumento Blogcrowds che lo convertirà in questo modo

&lt;hr align=&#039;center&#039; width=&#039;95%&#039; size=&#039;2&#039; color=&#039;#036&#039;&gt;

La conversione da HTML a XML è necessaria per permettere a Blogger di salvare il modello. Il risultato dopo il salvataggio del template sarà il seguente

Naturalmente possono essere personalizzati i valori center per centrare la riga, 95% per determinarne la larghezza, size='2' per lo spessore della riga e #036 per il codice del colore.

MOSTRARE UNA SOTTOLINEATURA ANIMATA AL PASSAGGIO DEL CURSORE

Adesso vediamo come mostrare una sottolineatura animata del titolo al passaggio del cursore. Si va su Modello > Modifica HTML e subito sopra al tag </head> si incolla questo codice

<style>
/* DA SINISTRA A DESTRA */
.un-sin-des {
display: inline-block;
}
.un-sin-des:after {
content: &#39;&#39;;
display: block;
height: 3px;
width: 0;
background: transparent;
transition: width .5s ease, background-color .5s ease;
}
.un-sin-des:hover:after {
width: 100%;
background: #940f04;
}
/* DA DESTRA A SINISTRA */.un-des-sin {
    display: inline-block;
    position: relative;
    padding-bottom: 3px;
}
.un-des-sin:after {
    content: &#39;&#39;;
    display: block;
    position: absolute;
    right: 0;
    bottom: 0;
    height: 3px;
    width: 0;
    background: transparent;
    transition: width .5s ease, background-color .5s ease;
}
.un-des-sin:hover:after {
    width: 100%;
    background: #940f04;
}
/* DAL CENTRO AGLI ESTREMI */.un-centro {
    display: inline-block;
    position: relative;
    padding-bottom: 3px;
}
.un-centro:after {
    content: &#39;&#39;;
    display: block;
    margin: auto;
    height: 3px;
    width: 0px;
    background: transparent;
    transition: width .5s ease, background-color .5s ease;
}
.un-centro:hover:after {
    width: 100%;
    background: #940f04;
}
</style>

dove si possono personalizzare i codici dei colori e la velocità della trasformazione proposta in mezzo secondo. Ora si cerca la riga <b:includable id='post' var='post'> e si scorre il codice verso il basso fino a trovare il tag del titolo che è <data:post.title/>. Prima e dopo le due occorrenze del titolo vanno aggiunte due righe di codice in questo modo

<span class='un-sin-des'> <data:post.title/> </span>

come mostrato nello screenshot seguente 

Pigiando su Invio si può creare lo spazio necessario per i tag aggiuntivi. Per una sottolineatura animata che vada da destra a sinistra si sceglie un-des-sin al posto di un-sin-des che invece va da sinistra a destra mentre un-centro creerà una sottolineatura dal centro verso l'esterno.  

La sottolineatura comparirà solo al passaggio del cursore. Si può personalizzare il codice del colore  #940f04; e lo spessore della sottolineatura operando sul tag height: 3px;.