Come inserire un riquadro su blogger

Per rendere più bello da vedere e offrire una user experience migliore si può inserire un riquadro nei post pubblicati sulla piattafoma Blogger.

Creare una sorta di tabella è abbastanza semplice e, grazie al linguaggio html, si possono apportare modifiche al bordo, al colore e alla grandezza.

L'inserimento di un riquadro non è previsto nell'editor di testo ma, nel caso si volesse inserire sempre in un post, si potrebbe creare un formato post così da avere uno schema già pronto sul quale editare gli articoli in futuro.

Come inserire un riquadro su Blogger

Un riquadro è una tabella che può essere personalizzata per adattarla alla palette di colori del sito.

Saper creare un riquadro è utile per diverse ragioni:

per evidenziare un elenco puntato per inserire link alle diverse sezioni del post per dare risalto a qualcosa

Questo sopra è un esempio di quello che s'intende per riquadro e, come vedete, avere una parte del testo ben evidenziato riesce a catturare l'attenzione di chi legge.

Volete sapere come fare un riquadro uguale a questo?

Questo è il codice da inserire:

<table bgcolor="#0000FF" border="1" style="width: 40%;"><tbody>
<tr>  <td bgcolor="00FFFF" width="40%">TESTO O ELENCO DA INSERIRE</td>  </tr>
</tbody></table>

Spiego nel dettaglio le varie voci del codice html così che possiate personalizzarlo a vostro piacimento, creando dei riquadro perfetti per il vostro sito.

bgcolor: indica il colore del bordo del riquadro.
border: indica lo spessore del riquadro che può essere messo a 0 in modo che sia molto sottile.
td bgcolor: indica il colore del riquadro che consiglio di mettere di una tonalità adatta agli altri colori del sito.
width: indica le dimensioni del riquadro e può essere un valore in percentuale oppure in px.

Dopo table si può mettere align="center" in modo che la tabella sia centrata nella pagina, come nell'esempio sotto dove ho impostato come larghezza 300px:

TESTO DA INSERIRE NEL RIQUADRO

Il codice da mettere in questo caso sarà:

<table align="center" bgcolor="#0000FF" border="1" style="width: 600px;"><tbody>
<tr>  <td bgcolor="#00FFFF" width="600">TESTO DA INSERIRE <br />
NEL RIQUADRO </td>  </tr>
</tbody></table>

Ovviamente si può modificare il codice mettendo una larghezza inferiore, oppure in percentuale, cambiando il colore del riquadro e aumentando lo spessore del bordo.

Un piccolo trucco per velocizzare la creazione di elenchi puntati o link che rimandano ad altre pagine all'interno del riquadro è quella di scrivere il testo e poi andare nell'editor html.
A questo punto si può inserire nella parte antecedente il testo la prima parte del codice e dopo la seconda parte, in questo modo si scrive nell'editor normale e solo in un secondo tempo si mettono i codici.

Grazie all'anteprima si potrà poi vedere il risultato nel nostro lavoro e se saranno necessarie delle modifiche.

TESTO DA INSERIRE NEL RIQUADRO

Il bello del codice html è che si può personalizzare a proprio piacimento.

Rispetto a tutte le impostazioni del tema che si possono cambiare con un click queste personalizzazioni vanno fatte nei singoli post, perciò, se si dovesse cambiare la palette di colori del blog, sarebbe meglio tornare a modificare anche i colori dei riquadri che si sono inseriti nei post.