Créer un encart d'introduction pour la barre latérale

Voici enfin un petit tutoriel pour créer un encart d'introduction pour la barre latérale avec titre, photo et paragraphe !

C'est parti pour les explications :)
Pas besoin de faire de sauvegarde de votre thème cette fois-ci car nous n'allons pas toucher au code de notre thème ! Nous allons tout inclure dans un gadget ;)

Créer le gadget

Allez dans Mise en page à partir de votre tableau de bord puis cliquez sur Ajouter un gadget au niveau de la barre latérale :

Choisissez HTML/JavaScript dans la liste de gadgets proposée :

Dans la partie Contenu collez le code suivant :

<div id="encart-intro">
</div>

Ceci est notre code de base. id="encart-intro" permet de nommer notre gadget encart-intro. On pourra alors lui ajouter facilement une apparence particulière, en utilisant des codes CSS portant le même nom.
Nous allons partir de ce code de base et y ajouter une image, un paragraphe et un titre.

Ajouter une photo

Commençons par ajouter une image.
Le code HTML d'une image est :

<img src="http://adresse-url.fr/image.png" />

Il suffit de remplacer http://adresse-url.fr/image.png par l'adresse url de l'image.
On ajoutes ce code dans notre gadget à l'intérieur du code de base, comme ceci :

<div id="encart-intro">
<img src="http://adresse-url.fr/image.png" />
</div>

Ajouter un titre

Le code HTML d'un titre est de la forme :

<h2>Ceci est un titre</h2>

h2 signifie Heading 2, soit Titre 2 en Anglais.
On ajoutes ce code à l'intérieur du code de base, comme ceci :

<div id="encart-intro">
<img src="http://adresse-url.fr/image.png" />
<h2>Ceci est un titre</h2>
</div>

Vous pouvez l'ajouter au-dessus ou en-dessous du code de l'image, c'est comme vous voulez :)

Ajouter un paragraphe

Le code HMTL d'un texte, ou paragraphe est :

<p>Ceci est un paragraphe. Il est plus long qu'un titre et n'a pas la même mise en forme !</p>

p signifie paragraphe.
Pour ajouter un retour à la ligne ajoutez <br /> à la fin de la ligne avant le saut.
Par exemple, ceci :

<p>Ceci est un paragraphe.<br />
Il est plus long qu'un titre et n'a pas la même mise en forme !</p>

Donnera visuellement :

On ajoutes le paragraphe à l'intérieur du code de base, comme ceci :

<div id="encart-intro">
<img src="http://adresse-url.fr/image.png" />
<h2>Ceci est un titre</h2>
<p>Ceci est un paragraphe.<br />
Il est plus long qu'un titre et n'a pas la même mise en forme !</p>

</div>

Comme pour le titre, vous pouvez placer le paragraphe avant ou après l'image ou le titre. C'est comme vous voulez ;)

Modifier l'apparence du gadget

On passe maintenant à la partie la plus intéressante : la personnalisation de l'apparence du gadget !
Ajoutez le code suivant après </div> :

<style type="text/css">
/* Apparence du gadget */
#encart-intro {
}
/* Apparence de l'image */
#encart-intro img {
position: relative;
float: none;
}
/* Apparence du titre */
#encart-intro h2 {
font-family: 'PT sans', sans-serif;   /* Police du titre */
font-weight: normal;   /* Style du texte | normal = normal | bold = gras */
font-size: 18px;   /* Taille de la police */
color: #29423B;   /* Couleur du titre */
padding: 0;
}
/* Apparence du paragraphe */
#encart-intro p {
font-family: 'PT sans', sans-serif;   /* Police du paragraphe */
font-weight: normal;   /* Style du texte : normal = normal | bold = gras */
font-size: 14px;   /* Taille de la police */
color: #59776F;   /* Couleur du paragraphe */
padding: 0;
}
</style>

Comme ceci :

<div id="encart-intro">
<img src="http://adresse-url.fr/image.png" />
<h2>Ceci est un titre</h2>
<p>Ceci est un paragraphe.<br />
Il est plus long qu'un titre et n'a pas la même mise en forme !</p>
</div>
<style type="text/css">
/* Apparence du gadget */
#encart-intro {
}
/* Apparence de l'image */
#encart-intro img {
position: relative;
float: none;
}
/* Apparence du titre */
#encart-intro h2 {
font-family: 'PT sans', sans-serif;   /* Police du titre */
font-weight: normal;   /* Style du texte | normal = normal | bold = gras */
font-size: 18px;   /* Taille de la police */
color: #29423B;   /* Couleur du titre */
padding: 0;
}
/* Apparence du paragraphe */
#encart-intro p {
font-family: 'PT sans', sans-serif;   /* Police du paragraphe */
font-weight: normal;   /* Style du texte : normal = normal | bold = gras */
font-size: 14px;   /* Taille de la police */
color: #59776F;   /* Couleur du paragraphe */
padding: 0;
}
</style>

