Pubblicato il 07/10/12e aggiornato il

Come ingrandire l'immagine del widget del Profilo su Blogger.

Come ingrandire l'avatar del Profilo di Blogger e come personalizzare il widget.
Il Profilo è un widget ufficiale di Blogger che viene inserito di default nel momento in cui si crea un nuovo blog. Se abbiamo scelto un template scaricato da internet o se lo avevamo tolto, lo possiamo sempre ripristinare andando su Layout > Aggiungi un gadget > Profilo per poi cliccare su Salva.

Come è noto il Profilo di Blogger può essere unificato con quello di Google Plus. Anche in questo caso però il Profilo avrà lo stesso aspetto con una miniatura piuttosto piccola insieme alle note biografiche che abbiamo voluto condividere su Blogger o su Google Plus.

I siti che danno molta importanza al Profilo dell'autore possono apportare delle modifiche al CSS per  evidenziare maggiormente l'avatar dell'autore. In sostanza si può avere questo risultato


aumentare-dimensioni-avatar-profilo

che valorizza maggiormente l'immagine dell'autore del blog. Nel mio caso forse sarebbe il caso di operare in modo da ridurre la dimensione della foto ma prendetelo solo come esempio. Si va su Modello > Modifica HTML > Procedi e si cerca la riga ]]></b:skin>. Subito sopra si incolla il codice

.profile-img{
height: auto;
width: 240px;
}

Si salva il template. Ovviamente i 240 pixel possono essere calibrati in funzione della sidebar. Siete di quelli che non vi accontentate mai e cercate sempre la perfezione? Allora si può pensare di giustificare il testo della biografia, di colorarlo in modo diverso e di metterlo in grassetto. Il codice da aggiungere è

.profile-img{
height: auto;
width: 240px;
}
.profile-textblock {
text-align:justify;
font-weight:bold;
color:#003366;
}

con i parametri in rosso da modificare a piacere. Non siete ancora soddisfatti? Si può aggiungere una cornice al Profilo per evidenziarlo ancora di più in questo modo

profilo-blogger

Il codice da incollare sopra a ]]></b:skin>  diventa

.profile-textblock {
text-align:justify;
font-weight:bold;
color:#003366;
padding:2px;
}
.profile-img{
height: auto;
width: 235px;
}
#Profile1{
border: 3px solid #940F04;
}

Se volete eliminare la riga Visualizza il mio profilo completo basta aggiungere quest'altro codice

.profile-link {display:none;}

Infine se siete poco avvezzi alla modifica del template è anche possibile incollare questi fogli di stile su Modello > Personalizza > Avanzato > Aggiungi CSS. Per comprendere il significato dell'ultimo blocco nel penultimo CSS vi consiglio di leggere il post sullo stile dei bordi.




15 commenti :

  1. Grazieeee!!! Di tutti i tutorial trovati, questo era senz'altro il più semplice ed immediato! :)

    RispondiElimina
  2. Domanda: vorrei centrare non solo il testo del gadget, ma anche il titolo, con il nome del mio blog e la posizione. Come posso fare? Grazie!

    RispondiElimina
    Risposte
    1. Credo che tu ti riferisca a questo widget e non in generale. Per centrare titolo widget e testo prova con questo codice

      .profile-textblock {
      text-align:center;
      font-weight:bold;
      color:#003366;
      }
      #Profile1 h2{text-align:center;}

      Per l'immagine è più complicato ...
      @#

      Elimina
  3. Buongiorno, chiedo come fare ad inserire una foto profilo nella sezione segui pubblicamente. Nonostante io provi a caricare una foto dal pc mi dice che è impossibile!!! grazie

    RispondiElimina
    Risposte
    1. Quello che riporti è chiaramente un disservizio o un bug quindi non posso aiutarti visto che dipende dai server. Ti posso consigliare però di provare con un altro browser. Delle volte si creano delle incompatibilità con i cookie. Prova eventualmente anche a entrare tramite una pagina In Incognito per non avere alcun problema con i cookie. Si tratta solo di un tenativo e non della soluzione :)
      @#

      Elimina
  4. Tra la sfilza di codici che trovo dopo aver cliccato su Modifica HTML
    non trovo la riga che dici di cercare..
    Come procedo a questo punto? :(

    RispondiElimina
    Risposte
    1. Intorno alla 13-esima o 14-esima riga dovresti vedere una riga colorata di verde come questa
      < b:skin > ... < /b:skin >
      Sulla sinistra di quella riga c'è una feccetta nera. Cliccaci sopra. Potrai così visualizzare tutto il codice compreso tra quei due tag e che è il CSS del blog. Il codice sarà colorato di azzurro. La riga che cerchi sarà l'ultima di quel codice. Comunque potrai trovarla facilmente digitando Ctrl+F.
      Per evitarti problemi futuri con la ricerca del codice nel modello ti consiglio di leggerti questi post e di vedere i video che vi sono incorporati
      http://www.ideepercomputeredinternet.com/2013/04/how-to-search-blogger-template-code.html
      http://www.ideepercomputeredinternet.com/2013/08/cercare-codice-html-blogger-template.html
      http://www.ideepercomputeredinternet.com/2013/10/blogger-versione-mobile-desktop-personalizzare-editor-html.html
      @#

      Elimina
    2. anche prima cliccavo CTRL + F ma non avendo cliccato sulla freccina nera non poteva trovare la dicitura che cercavo. ora però pur avendola trovata, e sulla riga subito sopra incollato il codice da lei indicato, non succede niente all'immagine del profilo! Giuro sto sclerando... :(

      Elimina
    3. Ho dato uno sguardo al tuo blog. È originale di Blogger? Pare di sì. Prova a sostituire nel codice questa occorenza
      .profile-img
      con quest'altra
      img.profile-img
      o con questa
      .profile-img img
      Alternativamente potrrebbe anche essere che il codice tu lo abbia incollato male. Alcune volte succede che una prentesi graffa vada a aggiungersi alla riga sopra a cui incollare il codice. Controlla che il codice sia stato incollato prima delle due parentesi quadre e che non ci siano graffe
      @#

      Elimina
    4. MI CORREGGA SE SBAGLIO... E' GIUSTO COSì?

      .Header {
      text-align: center;
      .profile-img{
      height: auto;
      width: 240px;
      }
      }]]>

      O E' SBAGLIATO?

      Elimina
    5. Sbagliatissimo. C'è una parentesi graffa in più!!!!!!. Cercherò di essere analitico. Fai click subito dopo alla parentesi graffa prima delle due quadre quindi pigia su Invio. In questo modo si creerà una riga di spazio vuoto e soto si vedrà questa riga
      ]]></b:skin>
      Subito sopra a questa riga vale a dire nello spazio vuoto incolla il codice che grovi in questo post e lascia stare quello che ti ho detto nel commento 4.a
      P.S. Non scrivere in stampatello
      @#

      Elimina
    6. O meglio. Hai due graffe. Una graffa ti è rimasta da un altro codice. La graffa prima della riga in questione cancellala proprio
      @#

      Elimina
    7. Per farti capire apri queasto link
      http://i.imgur.com/Phfec7S.png
      @#

      Elimina
    8. Ce l'ho fatta!!! Grazie infinite per la sua disponibilità..
      Non so perché ma mi sono resa conto che premendo invio, non si creava una riga vuota e in più di doppiava in automatico la parentesi graffa, quindi ho dovuto modificare il codice a mano, seguendo le sue istruzioni! Grazie mille ancora..

      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.