Pubblicato il 17/02/14 - aggiornato il  | 11 commenti :

Come mostrare il Profilo dell'autore sotto ai post di Blogger.

Come mostrare il Profilo di Blogger (o di Google Plus) alla fine dei post di Blogger e come personalizzarlo.
Ho già pubblicato un articolo su come si possa mostrare il Profilo dell'autore alla fine di ogni articolo su Blogger ma ultimamente sono stati introdotti dei nuovi Tag di Blogger che rendono questa opzione più facilmente personalizzabile. Si tratta di <data:post.authorPhoto.url/> e <data:post.authorAboutMe/> che sono delle "variabili" da inserire nel codice del template che mostrano rispettivamente l'avatar e le informazioni sull'autore. Il box autore introdotto tramite le funzioni di Blogger sarà visibile in tutte le pagine ivi comprese la Homepage, le pagine d'archivio e quelle delle etichette. L'obiettivo di questo post sarà quello di inserire il Profilo dell'autore solo alla fine dei singoli post per non appesantire troppo l'apertura delle pagine che contengono più elementi.

Dopo aver salvato il template si va su Layout > Post sul blog > Modifica e si mette la spunta a Mostra profilo autore sotto il post. Si termina andando su Salva

profilo-autore-post-blog

Il profilo mostrato sarà quello di default di Blogger. Per cambiarlo si clicca su Modello > Modifica HTML > Vai al widget > Blog1

modello-html-blogger

