Come personalizzare il nome dell'autore e quello delle etichette posizionati sotto il titolo del post.

Come personalizzare il nome dell'autore e quello dellee etichette posizionate sotto il titolo del blog su Blogger.

Riprendo brevemente l'articolo con cui avevo illustrato come spostare il nome dell'autore e quello delle etichette sotto il titolo del post per personalizzarne l'aspetto.  Secondo il tutorial appena linkato questi elementi sono stati incollati nel mezzo alle righe  <div class='post-header-line-1'/> e </div> quindi si può usare il selettore post-header per personalizzarne il layout.

Alternativamente si possono trovare i selettori rispettivamente del nome dell'autore e delle etichette per effettuare delle personalizzazioni più mirate. Il selettore per il nome dell'autore è post-author.vcard  mentre quello delle etichette è  post-labels. Per fissare le idee si parte da questo aspetto

degli elementi che stanno sotto al titolo del post che vogliamo modificare.

COME CAMBIARE ASPETTO A TUTTA LA RIGA

Vediamo come modificare l'aspetto di tutta la riga sotto al titolo. In questo caso si usa il selettore post-header. Si va su Modello > Modifica HTML e si cerca la riga ]]></b:skin> e, subito sopra a questa, si incolla il seguente codice

div.post-header {
font-size:14px;
font-style: italic;
}

Si salva il modello. Il risultato sarà il seguente

con la parte sotto il titolo che è aumentata di dimensione oltre a essere in corsivo. Volendo si possono aggiungere anche altre righe come per esempio font-weight:bold; per il grassetto o color:#f00; per modificare il colore della parte del testo senza link. 

MODIFICARE ASPETTO DEI SINGOLI ELEMENTI

Si possono creare più regole per intervenire sui singoli elementi. Il codice ottenuto va sempre incollato nello stesso punto del template vale a dire subito sopra a ]]></b:skin>. Ecco un esempio 

span.post-labels{font-size:13px; font-style:italic;} /* Dimensione e corsivo caratteri etichette */span.post-author.vcard {font-size:13px; font-style:italic;} /* Dimensione e corsivo caratteri iniziali */
a.g-profile {font-variant:small-caps; font-weight:bold; font-size:14px;} /* Maiuscoletto e Grassetto per autore */

con le parti colorate di verde che sono commenti esemplificativi delle regole introdotte e che possono essere eliminati quando si incolla il codice nel modello. Il risultato è il seguente


Come ultimo esempio ho testato questo codice

div.post-header {border-bottom:1px solid #191919;}
span.post-labels, span.post-author.vcard {font-size:13px; font-style:italic;}
a.g-profile {font-variant:small-caps; font-weight:bold; font-size:15px;}

che inserisce anche una linea orizzontale con colore personalizzabile sotto il nome dell'autore e delle etichette e che produce questo risultato

Non ci sono limiti alla fantasia e si possono modificare tag e aggiungere o togliere righe di codice.