Ce code est le code CSS correspondant à notre gadget.
Vous l'aurez remarqué, on retrouve à chaque début de ligne #encart-intro, pour se référer à notre gadget que nous avons appelé ainsi grâce à id="encart-intro" au début du code HTML ;)
Ensuite on retrouve :

• img pour se référer à l'image
• h2 pour se référer au titre
• p pour se référer au paragraphe

Modifier l'apparence de fond du gadget

On s'intéresse au code CSS suivant :

/* Apparence du gadget */
#encart-intro {
}

Pour changer la couleur de fond du gadget ajouter la ligne suivante avant le signe } :

background-color: #a4d7c8;   /* Couleur du fond */

Pour ajouter une bordure ajouter les lignes suivantes avant le signe } :

border-color: #8DC0B1;   /* Couleur de la bordure */
border-style: solid;   /* Style de la bordure */
border-width: 4px;   /* Epaisseur de la bordure */

Pour ajouter un espace entre les bords du gadget et le contenu ajouter la ligne suivante avant le signe } :

padding: 20px;   /* Espace entre le contenu et les bords du gadget */

On obtient :

/* Apparence du gadget */
#encart-intro {
background-color: #a4d7c8;   /* Couleur du fond */
border-color: #8DC0B1;   /* Couleur de la bordure */
border-style: solid;   /* Style de la bordure */
border-width: 4px;   /* Epaisseur de la bordure */
padding: 20px;   /* Espace entre le contenu et les bords du gadget */
}

Visuellement on obtient :

Modifier l'apparence de l'image

On s'intéresse au code suivant :

/* Apparence de l'image */
#encart-intro img {
position: relative;
float: none;
}

Pour limiter la largeur de l'image à la largeur du gadget ajoutez la ligne suivante avant le signe } :

max-width: 100%;   /* Limite la largeur de l'image au gadget */

Pour ajuster les marges autour de l'image ajouter les lignes suivantes avant le signe } :

margin-top: 0;   /* Marge au-dessus de l'image */
margin-bottom: 0;   /* Marge en-dessous de l'image */
margin-left: 0;   /* Marge à gauche de l'image */
margin-right: 0;   /* Marge à droite de l'image */

Vous pouvez jouer sur ces valeurs et prévisualiser l'apparence en cliquant sur Prévisualiser le modèle avant de sauvegarder ;)
Par exemple, en définissant une valeur négative à margin-top on déplace l'image vers le haut du gadget : margin-top: -45px; Ce qui donne :
Si vous faites ceci il faudra ajouter un espace avant votre gadget pour contre-balancer le décalage. Ajoutez la ligne suivante :

margin-top: 20px;    /* Espace avant le gadget pour contre-balancer le décalage de la photo vers le haut */

Avant le signe } du code commençant par :

#encart-intro {

Comme ceci :

/* Apparence du gadget */
#encart-intro {
background-color: #a4d7c8;   /* Couleur du fond */
border-color: #8DC0B1;   /* Couleur de la bordure */
border-style: solid;   /* Style de la bordure */
border-width: 4px;   /* Epaisseur de la bordure */
padding: 20px;   /* Espace entre le contenu et les bords du gadget */
margin-top: 20px;    /* Espace avant le gadget pour contre-balancer le décalage de la photo vers le haut */
}

Il faudra ajuster cette valeur (20px) au décalage de votre photo vers le haut. Vous pouvez essayer d'augmenter l'espace au-dessus du gadget en augmentant cette valeur. Prévisualisez le rendu en cliquant sur Prévisualiser le modèle en haut de l'écran ;)
Pour donner une apparence circulaire à l'image, ajoutez le code suivant avant le signe } :

border-radius: 50%;   /* Apparence circulaire de l'image */

Pour ajouter une bordure à l'image ajoutez les lignes suivantes avant le signe } :

border-color: #8DC0B1;   /* Couleur de la bordure */
border-style: solid;   /* Style de la bordure */
border-width: 4px;   /* Epaisseur de la bordure */

Si vous ajoutez une bordure il faudra diminuer la largeur de l'image pour qu'elle reste centrée. Dans cet exemple, avec une bordure de 4 pixels d'épaisseur, je change la largeur à 96%. Ce qui donne :

#encart-intro img {
max-width: 96%;   /* Limite la largeur de l'image au gadget */
position: relative;
margin-top: 0;   /* Marge au-dessus de l'image */
margin-bottom: 0;   /* Marge en-dessous de l'image */
margin-left: 0;   /* Marge à gauche de l'image */
margin-right: 0;   /* Marge à droite de l'image */
border-radius: 50%;   /* Apparence circulaire de l'image */
border-color: #8DC0B1;   /* Couleur de la bordure */
border-style: solid;   /* Style de la bordure */
border-width: 4px;   /* Epaisseur de la bordure */
}

