Créer un Blog avec Blogger

Texte sur fond de couleur ou encadré


Information: En suivant ce tutoriel vous serez capable de réaliser un cadre similaire pour votre blog...

C'est assez simple, mais il faut obligatoirement passer en mode html !




1-Changer la couleur de fond d'un bloc de texte


Choisir les couleurs et leur code
Pour débuter, choisissez deux couleurs : une pour le fond du bloc de texte et une pour la police d'écriture. Pour choisir ces couleurs, utilisez l'excellent service proposé par Adobe : Couleur CC. Il vous permettra de récupérer le code Hexadécimal de votre couleur.
ou via  Codes-couleur ou code couleur  ou colors_picker)


Copier/coller ce code en y ajoutant vos couleurs et texte

<p style="padding: 20px; background: #code couleur; ">
Votre texte
</p>


pour obtenir

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum

qui correspond à ce code équivalent (modifié par Blogger)

<div style="background: #FCF550; padding: 20px;">
Mon texte
</div>


2- un cadre dans un article à partir d'une cellule de tableau

C'est assez simple, mais il faut passer en mode html !
Voir également l'article consacré au tableau car, en fait, ici, nous allons créer un tableau composé d'une seule cellule.

METHODE dans un article, dans un "gadget" texte ou HTML/Javascript, se mettre d'abord en "Mode HTML"

Attention à bien distinguer 
  • Mode "code HTML" => Image de A
    par défaut la balise <br> s'affiche.
    Dans ce mode on ne peut que mettre du code et rien d'autre.
  • Mode texte "format RTF" => image de Bc'est le mode "visuel"  par défaut : vous voyez ce qui s'affichera.
  • Pour passer de l'un à l'autre 
    • en mode HTML : cliquer sur "Format RTF"pour passer en mode texte  
    • en mode texte: cliquer sur "Modifier code HTML" pour passer en mode Texte RTF

A-en mode "HTML" : insérer le code ci-dessous
C'est très simple si rien n'est encore rédigé...


Si l'article a du contenu, ce sera plus difficile. Il faudra, par exemple, d'abord repérer l'endroit ou mettre le code en mode HTML en ayant auparavant  fait un repère dans le texte (avoir écrit en majuscule BLABLA par exemple)


B-en mode "Rédiger" : modifier le contenu du cadre "blablabla"






LE CODE HTML

Il faut tout copier ce qui se situe entre les 2  -----
  • CODE pour un cadre basique (changer ensuite le  texte, ici colorié en rouge)
----------------------------------------------------------------------------
<TABLE BORDER>
<TR><TD>blablabla</TD></TR>
</TABLE>
 -----------------------------------------------------------------------
ce qui donnera

blablabla

  • Améliorer les COULEURS il faudra ajouter au code:

BORDER=3                      => épaisseur de la bordure en pixels
BORDERCOLOR="red">             => couleur de la bordure
BORDER BGCOLOR="F9FFD9">       => couleur de fond

=> en fait, il s'avère que Blogger n'accepte pas le code (classique)  pour la couleur de la bordure  (bordercolor) qui reste "grise". Seule la couleur de fond est modifiable.
Une couleur de bordure est toujours possible (voir ci-dessous) mais le code est complexe...


ce qui donne :
CODE pour un cadre amélioré
(changer le  texte, et, aussi les valeurs du code,  ici colorié en rose)

-----------------------------------------
<TABLE BORDER=3  BORDERCOLOR="#003399"  BGCOLOR="F9FFD9">
<TR><TD>blablabla</TD></TR>
</TABLE>
----------------------------------
blablabla


3-D'autres cadres élaborés...
Ci-dessous il est possible de retrouver une multitude d'exemples de cadre, facile à utiliser. Pour chacun des cadres présenté, il suffit de copier/coller le code joint. Le plus difficile est donc de faire un choix parmi tous les cadres disponibles.


Cadre d'information   avec contour gris ombré, fond blanc  et texte en bleu (modifiable via le code  =>color:blue)
Le code :
<blockquote style="border: 1px solid rgb(241, 241, 241); box-shadow: rgba(0, 0, 0, 0.2) 0px 2px 4px; font-family: verdana ; font-size: 12px; line-height: 20px; margin: 10px; outline: 0px; padding: 10px; vertical-align: baseline;">
<span style="color: blue;">votre texte</span></blockquote>