Con Ctrl+F si cerca la sezione <b:includable id='post' var='post'> e se ne visualizza l'intero codice cliccando sulla freccetta nera posta alla sinistra. Sempre con Ctrl+F o scorrendo il codice adesso ci cerca l'altra riga <div class='post-footer'> e, subito sopra, si incolla quest'altro codice

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style>
.author-box{margin:10px 0;background:#90b6f2;}
.author-avatar{float:left;width:30%;height:auto;}
.author-info{float:left;padding-left:1%;width:65%;}
.author-name{padding-left:25px;color:#fff !important;}
.author-name h3{display:inline;margin:0;padding:0;font-size:22px;}
.author-about{margin:0;padding:10px 0;color:#111 !important; text-align:justify;}
</style>
<div class='author-box'>
<!---->&lt;img alt=&#39;<data:post.author/>&#39; class=&#39;author-avatar&#39; src=&#39;<b:if cond='data:post.authorPhoto.url'><data:post.authorPhoto.url/><b:else/>https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhaz8I7BX52g4H3gZDUbB_-X6Z0LepCWZW8nut6a8AznF_s_G5k0FWZUIpe_Jkho0C4OFzfmKDSvCeH_Z4kU9Q8zpS-RiNE3H_XA6Uc4tAnk0eLrT-K8udx254bJv2qNXvxvJznwNkj-5A/s96/senzanome.png</b:if>&#39; title=&#39;<data:post.author/>&#39;/&gt;<!---->
<div class='author-info'>
<!---->&lt;a class=&#39;author-name&#39; style=&#39;background:left no-repeat url(<b:if cond='data:post.authorProfileUrl'>http://www.google.com/images/icons/ui/gprofile_button-16.png)&#39; href=&#39;<data:post.authorProfileUrl/><b:else/>http://www.blogger.com/img/logo-16.png)&#39; href=&#39;<data:post.authorUrl/></b:if>&#39; rel=&#39;author&#39; target=&#39;_blank&#39; title=&#39;<data:top.authorLabel/>&amp;nbsp;<data:post.author/>&#39;&gt;<!----><h3><data:post.author/></h3><!---->&lt;/a&gt;<!---->
<b:if cond='data:post.authorAboutMe'>
  <p class='author-about'><data:post.authorAboutMe/></p>
</b:if>
</div>
<div style='clear:both'/>
</div>
</b:if>

Oltre ai tag di Blogger menzionati sopra sono state utilizzate le icone ufficiali di Blogger e di Google+. Le dimensioni percentuali e i codici dei colori possono essere modificati secondo i nostri gusti così come l'URL della immagine del profilo se non è presente quella dell'autore. Dopo aver salvato il modello se adesso si apre il blog si vedrà in homepage il profilo ufficiale di Blogger mentre nei post si vedranno due box. Oltre a quello di Blogger si visualizzerà anche quello che abbiamo aggiunto manualmente.

profilo-autore-blogger

È evidente che dovrà essere tolto quello di Blogger. Si torna quindi su Modello > Modifica HTML > Vai al widget > Blog1 e si cerca sempre la sezione <b:includable id='post' var='post'> all'interno della quale con Ctrl+F si  trova la riga che inizia così

<div class='author-profile'  ….. 

A tale riga si aggiunge un nuovo selettore in questo modo

<div class='author-profile' id='profilo-autore'  ….

come mostrato da questo screenshot

profilo-autore-blogger[5]

Adesso si cerca la riga che determina la fine dei CSS ]]></b:skin> e, subito sopra, si incolla la nuova riga

#profilo-autore {display:none;}

Si salva nuovamente il modello.

profilo-googleplus-blogger

Se ora si apre la Homepage non si vedrà il profilo di Google Plus che invece sarà visibile alla fine del post ma non comparirà più duplicato insieme agli altri elementi del footer.


11 commenti :

  1. Ernesto come sempre, grazie dell'informazione!
    Antonella

    RispondiElimina
  2. Sulla homepage, ho due problemi, prima debbo sostituire delle foto, e non riesco a trovare come trasformare le foto in linguaggio html, per inserirlo al posto delle foto esistenti.
    Secondo, sempre nella home, debbo inserire le pagine esistenti, ed aggiungerne di nuove, sono riuscito ad inserire solo il nome, ma non riesco ad inserire la pagina vera è propria, puoi fornirmi le stringhe html, ed il giusto posto dove inserirli.

    Grazie per la cordialità...

    RispondiElimina
    Risposte
    1. Non ho capito un granché e credo che anche tu non abbia le idee chiare su quello che si può fare e quello che non si può fare. Mi pare che tu abbia scaricato un modello da internet che vorresti modificare nelle foto presenti nella home. Ti posso dare una idea. Clicca con il destro del mouse sulle immagini e vai su Copia URL Immagine per poi incollarlo in un file di testa. Vai su Modello > Modifica HTML e tramite Ctrl+F cerca l'URL e sostituiscilo con quello di un'altra immagine che in precedenza avrai caricato su Picasa. Per inserire le pagine in home invece è semplicissimo, basta iniziare a pubblicare dei post :)
      @#

      Elimina
    2. Francamente Ernesto, non capisco, la tua risposta, forse sarai arrabbiato per beghe personali.
      Io le idee le ho chiare abbastanza, su ciò che fare e su ciò che non fare, se avessi letto il messaggio con attenzione che ti ho inviato su fb, ed avresti visitato il blog, avresti compreso bene la richiesta.
      ma sicuramente sarai preso da parecchie richieste, e sarai molto galvanizzato, dalla notorietà acquisita.
      Comunque, va bene lo stesso, risolverò da solo...!!!
      Visto che l'informazione non è UTILE....!!

      Elimina
    3. Mi spiace se non sono stato utile. Sono sempre stato chiaro con i lettori a cui ho sempre detto di avere molte lacune e di essere tutt'altro che onnisciente
      @#

      Elimina
    4. la soluzione è semplice per entrambi : Io risolvo e tu crei nuove informazioni da diffondere.
      Basta osservare la sidbar, e ti accorgi, che esiste il nome delle pagine, ma non puoi entrarci, perché mancano i collegamenti interni, sul : modifica html.
      le foto ho provato ciò che suggerivi, ma non funzionano, so che esistono programmi di commutazione fra immagini jpg e html, magari tu conosci qualcosa..

      Elimina
    5. Onestamente continuo a non capire. Ho visto il blog. hai un modello personalizzato scaricato da internet. Per modificarlo dovresti chiedere aiuto al suo autore che ovviamente ne conosce il codice. Nella sidebar c'è una bella divisione multitab in stile Repubblica. Sia i contenuti sia i nomi delle schede le puoi modificare andando su Layout.
      @#

      Elimina
  3. Salve, io avrei il problema opposto. Cancellare il "Postato" nomeutente alla fine di ogni post. puoi aiutarmi?

    RispondiElimina
  4. Ciao Ernesto, grazie per i consigli! Una cosa: come faccio a inserire il testo del profilo? Ho provato ad inserire la 'story' su google+ ma non viene visualizzata...

    RispondiElimina
    Risposte
    1. Se hai unificato il profilo di Blogger con quello di Google+ apri questa pagina
      https://aboutme.google.com/
      e in Storia -> Mi presento scrivi qualcosa su di te
      @#

      Elimina
    2. Eh ho già provato ma non funziona :(

      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