Visuellement on obtient :

Modifier l'apparence du titre

On s'intéresse au code suivant :

/* Apparence du titre */
#encart-intro h2 {
font-family: 'PT sans', sans-serif;   /* Police du titre */
font-weight: normal;   /* Style du texte : normal = normal | bold = gras */
font-size: 18px;   /* Taille de la police */
color: #29423B;   /* Couleur du titre */
padding: 0;
}

Vous pouvez changer les valeurs pour la police, la taille de la police, la couleur du titre, et son style comme expliqué dans les commentaires en orange.
Pour changer l'alignement du titre ajoutez cette ligne avant le signe } :

text-align: center;   /* Alignement : left = gauche | center = centré | right = droite | justify = justifié */

Pour modifier la marge autour du titre ajouter les lignes suivantes avant le signe } :

margin-top: 15px;   /* Marge au-dessus du titre */
margin-bottom: 15px;   /* Marge en-dessous du titre */
margin-left: 0;   /* Marge à gauche du titre */
margin-right: 0;   /* Marge à droite du titre */

Vous pouvez changer les valeurs (15px) comme vous le voulez :)
Visuellement on obtient :

Modifier l'apparence du texte

On s'intéresse au code suivant :

/* Apparence du paragraphe */
#encart-intro p {
font-family: 'PT sans', sans-serif;   /* Police du paragraphe */
font-weight: normal;   /* Style du texte : normal = normal | bold = gras */
font-size: 14px;   /* Taille de la police */
color: #59776F;   /* Couleur du paragraphe */
padding: 0;
}

Vous pouvez changer les valeurs pour la police, la taille de la police, la couleur du texte, et son style comme expliqué dans les commentaires en orange.
Pour modifier l'alignement du texte ajoutez cette ligne avant le signe } :

text-align: center;   /* Alignement : left = gauche | center = centré | right = droite | justify = justifié */

Pour modifier la marge autour du texte ajouter les lignes suivantes avant le signe } :

margin-top: 15px;   /* Marge au-dessus du texte */
margin-bottom: 0;   /* Marge en-dessous du texte */
margin-left: 0;   /* Marge à gauche du texte */
margin-right: 0;   /* Marge à droite du texte */

Vous pouvez changer les valeurs (15px) comme vous le voulez :)
Visuellement on obtient :

Une fois que vous êtes satisfait de l'apparence, cliquez sur Enregistrer :

Placez le gadget où vous le souhaitez sur votre blog, dans la barre latérale ou le pied de page, en le glissant vers son nouvel emplacement.
Et voilà ! Vous savez maintenant comment ajouter un gadget avec une photo, un texte et un titre, et le personnaliser !
Voici d'autres exemples visuels que vous pouvez réaliser avec cette méthode :

Et voici les codes CSS associés :

/* ORANGE */
#encart-intro {
background-color: #ffffff;
border-color: #E8B960;
border-style: solid;
padding: 20px;
margin-top: 80px;
}
#encart-intro img {
max-width: 100%;
position: relative;
margin-top: -50%;
margin-bottom: 0;
margin-left: 0;
margin-right: 0;
border-radius: 50%;
border: none;
}
#encart-intro h2 {
font-family: 'Satisfy', cursive;
font-weight: normal;
font-size: 24px;
color: #E8B960;
text-align: center;
margin-top: 15px;
margin-bottom: 15px;
margin-left: 0;
margin-right: 0;
padding: 0;
}
#encart-intro p {
font-family: 'PT sans', sans-serif;
font-weight: normal;
font-size: 14px;
color: #525253;
text-align: center;
padding: 0;
margin-top: 15px;
margin-bottom: 0;
margin-left: 0;
margin-right: 0;
}

/* VIOLET */
#encart-intro {
background-color: #E1DFE7;
border: none;
padding: 20px;
margin-top: 50%;
margin-top: 20px;
}
#encart-intro img {
max-width: 100%;
position: relative;
margin-top: -20%;
margin-bottom: 0;
margin-left: 0;
margin-right: 0;
border: none;
}
#encart-intro h2 {
font-family: 'Lato', sans-serif;
font-weight: normal;
font-size: 18px;
text-transform: uppercase;
letter-spacing: 1px;
color: #A05E8D;
text-align: center;
margin-top: 15px;
margin-bottom: 15px;
margin-left: 0;
margin-right: 0;
padding: 0;
}
#encart-intro p {
font-family: 'PT sans', sans-serif;
font-weight: normal;
font-size: 14px;
color: #525253;
text-align: center;
padding: 0;
margin-top: 15px;
margin-bottom: 0;
margin-left: 0;
margin-right: 0;
}

Bon blogging ! ;)