Pubblicato il 10/01/12e aggiornato il

Come personalizzare la descrizione di Blogger inserendola su più righe, con il grassetto e con il corsivo.

L'articolo che ho dedicato all'allineamento di Header, Nome e Descrizione del blog ha suscitato molto interesse e ha scaturito diversi commenti interessanti. In uno di questi mi si chiedeva come fosse possibile inserire la descrizione del blog in due o più righe. Di default infatti Blogger va a capo solo alla fine dello spazio dell'header. Ragionandoci un po' sopra ho pensato che forse è opportuno dedicare un altro post all'argomento della Descrizione del blog anche se sono in molti che la nascondono sotto l'immagine dell'header scegliendo l'opzione di inserirla dietro all'Intestazione.

Se si vogliono modificare i colori della descrizione possiamo andare su Modello > Personalizza. Si aprirà il Designer Modelli e dovremo andare su Avanzato > Descrizione del blog per settare un diverso colore per la descrizione. Si clicca in alto a destra su Applica al blog per renderla effettiva.

Vediamo come sia semplice visualizzare la descrizione su più righe. Basta andare su Layout > Intestazione > Modifica e inserire in Descrizione del blog

Prima riga della descrizione <br/> Seconda riga della descrizione <br/> Terza riga della descrizione ….

I tag <br/> sono dei salti di riga che permetteranno ai visitatori di visualizzare la descrizione su due o più righe. Blogger modificherà <br/> in <br> e quindi si può opzionalmente scegliere di inserirlo subito.  Oltre a questo tag, il widget Intestazione supporta anche il grassetto e il corsivo. Il grassetto si ottiene inserendo <b> all'inizio e </b> alla fine della frase che vogliamo vedere in grassetto mentre il corsivo (o italic) si genera inserendo il tag <i> all'inizio e </i> alla fine. Un esempio di descrizione con grassetto e corsivo potrebbe essere questo

<b>Prima riga della descrizione</b> <br>
<i>Seconda riga della descrizione</i>

Si può anche usare il grassetto corsivo in questo modo <b><i>grassetto corsivo</i></b>. Al posto di <b> e <i> possono essere usati anche <strong> e <em> che hanno un comportamento analogo. Il codice precedente, incollato nel widget in questo modo

descrizione-blogproduce questo risultato

descrizione-blog-blogger 

Le varie righe della descrizione possono anche essere posizionate diversamente dall'allineamento a sinistra che è di default. Per esempio se andiamo su Modello > Modifica HTML > Procedi, cerchiamo la riga ]]></b:skin> e, subito sopra, incolliamo questo codice

#header-inner {text-align: center;}

si allineeranno al centro Nome e Descrizione del blog in questo modo

centrare-descrizione-nome-blog-blogger

Se vogliamo centrare solo il Titolo del blog ma non la descrizione usiamo invece il codice

.titlewrapper{text-align: center;}

All'opposto per centrare la Descrizione ma non il titolo utilizziamo questo ultimo codice

.descriptionwrapper {text-align: center;}

descrizione-nome-blog-blogger-centrati

I due screenshot mostrano rispettivamente il risultato dell'applicazione dei due precedenti CSS.





1 commento :

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.