Rien de particulier pour l'encadrement d'un texte dans Blogger, il s'agit simplement des règles du HTML. En HTML l'encadrement se fait en créant un tableau avec une seule cellule. Pour commencer on écrit le texte que l'on veut encadrer avec l'éditeur de Blogger puis ensuite on se rend dans l'onglet "Modifier le code HTML" pour créer sa table.
Exemple
(les différents tableaux présentés reprennent le code du précédent en y ajoutant une seule modification à la fois)
1ère étape
La rédaction du texte à encadrer :
La vie
est
un long fleuve tranquille
est
un long fleuve tranquille
Code HTML :
<div style="text-align: left;">
La vie
est
un long fleuve tranquille</div>
2éme étape
On encadre le texte en créant le tableau en ajoutant les attributs suivants au début et à la fin du code HTML précédent :
<table border="1" cellpadding="1" cellspacing="1"><tbody><tr><td>
et
</td></tr></tbody></table>
La vie est un long fleuve tranquille |
Code HTML :
<table border="1" cellpadding="1" cellspacing="1"><tbody>
<tr><td><div style="text-align: left;">La vie
est
un long fleuve tranquille</div>
</td></tr>
</tbody></table>
3éme étape
La personnalisation
Pour centrer le contenu du cadre soit on utilise les outils de l'éditeur de Blogger (centrer, justifier, droite, gauche) soit on retouche le code HTML :
La vie est un long fleuve tranquille |
Code HTML :
<table border="1" cellpadding="1" cellspacing="1"><tbody>
<tr><td><div style="text-align: center;">
La vie
est
un long fleuve tranquille</div>
</td></tr>
</tbody></table>
On choisit l'épaisseur de la bordure en modifiant l'attribut border="1"
La vie est un long fleuve tranquille |
Code HTML :
<table border="10" cellpadding="1" cellspacing="1"><tbody>
<tr><td><div style="text-align: center;">
La vie
est
un long fleuve tranquille</div>
</td></tr>
</tbody></table>
Pour centrer (ou le mettre à droite ou à gauche) le tableau, il suffit d'ajouter l'attribut align="center" (ou left ou right) à la balise <table> :
La vie est un long fleuve tranquille |
Code HTML :
<table align="center" border="10" cellpadding="1" cellspacing="1"><tbody>
<tr><td><div style="text-align: center;">
La vie
est
un long fleuve tranquille</div>
</td></tr>
</tbody></table>
Pour espacer le texte des bordures on modifie l'attribut cellpadding="1" :
La vie est un long fleuve tranquille |
Code HTML :
<table align="center" border="10" cellpadding="10" cellspacing="1"><tbody>
<tr><td><div style="text-align: center;">
La vie
est
un long fleuve tranquille</div>
</td></tr>
</tbody></table>
L'espacement entre les cellules peut être modifier avec l'attribut cellspacing="1" même dans le cas d'un tableau avec une cellule comme, ce qui permet de varier l'esthétique du cadre :
La vie est un long fleuve tranquille |
Code HTML :
<table align="center" border="10" cellpadding="10" cellspacing="10"><tbody>
<tr><td><div style="text-align: center;">
La vie
est
un long fleuve tranquille</div>
</td></tr>
</tbody></table>
A savoir : Les balises <tbody> et </tbody> ne sont pas obligatoires, blogger les ajoutera lui-même. Les balises <div> et </div> ne sont pas nécessaire, il est tout à fait possible de faire sans et c'est la balise <tr> qui reprendra les attributs de la balise <div> :
| La vie est un long fleuve tranquille |
Code HTML :
<table align="center" border="10" cellpadding="10" cellspacing="10"><tbody>
<tr align="center"> <td>La vie
est
un long fleuve tranquille</td></tr>
</tbody></table>
D'autres possibilités existent avec la balise <table>, pour aller plus loin vous pouvez lire cet excellent article sur les tableaux : http://www.allhtml.com/articles/detail/369.
