Pubblicato il 30/04/14e aggiornato il

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

riga-sotto-post

Il risultato sarà il seguente

inserire-riga-sotto-titolo

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
titoilo-post-sottolineato

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

sottolineatura-animata

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.




7 commenti :

  1. Bel post, molto utile e soprattutto chiaro, grazie! :)

    RispondiElimina
  2. Questo post è la risposta a chi dice che su Blogspot non si può personalizzare nulla.

    RispondiElimina
  3. Sono riuscita a mettere la riga, yuppy!
    Grazie

    RispondiElimina
  4. ciao ernesto e se si volesse mettere una riga anche sopra al titolo e mostrare entrambe le righe solo nel momento in cui si apre il post e non in home page si potrebbe fare e come? grazie

    RispondiElimina
    Risposte
    1. Domande con risposte semplici mai vero? :)
      Si può fare tutto ma non è facile da spiegare. Per mettere una riga sopra prova a incollare lo stresso codice sopra al <div... che è precedente al codice indicato nel post. Per mostrare un elemento solo in homepage si possono usare i tag condizionali
      http://www.ideepercomputeredinternet.com/2013/03/tag-condizionali-blogger.html

      Se sei interessata a questa grafica probabilmente troverai utile anche il post su occhiello e cappello
      http://www.ideepercomputeredinternet.com/2014/09/cappello-occhiello-titolo-post-blogger.html
      @#

      Elimina
    2. hai proprio ragione, ma io sono una che non si arrende mai!! Le modifiche che mi hai segnalato funzionano. Ci sarebbe la possibilità di abbassare un po' la linea superiore, mi sembra sproporzionata e il titolo non è equidistante. Poi ti prometto che non ti lascio in pace per un po' di tempo….

      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.