Pubblicato il 28/10/14e aggiornato il

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

nome-autore-etichette

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

nome-autore-etichette[4]

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

nome-autore-etichette-titolo-post
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.




8 commenti :

  1. Buongiorno Ernesto io non vedo il codice delle etichette nel template

    RispondiElimina
  2. Ciao Ernesto...problema:da stamattina quando voglio condividere dal blog un post su facebook sono sparite le freccette che servivano per scegliere quale foto pubblicare...

    RispondiElimina
    Risposte
    1. Forse non vengono rilevate tutte le foto. Succede se è poco che hai pubblicato il post. Per ovviare prova a usare Facebook Debugger come illustrato nella seconda parte di questo post
      http://www.ideepercomputeredinternet.com/2013/03/open-graph-facebook.html
      @#

      Elimina
  3. pensa ke una volta pubblicata nella pagina se voglio pubblicarla in un gruppo,vedo una foto che nn corrisponde e nn mi fa cambiare foto...fino a ieri sera sì....sarà perchè uso gadget non ufficiali di fb? forse meglio installare Open Graph?

    RispondiElimina
  4. E se volessimo mettere sotto il titolo anche data e numero commenti?

    RispondiElimina
    Risposte
    1. Sono due cose non semplicissime. In passato ho pubblicato due post che non so se siano compatibili con tutti i modelli attuali
      http://www.ideepercomputeredinternet.com/2014/02/blogger-link-commenti-titolo-post.html
      http://www.ideepercomputeredinternet.com/2013/05/data-under-post-title-blogger.html
      @#

      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.