Come mostrare una riga di sottolineatura anche animata e colorata nel titolo del post di Blogger.

Come inserire una sottolineatura anche animata sotto il titolo dei post su Blogger.

Andiamo per gradi in quella che è una personalizzazione modesta ma che può risultare gradita agli utenti più attenti all'originalità dell'aspetto del loro blog su Blogger. Esiste un tag HTML che serve per introdurre una riga orizzontale, si tratta di <hr>. Questo tag non può essere inserito in questo modo nel template di Blogger in quanto è possibile che quest'ultimo non venga salvato. Bisogna convertire il tag in XML come abbiamo fatto altre volte usando per esempio lo strumento Parse HTML che convertirà il tag in una espressione che è invece accettata da Blogger.

La conversione di <hr> ci porta a ottenere &lt;hr&gt; e adesso vediamo dove potrebbe essere inserita. Dopo aver salvato il template andate su Modello > Modifica HTML e cercate la riga

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

Scorrete il codice verso il basso fino a trovare le righe <div class='post-header'> o    <div class='post-header-line-1'/> e, subito sopra a una di queste, incollate

&lt;hr&gt;

in questo modo

Il risultato sarà il seguente



con una riga orizzontale sotto il post. Si può personalizzare anche il colore e lo spessore della riga. Usando il codice seguente si possono scegliere diversi parametri

<hr width='100%' size='1' color='#003366'>

come la percentuale della larghezza, lo spessore e il colore della riga. Per esempio questo codice

<hr align='center' width='80%' size='2' color='#630'>

se parsato con lo stesso strumento diventa così
&lt;hr align=&#039;center&#039; width=&#039;80%&#039; size=&#039;2&#039; color=&#039;#630&#039;&gt;

Incollandolo nella stessa posizione otteniamo questo risultato

SOTTOLINEATURA ANIMATA AL PASSAGGIO DEL CURSORE

Fermo restando che il titolo del post nella Homepage, nelle pagine di etichette e in quelle di archivio è visto nella stessa maniera vediamo come mostrare una sottolineatura animata quando il mouse passa sopra al titolo dell'articolo. Si può inserire una sottolineatura che procede da sinistra verso destra, una che procede da destra a sinistra e una che parte dal centro e procede verso entrambi i lati. Per prima cosa dobbiamo inserire nel modello i CSS necessari per questa modifica. Si cerca quindi la riga </head> e, subito sopra, 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>

Fermo restando che i due tag iniziali e finali <style> e </style> debbono rimanere si può incollare solo il blocco di codice del verso della sottolineatura che vogliamo inserire. Si cerca quindi la stessa riga

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

e si scorre il codice fino a trovare il tag del titolo del post che è

<data:post.title/>

Le prime due occorrenze vanno lasciate invariate mentre si opera nelle ultime due



inserendo prima e dopo di esse questo codice

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

come mostrato nello screenshot. Con la classe un-sin-des si otterrà la sottolineatura animata da sinistra verso destra. Per quella da destra a sinistra si usa invece la classe un-des-sin e infine per l'animazione che parte dal centro si utilizza un-centro. Possono essere modificati i parametri dello spessore della sottolineatura (height: 3px;), del colore della stessa (background: #940f04;) e della durata del completamento della sottolineatura. Ovviamente dovrà essere salvato il modello.