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

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

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.