Cadre d'information: Copier/coller le code présent ci-dessous pour mettre en place le même code sur votre site Jimdo.
<div style="border: 2px solid #1c75c8; padding: 3px; background-color: #c5ddf6; -moz-border-radius-topleft: 5px; -moz-border-radius-topright: 5px; -moz-border-radius-bottomright: 5px; -moz-border-radius-bottomleft: 5px;">
<p>
<strong>Cadre d'information</strong>: Copier/coller le code présent ci-dessous pour mettre en place le même code sur votre site Jimdo.
</p>
</div>
?
Cadre d'information: Ce cadre est idéal pour insérer un texte informatif que les leclteurs repéreront facilement. Pour l'utiliser il suffit de copier/coller le code ci-dessous.
<div style="padding:5px; background-color:#9ba0ee; border:2px solid #656ab0; -moz-border-radius:9px; -khtml-border-radius:9px; -webkit-border-radius:9px; border-radius:9px;">
<div style="font-size: 3em; float: left; width: 40px; text-align: center; margin-right: 5px; height: 20px; padding:3px;">?</div>

<strong>Cadre d'information</strong>: Ce cadre est idéal pour insérer un texte informatif que les leclteurs repéreront facilement. Pour l'utiliser il suffit de copier/coller le code ci-dessous.
</div>
!
Cadre d'avertissement: Ce cadre est idéal pour insérer un texte d'avertissement que les leclteurs repéreront facilement. Pour l'utiliser il suffit de copier/coller le code ci-dessous.
<div style="padding:5px; background-color:#ffaca3; border:2px solid #ff3924; -moz-border-radius:9px; -khtml-border-radius:9px; -webkit-border-radius:9px; border-radius:9px;">
<div style="padding: 4px; font-size: 3em; float: left; width: 40px; text-align: center; margin-right: 5px; height: 20px;">!</div>

<strong>Cadre d'avertissement</strong>: Ce cadre est idéal pour insérer un texte d'avertissement que les leclteurs repéreront facilement. Pour l'utiliser il suffit de copier/coller le code ci-dessous.
</div>
Cadre pointillés: Pour utiliser ce cadre, il suffit de copier puis coller le code qui se trouve ci-dessous.
<div style="padding:3px; border:2px dotted #a5a5a5; background-color:#e3e3e3;">
<strong>Cadre pointillés</strong>: Pour utiliser ce cadre, il suffit de copier puis coller le code qui se trouve ci-dessous.
</div>
Cadre important: Idéal pour mettre une information en valeur sur son site. Pour réaliser un cadre similaire, il suffit de se servir du code présenté ci-dessous en utilisant "copier/coller".
<div style="padding:3px; border:5px double #ff6b00; background-color:#ffdbc1;">
<strong>Cadre important</strong>: Idéal pour mettre une information en valeur sur son site. Pour réaliser un cadre similaire, il suffit de se servir du code présenté ci-dessous en utilisant "copier/coller".
</div>
Cadre de citation: Idéal pour citer les propos de quelqu'un dans un texte. Pour utiliser ce cadre il suffit de copier et coller le code ci-dessous.
<div style="padding:3px; padding-left:6px; border-left:4px solid #d0d0d0; background-color:#f1f1f1; margin-left:20px; font-style:italic;">
<strong>Cadre de citation</strong>: Idéal pour citer les propos de quelqu'un dans un texte. Pour utiliser ce cadre il suffit de copier et coller le code ci-dessous.
</div>
Cadre de citation 2: Idéal pour citer les propos de quelqu'un dans un texte. En copiant-collant le code ci-dessous vous pourrez utiliser ce cadre sur votre site.
<div style="padding:3px; padding-left:6px; border:1px dotted #d0d0d0; border-left:4px solid #d0d0d0; margin-left:20px; font-style:italic;">
<strong>Cadre de citation 2</strong>: Idéal pour citer les propos de quelqu'un dans un texte. En copiant-collant le code ci-dessous vous pourrez utiliser ce cadre sur votre site.
</div>
Cadre tirets: Cadre idéal pour une information à découper, autrement dit des informations tel que les coupons de réduction, les bulletin à remplir ...
Pour reproduire ce cadre sur votre site web, il suffit de recopier le code HTML ci-dessous, tout simplement en le copiant/collant.
<div style="padding:3px; border:2px dashed #c0c0c0;">
<strong>Cadre tirets</strong>: Cadre idéal pour une information à <em>découper</em>, autrement dit des informations tel que les coupons de réduction, les bulletin à remplir ...<br />
Pour reproduire ce cadre sur votre site web, il suffit de recopier le code HTML ci-dessous, tout simplement en le copiant/collant.
</div>
Cadre de contenu neutre: Ce cadre assez simpliste et discret peut être installer simplement en copiant/collant le code ci-dessous.
<div style="padding:4px; border:4px solid #e0e0e0;">
<div style="padding:3px; background-color:#e0e0e0;">

