Pubblicato il 18/03/12 - aggiornato il  | 8 commenti :

Come inserire un box con le informazioni sull'autore alla fine di un post di Blogger.

Nei blog su Blogger è presente di default il widget del Profilo in cui vengono inserite le note biografiche, professionali e le informazioni sulla attività web dell'autore del blog. Per evidenziare maggiormente questo aspetto si può anche inserire un box con tali note alla fine di ciascun articolo che viene pubblicato.

In tale contenitore può essere inserita una immagine o un avatar, tutto il testo e tutti i link che vogliamo. E' opportuno inserire dei tag condizionali per mostrare tale rettangolo solo nei post per non appesantire troppo la homepage. Ecco un esempio di come potrebbe essere un tale box dell'autore

box-autore-blogger

Per la sua installazione si va su Modello > Backup/Ripristino e si salva il modello completo per sicurezza. Si torna su Modello > Modifica HTML > Procedi, si espandono i modelli widget, ponendo la flag nel relativo quadratino, e si cerca la riga </head>. Subito sopra si incolla il codice

<style>
.info-autore {
        float: left;
        width: 480px;
        padding: 10px 5px 0px 2px;
        border: 1px solid #ddd;
        margin-bottom: 10px;
        margin-top: 10px;
        background: #eeeeff;
}
.info-autore h3 {
        margin-bottom: 10px;
}
.foto-autore {
        float: right;
        margin: 0 0 0 10px;
}
.foto-autore img {
        border: 1px solid #fff;
}
</style>

dove possono essere personalizzati i parametri in rosso che concernono dimensioni, colori, allineamento del box, allineamento della immagine e stili dei bordi.

Adesso si cerca la riga

<div class='post-footer-line post-footer-line-1'>

e, subito sopra, si incolla quest'altro codice

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='info-autore'>
<div class='foto-autore'>
<img alt='author' src='https://lh4.googleusercontent.com/-SYEWZCjQY7c/T2Wf_5YvRKI/AAAAAAAAW7A/dMjdEKgB5fU/s124/immagine-autore.jpg'/></div>
<h3><font color='#f2a136'>Questo post è stato scritto da:</font></h3>
<p><font color='#191919'><a href='https://plus.google.com/111056841635962157738/posts?hl=it' title='Profilo su Google Plus'>Ernesto Tirinnanzi</a> che ha scritto più di tremila articoli su argomenti quali informatica, intrattenimento, finanza, politica e divulgazione scientifica. Puoi seguire Ernesto su <a href='http://twitter.com/parsifal32'>Twitter</a>, su <a href='http://www.facebook.com/parsifal32'> Facebook</a>, o su <a href='http://www.youtube.com/user/parsifal32'> Youtube</a></font><br style='clear:both;'/></p>
</div>
</b:if>

dove la prima e l'ultima riga rappresentano i tag condizionali. Il testo con i riferimenti e i link sono stati inseriti come semplice esempio e possono essere modificati a piacere.

I due codici esadecimali #f2a136' e #191919' determinano rispettivamente il colore del titolo del box e quello del testo immesso e possono essere sostituiti da altri più in tono con gli altri colori del blog. Si va su Salva modello per terminare l'installazione.



8 commenti :

  1. E possibile inserire un box simile nella barra laterale, tra i widget?

    RispondiElimina
    Risposte
    1. @giancarlo+-+-+
      Non te lo so dire così su due piedi. Per prima cosa elimina i due tag condizionali colorati di viola dal secondo codice poi incolla i due codici uno di seguito all'altro. Vai su Layout > Aggiungi un gadget > HTML/Javascript e incollaci tutto.
      Il gadget si vedrà in tutte le pagine del blog (non ho testato ma dovrebbe funzionare).

      Elimina
  2. Se nel blog ci sono più autori come si fa?

    RispondiElimina
  3. @kevinmaggi
    Studierò la cosa. Seguimi nei prossimi giorni (senza impegno...)

    RispondiElimina
  4. Ciao! Cercavo di modificare il mio riquadro autore! Su layout l'ho già nascosto usando l'opzione modifica ma purtroppo è impostato sul modello e non riesco a trovare i giusti codici HTML per modificarlo da li!
    Grazie mille!

    RispondiElimina
    Risposte
    1. Non mi pare di aver scritto nulla in merito perché mi sembra di ricordare che non ci sia un codice ma solo una finestra di configurazione
      @#

      Elimina

Non inserire link cliccabili altrimenti il commento verrà eliminato. Metti la spunta a Inviami notifiche per essere avvertito via email di nuovi commenti.
Info sulla Privacy