<strong>Cadre de contenu neutre</strong>: Ce cadre assez simpliste et discret peut être installer simplement en copiant/collant le code ci-dessous.
</div>
</div>
Cadre cinéma: Rien de mieux pour un site qui a pour thématique le cinéma. Une utilisation originale pourrait être de mettre des vignettes d'un film dedans. Pour ce servir de ce cadre, il suffit de se recopier ou de copier/coller le code présent juste en dessous.
<div style="padding:3px; background-color:#888;">
<div style="padding:4px; border-top:8px dotted #fff; border-bottom:8px dotted #fff;">

<strong>Cadre cinéma</strong>: Rien de mieux pour un site qui a pour thématique le cinéma. Une utilisation originale pourrait être de mettre des vignettes d'un film dedans. Pour ce servir de ce cadre, il suffit de se recopier ou de copier/coller le code présent juste en dessous.
</div>
</div>
Cadre orignal: Pour mettre en place ce cadre il suffit de copier-coller le code ci-dessous. Pour personnaliser ce cadre, il est possible de modifier la couleur de fond (c'est-à-dire le code e3e3e3).
<div style="padding:3px; border-top:5px dashed #fff; border-bottom:5px dashed #fff; background-color:#e3e3e3;">
<strong>Cadre orignal</strong>: Pour mettre en place ce cadre il suffit de copier-coller le code ci-dessous. Pour personnaliser ce cadre, il est possible de modifier la couleur de fond (c'est-à-dire le code e3e3e3).
</div>
Cadre peu large: Pour personnaliser la largeur de ce cadre, il faut modifier la valeur présent après le "width". La valeur actuel est de 300 pixels.
Pour utiliser le cadre, il faut recoper le code présent juste en dessous.
<div style="padding:5px; width:300px; margin:auto; border:8px solid #67ab9f; background-color:#b3d8d2; -moz-border-radius:20px; -khtml-border-radius:20px; -webkit-border-radius:20px; border-radius:20px;">
<strong>Cadre peu large</strong>: Pour personnaliser la largeur de ce cadre, il faut modifier la valeur présent après le "width". La valeur actuel est de 300 pixels.<br />
Pour utiliser le cadre, il faut recoper le code présent juste en dessous.
</div>
Cadre 1: L'utilisation de ce cadre est simple, il suffit de copier/coller le code présent juste en dessous de ce cadre.
<div style="padding:3px; border:4px inset #4cdc67; background-color:#4cdc67;">
<strong>Cadre 1</strong>: L'utilisation de ce cadre est simple, il suffit de copier/coller le code présent juste en dessous de ce cadre.
</div>
Cadre 2: L'utilisation de ce cadre est simple, il suffit de copier/coller le code présent juste en dessous de ce cadre.
<div style="padding:3px; border:4px outset #ee6388; background-color:#ee6388;">
<strong>Cadre 2</strong>: L'utilisation de ce cadre est simple, il suffit de copier/coller le code présent juste en dessous de ce cadre.
</div>
Cadre 3: L'utilisation de ce cadre est simple, il suffit de copier/coller le code présent juste en dessous de ce cadre.
<div style="padding:3px; border:8px ridge #d04cdc; background-color:#d04cdc;">
<strong>Cadre 3</strong>: L'utilisation de ce cadre est simple, il suffit de copier/coller le code présent juste en dessous de ce cadre.
</div>






















SOURCE  de tous les exemples ci-dessus partie3.
Merci  à l'auteur !