Suite à l'installation du nouveau design, le blog peut encore présenter quelques erreurs, ou bugs d'affichage. Merci de votre compréhension.

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

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

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

C'est parti pour les explications :)

psst ! Un bonus vous attend à la fin du tutoriel :
5 modèles d'images pour votre encart d'introduction !

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 :
Créer un encart d'introduction pour la barre latérale sur Blogger

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

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

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 :)
N'oubliez pas!
5 modèles d'images pour votre encart d'introduction vous attendent à la fin du tutoriel !

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 :

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

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 :

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

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 :

Créer un encart d'introduction pour la barre latérale sur Blogger
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 :

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

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 :

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

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 :

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

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

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

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 :

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

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;
}

Bonus !

Ajoute une touche d'originalité à ton encart d'introduction avec une jolie image !

En vous inscrivant vous serez ajouté à la liste de contacts de Lady Bird Red.
Vous pourrez vous désabonner à tout moment.

Autres articles

165 commentaires:

  1. Aaa top sa merci :) , je le fais des que j'ai résolue mon problème d'écriture :)

    RépondreSupprimer
    Réponses
    1. Merci encore pour ton tutos j'ai réussi direct :P

      Supprimer
    2. J'avais réussi du premier coup , et sans faire exprés je les supprimés :/
      Et la le rond ne monte plus je comprend pas :/

      Supprimer
    3. Coucou, en fait tu as oublié px après -50 à la ligne :

      margin-top: -50;

      Rajoutes px avant le signe ; comme ceci :

      #encart-intro img {
      position: relative;
      float: none;
      max-width: 100%;
      margin-top: -50px;
      margin-bottom: 0;
      margin-left: 0;
      margin-right: 0;
      border-radius: 50%;
      border: none;
      }

      Et voilà :)

      Supprimer
    4. Il y était pourtant , du coup j'ai copié collé le code que tu m'a donné sa marche merciiiiiiii :)

      Supprimer
    5. Aaa si encore une question lol , Le miens et rectangle , quand je les fait en premier il était carré je sais pas pourquoi il est plus carré :/

      Supprimer
    6. La forme vient du contenu. Si tu as beaucoup de contenu (texte, image, titre, liens) alors il sera plus allongé et donc rectangulaire :)

      Supprimer
    7. Ah d'accord merci beaucoup , encore merci pour tes super tutos bien expliquer et de ton aide !

      Supprimer
    8. Un grand merci, cet article m'a été d'une grande aide, merci beaucoup, beaucoup, beaucoup ^^

      Supprimer
  2. C'est super ce petit tutos !!! Merci merci !!!

    Mais y a juste un soucis... Sous mon titre, il a une barre que je n'arrive pas à enlever. Surement dû à un paramétrage que j'ai fait pour tous les titres de ma barre latérale... Un moyen de l'enlever ?

    http://chup-nails.blogspot.fr/

    RépondreSupprimer
    Réponses
    1. Bonjour Lucie,
      Rajoutes cette ligne :

      border: none;

      Avant le signe } du code suivant :

      #encart-intro h2 {
      font-family: georgia;
      font-weight: normal;
      font-size: 15px;
      color: #e461b4;
      padding: 0;
      text-align: center;
      margin-top: 20px;
      margin-bottom: 10px;
      margin-left: 0;
      margin-right: 0;
      }

      Comme ceci :

      #encart-intro h2 {
      font-family: georgia;
      font-weight: normal;
      font-size: 15px;
      color: #e461b4;
      padding: 0;
      text-align: center;
      margin-top: 20px;
      margin-bottom: 10px;
      margin-left: 0;
      margin-right: 0;
      border: none;
      }

      Supprimer
  3. Merci Catherine pour ce tuto génial!! Je l'ai fait sur mon blog d'essai (non visible au public) et ça marche très bien. Encore qques réglages de style et je le mets sur mon blog officiel.
    Est-ce qu'il y aurait moyen de le configurer comme un link vers qq chose ou reste-t-il fixe? Exemple: j'aimerais l'utiliser comme insigne pour qu'en cliquant dessus, ça nous redirige sur une autre section.
    Merci infiniment.
    Anne.

    RépondreSupprimer
    Réponses
    1. Bonjour Anne,
      Tu peux rajouter un lien dans le code HTML de base. Le code HTML d'un lien est :

      <a href="http://adresse-url.fr">Lien</a>

      Tu peux ajouter ce code avant ou après le texte, le titre, ou l'image, comme tu le souhaites :)

      Le code CSS associé à ce lien est :

      #encart-intro a {
      }

      Ici tu devras définir le visuel de ton lien.
      Le code CSS de ce lien quand survolé par la souris sera :

      #encart-intro a:hover {
      }

      Tu pourras définir ici une apparence différente du lien quand survolé par la souris :)

      Supprimer
    2. O_o !!! Merci, merci, merci, merci, merci !

      Supprimer
  4. Salut Catherine, merci pour ce tuto, il me reste encore un problème..ma photo se mets sous la forme ovale, et non ronde..

    http://selonlapparence.blogspot.fr/

    RépondreSupprimer
    Réponses
    1. C'est parce que t'as photo de base est rectangulaire. Essaye avec une photo carré :)

      Supprimer
    2. J'ai également un petit problème avec la photo, je ne comprend pas quel lien il faut copier, d'où sort le lien :(

      Supprimer
    3. Bonjour Axelle,
      Il faut ajouter ton image sur internet. Pour cela tu peux suivre les instructions de ce tutoriel à la partie Ajouter l'image à Blogger : http://ladybirdr.blogspot.fr/2015/06/remplacer-le-lien-lire-la-suite-par-une.html#add

      Supprimer
  5. Super merci ma belle j'ai chercher comment faire sans jamais trouver =)

    RépondreSupprimer
  6. Ton article est top comme tous les autres d'ailleurs, ton blog est un des rares ou les explications sont accessibles à tous alors merci !

    RépondreSupprimer
  7. Oh j'adore j'adore!!! Je vais tester!! :)

    RépondreSupprimer
  8. Bonjour, merci pour ces tutos ils m'aident vraiment ;) Puisque cet article parle de la barre latérale je me permets de te demander si c'est possible d'avoir prochainement (dès que tu auras le temps) un tuto pour encadrer la barre latérale du blog. Je m'explique : mon blog a un fond blanc, les articles et la barre latérale sont séparés par une ligne verticale mais j'aimerais la faire disparaître au profit d'une barre latérale tout encadrée. Malheureusement je ne trouve aucun tuto approprié sur internet, alors je me tourne vers ton blog.

    Merci d'avance, Berry Cherry

    RépondreSupprimer
    Réponses
    1. Bonjour Berry Cherry, je note sur ma liste de tutoriels à faire ! ;)

      Supprimer
    2. Re coucou, c'est exactement de cela que je te parle dans le mail ;)

      Supprimer
  9. oh ! c'est exactement ce que je cherchais ! merci :)

    RépondreSupprimer
  10. j'ai tout compris ! j'ai juste un petit problème: je voudrais rendre le background du gadget transparent, mais je ne trouve pas comment faire !!
    Merci :)

    RépondreSupprimer
    Réponses
    1. Bonjour Lina,
      Il te suffit d'ajouter la ligne suivante :

      background-color: transparent; /* Couleur du fond */

      Au code commençant par :

      #encart-intro {

      ;)

      Supprimer
  11. Super tuto :) Merci beaucoup !!

    http://frivollitude.blogspot.fr

    RépondreSupprimer
  12. bonjour, j'avais une question je souhaites que certain de mes articles n'apparaissent qu'a des endroits precis. J'ai utiliser des libeller pour arriver à les regrouper mais maintenant j'aimerai que ce soit plus clair. Pourrai tu jeter un coup d'oeil un mon blog et m'aider à trouver une solution ?

    RépondreSupprimer
    Réponses
    1. Bonjour Okane Blog,
      Je trouve que tu as déjà bien organisé tes articles ! :)
      Que veux-tu faire exactement ? Changer la disposition des articles sur la page d'accueil ? A savoir qu'il est possible d'utiliser une page en page d'accueil du blog au lieu de lister les articles.
      Pour cela il suffit d'aller dans Paramètres > Préférences de recherche > Erreurs et redirections. Sous Redirections personnalisées cliques sur Modifier.
      Dans la première boîte après De : entre /
      Dans la 2e boîte après Pour : entre l'adresse url de ta page à partir de /p/ seulement. Le début de l'adresse jusqu'à .fr ou .com est entré automatiquement ;)
      Cliques ensuite sur Enregistrer. Et voilà ! :)

      Supprimer
    2. En fait j'aimerai ne pas utiliser les libellé pour classer mes articles.
      Je veux que tous les articles apparaissent sur ma pages d'acceuille mais que les liens permettent de rejoindre une page avec seulement les articles d'une catégorie. C'est un peu compliqué a expliquer.

      Supprimer
    3. En fait en cliquant sur une catégorie de ta page Shojo, par exemple, Comédie, tu voudrais qu'on tombe sur une page avec tous les articles du libellé Comédie (un peu comme la page Shojo), et non une recherche de libellé comme ça l'est actuellement. C'est ça ?

      Supprimer
    4. Désolée pour la réponse tardive.
      Tu peux le faire soit manuellement en ajoutant les liens vers les articles comme tu l'as fait sur tes autres pages, et en ajoutant une image pour chaque article par exemple.
      Il existe aussi un moyen de le faire automatiquement, mais ça demande du JavaScript et c'est plutôt compliqué à expliquer :/
      Je pourrais t'envoyer le code par e-mail si tu le souhaites. Envoi-moi un e-mail :)

      Supprimer
    5. voici l'adresse de mon blog : blog.okane@gmail.com
      encore merci pour ta reponse et tes tuto

      Supprimer
  13. j'aurai encore deux petites questions:
    - comment faire pour ajouter un titre avec un lien sur une photo comme sur ce blog http://www.sekaisblog.com/p/tutoriels.html#intro
    - et comment afficher le petit logo qui permet de remonter en haut de la page
    j'ai aussi beaucoup de mal a trouver des images adaptées pour le fond d'ecran du blog tu n'aurai pas une idée ou je pourrai entrouver ?

    RépondreSupprimer
    Réponses
    1. Pour les titres avec une photo en fond, le plus simple est de créer des images avec le fond et les titres souhaités. Il existe des programmes gratuits et même en ligne pour faire cela. Pxlr Editor (http://apps.pixlr.com/editor/) et Canva (https://www.canva.com/) sont de très bons outils.
      Une fois que tu as créé ton image il suffit de l'inclure sur ta page et de lui associer un lien en sélectionnant la photo sur la page de création de la page, et de cliquer sur Associer dans la barre d'outils.

      Pour le petit lien qui permet de remonter en haut de la page ajoutes ce code dans un nouveau gadget :

      <style type='text/css'>

      .backtotop {
      position: fixed;
      bottom: 30px; /* augmenter la valeur pour déplacer vers le haut */
      right: 30px; /* augmenter la valeur pour déplacer vers la gauche */
      color: #000000 !important; /* couleur du texte */
      background-color: #ffffff; /* couleur de fond du bouton */
      font-size: 12px; /* taille de la police du texte */
      padding: 10px; /* espace autour du texte */
      text-transform: uppercase; /* texte en majuscules. Pour supprimer cet effet remplacer uppercase par none */
      letter-spacing: 1.0px; /* espace enter les caractères */
      }

      .backtotop:hover {
      background-color: #ffffff; /* couleur du fond au survol de la souris */
      color: #7BD0D8 !important; /* couleur du texte au survol de la souris */
      text-decoration: none; /* supprime le soulignement du texte */
      }

      </style>

      <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
      <script>
      jQueryundefineddocument).readyundefinedfunctionundefined) {
      var offset = 300;
      var duration = 500;
      jQueryundefinedwindow).scrollundefinedfunctionundefined) {
      if undefinedjQueryundefinedthis).scrollTopundefined) > offset) {
      jQueryundefined'.backtotop').fadeInundefinedduration);
      } else {
      jQueryundefined'.backtotop').fadeOutundefinedduration);
      }
      });

      jQueryundefined'.backtotop').clickundefinedfunctionundefinedevent) {
      event.preventDefaultundefined);
      jQueryundefined'html, body').animateundefined{scrollTop: 0}, duration);
      return false;
      })
      });
      </script>

      <a href="#" class="backtotop">Haut de la page</a>

      Dans la dernière ligne remplace Haut de la page par le texte que tu souhaites utiliser et voilà :)

      Supprimer
  14. Pas encore eu le temps de mettre mon nez dedans, mais encore un immense remerciement pour tous tes précieux tuto, conseils et réponses à nos questions.
    Bon we et longue vie à lady bird red !
    Isabelle.

    RépondreSupprimer
  15. Coucou, j'ai fais la méthode de l'exemple orange et j'ai un souci avec ma photo, elle est situé à gauche et je voudrais qu'elle soit centrée. Comment faire ? Merci, j'ai découvert ton blog il y a deux jours, c'est une tuerie :)

    RépondreSupprimer
    Réponses
    1. Bonjour Sarah,
      Retrouves le code suivant :

      #encart-intro {
      background-color: #ffffff;
      border-color: #ffffff;
      border-style: solid;
      padding: 20px;
      margin-top: 100px;
      }

      Et ajoutes :

      text-align: center;

      Avant le signe } comme ceci :

      #encart-intro {
      background-color: #ffffff;
      border-color: #ffffff;
      border-style: solid;
      padding: 20px;
      margin-top: 100px;
      text-align: center;
      }

      Et voilà ! ;)

      Supprimer
    2. Merci de ton aide :)

      Supprimer
  16. Bonjour, je n'ai pas trouver d'article plus approprié pour poser une question; ça concerne les titres des gadgets. J'aimerais que ceux-ci soient centrés, j'ai donc été mettre "text-align:center;" après "h {" mais cela centre aussi les dates des articles et j'aimerais que ceux-ci soient indépendants... :/ Comment pourrais-je faire? Merci! :)

    RépondreSupprimer
    Réponses
    1. Bonjour Emy,
      Il faut rajouter un code CSS pour spécifier l'apparence des titres de la barre latérale.
      Cherches :

      /* Content

      Et colles ceci :

      .column-right-inner h2 {
      text-align: center;
      }

      Ça devrait régler le problème ;)

      Supprimer
  17. Merci beaucoup pour tous ces tutoriels, grâce à toi, je trouve mon blog beaucoup plus frais.

    RépondreSupprimer
  18. bonsoir, je la trouve ou l'url de mon image

    RépondreSupprimer
    Réponses
    1. Bonjour, un moyen simple d'ajouter des images sur internet, sans utiliser Photobucket ou autre site, est d'utiliser les articles brouillons de Blogger :
      Créé un nouvel article et insère ton image. Enregistre le brouillon puis fais un clique-droit sur l'image et sélectionne Copier l'adresse du lien pour récupérer l'adresse URL de l'image.
      Attention à ne pas publier l'article pour qu'il reste en brouillon et n’apparaisse pas dans la fil des articles sur le blog ;)

      Supprimer
  19. Encore merci pour ce tuto, je travaille encore dessus pour faire qqchose qui me plait mais ça donne vraiment un plus au blog !

    RépondreSupprimer
  20. Bonjour, j'aimerai réaliser ce tuto que je trouve juste sublime le problème c'est que je ne sait pas comment trouver l'url d'une image qui ce trouve dans "Mes Documents"..
    Si tu peux m'aider ce serait gentil ! bon, tu as compris que j'étais une grosse grosse grooooosse débutante !! hihi

    RépondreSupprimer
    Réponses
    1. Bonjour, pour trouver l'URL de ton image il faut la mettre sur internet. un moyen simple est d'utiliser les articles brouillons de Blogger :
      Créé un nouvel article et insère ton image. Enregistre le brouillon puis fais un clique-droit sur l'image et sélectionne Copier l'adresse du lien pour récupérer l'adresse URL de l'image.
      Attention à ne pas publier l'article pour qu'il reste en brouillon et n’apparaisse pas dans la fil des articles sur le blog ;)

      Supprimer
  21. Coucou, je voudrais élargir mon cadre pour qu'il soit aussi large que mes photos instagram juste en dessous, car du coup il est plus fin et je trouve que c'est étrange du coup.

    Que dois-je changer dans le code ?

    Merci beaucoup :)

    RépondreSupprimer
    Réponses
    1. Bonjour Lucie, en fait ton gadget Instagram dépasse en largeur de ta barre latérale. La largeur de ton encart d'introduction est celle de ta barre latérale. Malgré cela tu peux forcer ton encart à prendre la même largeur que ton gadget Instagram en ajoutant le code CSS suivant :

      #HTML3 {
      width: 315px;
      }

      Avant la ligne de code :

      </style>

      Dans le gadget de ton encart d'introduction.

      Supprimer
  22. Hello !
    Merci beaucoup pour ce blog et tous tes tutos, moi qui viens de lancer mon blog en pleine construction, ça m'est vraiment très utile ! Il est topissime, j'espère que tu auras d'autres tutos aussi créatifs que ceux là à nous présenter :)

    RépondreSupprimer
  23. Merci pour toutes ces astuces :)

    RépondreSupprimer
  24. Super !!! J'ai appliqué à la lettre et je suis fan, merci mille fois pour tes explications !

    RépondreSupprimer
  25. coucou! j'espère que tu pourras ma répondre! j'ai fait tout ce qu'il faut et pourtant, mon image ne s'affiche pas! j'ai même essayé de faire clic droit puis copier l'URL de l'image et elle ne se mets pas :( je ne sais pas comment faire j'ai essayé avec plein d'images pourtant!
    en totu cas tes astuces sont tops,je les suis toutes à la lettre et c'est génial!

    RépondreSupprimer
    Réponses
    1. Bonjour Hannah, quel est le lien de ton image ?

      Supprimer
  26. Merci beaucoup ! Je m'y connais déjà en CSS et HTML mais cela remonte un peu, alors je te remercie de me rafraîchir la mémoire ainsi :)

    RépondreSupprimer
  27. Merci pour cet article tout simplement génial ! Grâce à toi j'ai réussi à le faire, par contre pour les couleurs j'ai repris les tiennes car je ne sais pas comment on trouve les codes des couleurs mais bon pour l'instant ça me va très bien ^^.
    Bisous

    RépondreSupprimer
    Réponses
    1. Bonjour,
      Tu peux trouver les codes couleur grâce à ce site ;)
      http://www.code-couleur.com/

      Supprimer
  28. Encore une compétence d'acquise grâce à ton tutoriel ! Merci encore ! :D

    RépondreSupprimer
  29. Bonjour, tout d'abord merci beaucoup pour ce tuto qui m'a tant aider !!
    J'aurais juste une petite question: Comment faire pour qu'aucuns espaces ne se créé entre se gadget et les autres ? Car j'ai mis ce gadget tous en haut mais malheureusement il y a un grand espace entre le haut et le gadget. Du coup mon gadget est décalé par rapport à la photo de mon article.

    Je ne sais pas si c'est très compréhensible donc voilà le lien de mon blog: thinksbeautiful.blogspot.com

    Merci beaucoup, Enola.

    RépondreSupprimer
    Réponses
    1. Bonjour Enola,
      Pour déplacer ton gadget vers le haut il faut modifier la valeur de la ligne commençant par :

      margin-top :

      Du code :

      /* Apparence du gadget */
      #encart-intro {
      background-color: #ffffff;
      border-color: #525253;
      border-style: solid;
      padding: 20px;
      margin-top: 80px;
      }

      Par exemple, remplace la valeur 80px par -20px ;)

      Supprimer
  30. Coucou !
    Merci encore de ce tuto ! ^^ Par contre j'ai 2 questions...
    Chez moi, l'image ne se mets pas au milieu, mais légèrement à gauche. Aussi, Puis-je diminuer la taille du gadget ? :) Merci !
    Et aussi, pour etre sure que je ne me suis pas trompée... J'ai recopié toutes les étapes que tu dis avant, puis j'ai copié le code pour le violet. C'était bien comme ça que je devais faire ? >< J'apprends à me débrouiller avec le code ahah !

    Océane

    RépondreSupprimer
    Réponses
    1. Bonjour Océane,
      Je ne vois pas ton encart d'introduction, l'as-tu supprimé ?

      Supprimer
  31. Bonjour Catherine,
    déjà merci énormément tu ne peut pas savoir à quel points tes articles m'ont aidée et lui énormément !! Mai j'ai une petite question je trouve que le gadget "encart d'introduction" sur mon blog fait beaucoup trop gros, est-ce que tu vois comment je pourrais réduire sa taille ???

    Voici mon blog : http://delicesdecamille.blogspot.fr/

    Encore merci pour tous tes articles qui m’ont été d'une grande aide, je crois que sans toi mon blog serais vraiment tout moche !!! :D

    Pleins de bisous.
    Camille ♥♥♥

    RépondreSupprimer
    Réponses
    1. Bonjour Camille,
      L'encart d'introduction prend toute la largeur de ta barre latérale. Tu peux diminuer la largeur de ta barre latérale, ou diminuer la largeur de l'encart d'introduction.
      Pour diminuer la largeur de ton encart d'introduction, ajoute la ligne suivante :

      width: 200px; /* Largeur de l'encart */

      Avant le signe } du code suivant :

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

      Comme ceci :

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

      Par défaut ton encart d'introduction sera aligné sur la gauche de ta barre latérale. Si tu veux la centrer par rapport à ta barre latérale ajoute les lignes suivantes avant le signe } du code ci-dessus :

      margin-left: auto;
      margin-right: auto;

      Et voilà ;)

      Supprimer
    2. Je crois que je n'est qu'une chose à te dire..... Merci beaucoup (oupss sa fait deux)

      Pleins de bisous.
      Camille ♥♥♥

      Supprimer
  32. bonjour et merci pour te explications tres claires,
    si j'y arrive tout le monde peut le faire
    juste 2 petites questions
    comment fais tu pour ajouter ne bordure violet foncé je ne connais pas le code

    sinon j'ai reussi à donner une forme ronde à mon image je voudrais aussi donner une forme ronde aux vignettes qui sont rattachées à mes articles dans la barre latérale (les plus populaires)
    merci encore

    RépondreSupprimer
    Réponses
    1. Bonjour,
      Tu peux utiliser le site suivant, par exemple, pour trouver le code d'une couleur : http://www.code-couleur.com/
      Pour les articles les plus populaires, j'ai prévu d'en faire un tutoriel ;)

      Supprimer
  33. Super article ! Même si malheureusement, je n'ai pas réussi à trouver une solution à mon problème.
    J'essaie de créer un blog mais j'ai quelques soucis logistiques. En effet, j'ai pris un thème "tout fait" qui s'appelle Masterpiece, notamment pour ce fameux encart qui me plaisait beaucoup, sauf que je n'arrive pas à le trouver et à le modifier afin d'y mettre ma photo et ma présentation. Une idée sur le pourquoi du comment ?
    Je ne veux donc pas créer le gadget de a à z mais utiliser celui qui est (normalement) fourni avec le thème.
    Merci beaucoup pour tous ces tutos utiles

    RépondreSupprimer
    Réponses
    1. Le problème vient de ton thème. Généralement les thème stout faits ont des termes différents de ceux de base de Blogger. Du coup, impossible de retrouver les codes sans s'y connaître. Quel est l'adresse de ton blog ?

      Supprimer
  34. L'adresse de mon blog est la suivante: https://www.blogger.com/blogin.g?blogspotURL=http://cuir-queina.blogspot.fr/
    Cela dit j'ai réglé le problème de la photo arrondie avec un p'tit coup de photoshop, et on n'y voit que du feu. ^^

    RépondreSupprimer
  35. Un petit commentaire pour te dire merci! Merci de tout le travail que tu fais pour nous faire des supers tutos très compréhensibles. Je voulais faire un peu de mise à jours sur mon blog et en faisant des recherche sur internet je suis tombée sur le tiens qui est une vrai mine d'or! Alors merci beaucoup :D
    Cela va m'étre d'une très grande aide :D

    RépondreSupprimer
  36. Hello. Merci pour ce super tuto. Néanmoins j'ai un petit problème. Mon titre ce met en majuscule et j'ai beau reprendre tout le déroulé de ton tuto je ne comprend pas pourquoi. Peux-tu m'aider, s'il te plais?

    RépondreSupprimer
    Réponses
    1. Bonjour Floriane,
      Cela vient du code CSS qui défini l'apparence de tous tes titres de la barre latérale.
      Pour forcer ton titre à ne pas s'afficher en majuscules rajoute :

      text-transform: initial;

      avant le signe } de ton code :

      /* Apparence du titre */
      #encart-intro h2 {
      font-family: 'Times New Roman'; /* Police du titre */
      font-weight: normal; /* Style du texte | normal = normal | bold = gras */
      font-size: 18px; /* Taille de la police */
      color: #76a5af; /* Couleur du titre */
      padding: 0;
      text-align: center; /* Alignement : left = gauche | center = centré | right = droite | justify = justifié */
      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 */
      }

      Comme ceci :

      /* Apparence du titre */
      #encart-intro h2 {
      font-family: 'Times New Roman'; /* Police du titre */
      font-weight: normal; /* Style du texte | normal = normal | bold = gras */
      font-size: 18px; /* Taille de la police */
      color: #76a5af; /* Couleur du titre */
      padding: 0;
      text-align: center; /* Alignement : left = gauche | center = centré | right = droite | justify = justifié */
      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 */
      text-transform: initial;
      }

      Supprimer
    2. Ca n'a eu aucun effet... :-(

      Supprimer
    3. Essaye avec cette ligne à la place :

      text-transform: initial !important;

      Supprimer
  37. Bonjour Catherine,

    En ce qui me concerne, avec mon thème et ma mise en page (je ne sais pas si le problème vient de l'un ou de l'autre !), je ne peux pas rajouter de gadget à droite de ma page (uniquement à gauche), c'est assez étrange. Même dans la mise en page, si je veux bouger les gadgets, je ne peux pas les mettre à droite !! Saurais-tu pourquoi ? J'aimerais bien habiller le côté droit de mon blog avec ma présentation et mon instagram (qui est en bas pour le moment), ça le rendrait un peu plus dynamique !!

    RépondreSupprimer
    Réponses
    1. Bonjour Erica,
      Tu peux modifier ce paramètre dans Modèle > Personnaliser > Mise en page ;)

      Supprimer
    2. J'ai malheureusement déjà essayé, et ça me met "Mise en page du contenu non disponible pour ce modèle" (idem pour le pied de page) ! Est-ce parce que mon blog est fait via un thème importé avec toutes les modifs en html ?

      Supprimer
    3. Dans ce cas oui, effectivement cela vient de ton thème :/

      Supprimer
  38. Arf décidemment, quand on choisit de tout faire à la main, ça devient vraiment plus compliqué !! On ne peut pas inverser le main et le sidebar via html ? J'ai essayé de changer le code comme ceci mais ça ne marche pas :'(

    }
    #main-wrapper {
    width:680px;
    float:left;
    word-wrap:break-word;
    overflow:hidden;
    }

    #sidebar-wrapper{
    width:240px;
    float:right;
    word-wrap:break-word;
    overflow:hidden;
    }

    RépondreSupprimer
    Réponses
    1. Oui c'est plus compliqué ^^
      Ça doit être possible en modifiant le code HTML de ton blog. Quel est le lien de ton blog ?

      Supprimer
  39. Bonjour, merci pour tous ces tuto :)
    Petite question : est-il possible d'agrandir la taille de la photo ?
    Merci

    RépondreSupprimer
    Réponses
    1. Bonjour Lola,
      La taille de ton image est définie par la largeur de ton barre latérale.
      Néanmoins, tu peux supprimer l'espace entre la bordure et ton gadget vu que tu n'as pas de bordure, cela te fera gagner 40 pixels en largeur.

      Pour cela retrouve ton code :

      /* Apparence du gadget */
      #encart-intro {
      background-color: #FFFFFF; /* Couleur du fond */
      border-color: #FFFFFF; /* 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: 40px; /* Espace avant le gadget pour contre-balancer le décalage de la photo vers le haut */
      }

      Remplace 20px par 0 à la ligne :

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

      Ensuite, ton image fait 150 pixels de large. Or ton gadget (après la modification ci-dessus) fait 220 pixels de large. Pour augmenter la taille de ton image, il faut que tu utilises une image plus grande et que tu la sauvegardes à une largeur de 220 pixels de large.

      Si tu sauvegardes une image plus petite que 220 pixels, elle sera floue :/

      Supprimer
  40. Bonsoir Catherine,

    merci pour ces tutos si complets.
    Je suis actuellement en train de travailler l'esthétisme de mon blog, et étant une vrai cruche quand il est question de code HTML ou CSS j'ai décidé de venir voir vos tutos. Mais je me vois faire face à un problème de taille : Je suis à la lettre vos indications et pourtant, c'est comme si je n'avais rentré aucun code pour l'esthétisme du cadre : voyez vous même à l'adresse suivante :
    http://testdesign124.blogspot.fr/

    J'ai rentré le code minutieusement, je l'enregistre et lorsque je reviens dessus, plus rien, plus de code.. Enfin pas celui que j'ai rentré à l'origine.

    Je n'arrive pas à mettre le code dans ce commentaire, blogger refuse, j'ai donc créer un article où ils sont présents.
    Je ne comprends pas où peut-être mon erreur et j'espère que vous pourrez m'aider.

    Je vous remercie de votre réponse et vous souhaite une excellente soirée.

    RépondreSupprimer
    Réponses
    1. Bonjour,
      Le tout premier code CSS n'est pas fermé, il manque le signe }. Du coup tout ce qui suit est mal ou pas pris en compte. Il te suffit de rajouter le signe } à la fin de ce code :

      #encart-intro {
      background-color: #F3E7F1;
      border-color: #010101;
      border-style: solid;
      border-width: 1px;
      padding: 20px;
      margin-top: 20px;

      Et voilà ;)

      Supprimer
  41. Merci ! Merci ! Merci !
    J'en suis à mon 10ème tuto et tout fonctionne en un tour de baguette magique ! Je fais des petits bonds de joie dans mon salon sous le regard désemparé de mon amoureux... Bref, merciiiiii !

    RépondreSupprimer
  42. C'est la première fois que je laisse un commentaire sur ce blog. Cela fait maintenant 3 jours que j'ai commencé mon blog et j'ai passé la plupart de mon temps sur ce blog ! Tu apportes une solution à TOUS les problèmes ! C'est génial :)
    Je ne sais pas comment je m'en sortirais sans toi... Tes tutos sont juste parfaits et très clairs !
    Alors merci pour tout et à très vite !!

    RépondreSupprimer
  43. Je n'ai toujours pas reçu les bonus :/
    Tu serais me dire combien de temps cela peut mettre ?

    RépondreSupprimer
    Réponses
    1. Bonjour Sarah,
      J'ai vérifié, l'e-mail à bien été envoyé 2 fois, mais pas ouvert. Vérifie dans tes spams qu'il ne s'est pas glissé dedans ;)

      Supprimer
    2. Bonjour Catherine,

      Je ne reçois plus rien de toi, je ne sais pas pourquoi est ce que c'est possible de me redésinscrire et me réinscrire car je reçois plus ta newletters depuis mardi dernier :(

      Supprimer
    3. Bonjour Sarah,
      Je t'ai envoyé un email manuellement, l'as-tu reçu ?

      Supprimer
  44. Bonjour, merci pour tes super tutos, j'ai effectué celui-ci il y a déjà un moment et ça avait très bien fonctionné. Mais étrangement, peut-être suite à quelques modif du thème, la police que j'ai choisi pour le titre de mon encart de présentation s'est modifiée et je n'arrive plus à appliquer celle que je souhaite. J'ai essayé 2 polices google fonts différentes, mais ça ne fontionne plus... mon blog: http://ideessortiesenfantssecteursevran93.blogspot.fr/
    Merci d'avance pour ton aide.

    RépondreSupprimer
    Réponses
    1. Bonjour,
      Je vois la police Kaushan Script. Est-ce bien celle que tu souhaites ?

      Supprimer
  45. Pour info j'ai résolu mon problème sur ce tuto-là ! Merci !

    RépondreSupprimer
  46. Merci pour ce magnifique tuto ! Et les bonus en plus c'est que du bonheur

    RépondreSupprimer
  47. Hey coucou ! J'ai voulu changer de photo sauf que désormais elle ne veux pas s'afficher, idem pour d'autre photo. J'avais réussi la première fois sauf qu'aujourd'hui impossible. J'ai essayer d'ajouter une photo via un site d'images et dans un article brouillon, y'a rien à faire sa ne l'affiche pas.
    Que puis-je faire ?

    RépondreSupprimer
    Réponses
    1. Bonjour,
      Vérifies le code HTML de ton image, qu'il ne manque pas un signe ou un morceaux de code. Tu dois avoir :

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

      Supprimer
  48. Un grand merci pour ce tuto aussi !! :D par contre j'ai juste un petit problème pour centrer mon paragraphe.. j'ai fais exactement tout comme c'est écrit mais impossible de centrer le paragraphe :/ est-ce que ça pourrait être dû à quelque chose d'autre dans ma configuration html ? Merci :)

    RépondreSupprimer
    Réponses
    1. Bonjour Sara,
      Le problème vient de ton code CSS. Tu as :

      /* Apparence du paragraphe */
      #encart-intro p {
      lign: center;
      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: #868889; /* Couleur du paragraphe */
      padding: 0;
      lign: center;
      }

      Tu as 2 fois la ligne :

      lign: center;

      Or pour centrer le texte il faut utiliser :

      text-align: center;

      Supprimer
    2. Oh d'accord c'était tout bête !! Merci beaucoup en tous cas :)

      Supprimer
  49. Coucou! J'ai vraiment tout appliqué à la lettre mais c'est bizarre, le titre s'affiche dans une police que je ne veux pas (idem pour le paragraphe) mais quand j'actualise la page, étrangement la police devient celle que je veux
    Est ce que tu aurais une solution? Je voudrais avoir la police Satisfy en titre et Bree Serif en Para
    Mon blog: bazardelivres.blogspot.fr
    Merci d'avance pour ton aide si tu me réponds ;)

    RépondreSupprimer
    Réponses
    1. Bonjour,
      Tu as plusieurs codes Google Fonts installés sur ton blog. Remplace-les par un seul code regroupant toutes les polices que tu souhaites utiliser.

      Supprimer
  50. salut !! merci bcp pour ce nv tuto

    comment supprimer la marge blanche autour du gadget?

    RépondreSupprimer
    Réponses
    1. Bonjour,
      Peux-tu me donner le lien de ton blog pour que je puisse voir ?

      Supprimer
  51. Bonjour,
    Merci pour tous ces tutos qui m'ont beaucoup aidé dans la re-contruction de mon blog. J'ai une petite question concernant l'affichage de l'image (qui ne s'affiche pas) et pourtant le code semble bon ?
    Merci d'avance pour vos aides si précieuses !
    Mon blog :
    http://pepinettealecole.blogspot.fr/

    RépondreSupprimer
    Réponses
    1. Bonjour,
      Ton code est bon, c'est l'adresse URL de ton image qui ne l'est pas.
      Je te conseil de suivre les instructions ici pour ajouter ton image à Blogger et générer une URL valide ;)

      Supprimer
  52. Bonsoir,
    merci pour tous ces conseils qui me sont très précieux.
    Ma question est assez particulière mais lorsque j'ai inséré mon image, celle-ci était trop grande donc j'ai réduit la taille. Cependant, la photo est alignée à gauche et j'aurai aimé qu'elle soit centrée.
    Pourriez vous m'aider?
    Merci beaucoup et bonne continuation

    RépondreSupprimer
    Réponses
    1. Bonjour Maïssa,
      Retrouve ton code CSs suivant :

      /* Apparence de l'image */
      #encart-intro img {
      position: relative;
      float: none;
      max-width: 75%; /* Limite la largeur de l'image au gadget */
      margin-top: 10; /* Marge au-dessus de l'image */
      margin-bottom: 10; /* Marge en-dessous de l'image */
      margin-left: 10; /* Marge à gauche de l'image */
      margin-right: 10; /* Marge à droite de l'image */
      }

      Remplace les 4 dernières ligne par :

      margin: 0 auto !important;
      display: block;

      Comme ceci :

      /* Apparence de l'image */
      #encart-intro img {
      position: relative;
      float: none;
      max-width: 75%; /* Limite la largeur de l'image au gadget */
      margin: 0 auto !important;
      display: block;
      }

      Et voilà ;)

      Supprimer
    2. Merci beaucoup. C'est très gentil d'avoir répondu et de m'avoir aidé. Merci pour tout

      Supprimer
  53. Coucou! D'abord, merci pour le tuto! Mais j'ai un petit problème, mon paragraphe ne veut pas ce centrer je ne comprend pas pourquoi..
    je laisse le lien du blog juste ici: http://testdesigndwm.blogspot.fr/
    Merci d'avance! xx

    RépondreSupprimer
    Réponses
    1. Bonjour Malthide,
      Il y a une petite erreur dans tes codes CSS. Il manque le signe au début du commentaire avant le code CSS pour le paragraphe. Du coup, ce code n'est pas pris en compte par le navigateur. Va sur ton gadget et retrouve ce code CSS :

      * Apparence du paragraphe */
      #encart-intro p {
      font-family: Tinos;
      font-weight: normal;
      font-size: 15px;
      color: #433d44;
      text-align: center;
      padding: 0;
      margin-top: 10px;
      margin-bottom: 0;
      margin-left: 0;
      margin-right: 0;
      }

      Ajoute le signe / au début de la ligne suivante :

      * Apparence du paragraphe */

      Comme ceci :

      /* Apparence du paragraphe */

      Et voilà ;)

      Supprimer
  54. J'ai suivi le tuto et adopté le style "Orange" que tu proposais. C'est superbe alors merci pour ce tuto ! Seul problème que je rencontre, mon image circulaire est tout d'abord beaucoup trop grosse et elle "dévore" le gadget situé au dessus. Tu aurais une idée pour résoudre ce problème ? :/

    RépondreSupprimer
    Réponses
    1. Bonjour,
      Tu peux ajouter plus d'espace entre ce gadget et le gadget situé au-dessus, en modifiant le code suivant :

      #encart-intro {
      background-color: #ffffff;
      border-color: #E9A2D9;
      border-style: solid;
      padding: 20px;
      margin-top: 80px;
      text-align: center;
      }

      Augmente la valeur de 80px de la ligne suivante :

      margin-top: 80px;

      Ceci ajoutera plus d'espace au-dessus de ton gadget d'introduction.

      Supprimer
  55. Bonjour Catherine,
    Tout d'abord je te tiens à te dire que ton blog en plus d'être magnifiquement fait, m'a été d'une aide précieuse pour la refonte de mon blog.
    Je suis embêtée car en essayant de faire l'encart de présentation, celui ci s'affiche tout en haut du blog et étalé sur toute la largeur de celui ci.
    Cela m'étonne car quand je fais un copié collé du code et que je le mets dans mon blog test, tout s'affiche parfaitement. Je pense que cela doit venir de la différence de modèle mais je ne sais pas comment y remédier.
    Je te remercie d'avance pour tes précieux conseils.

    RépondreSupprimer
    Réponses
    1. Bonjour,
      As-tu bien placé le gadget dans ta barre latérale ?
      Je suppose que tu as supprimé le gadget car je ne le vois pas sur ton blog.

      Supprimer
  56. Bonsoir,

    J'ai un petit soucis, mon image se met bien en rond mais les images de ma catégories (http://www.langagedefrancaise.fr) se mettent aussi en rond. De plus, j'enregistre mes images en png mais la netteté n'y est pas, comment faire?

    Encore merci pour tous tes conseils.

    Gladys

    RépondreSupprimer
    Réponses
    1. Bonjour Gladys,
      Comme tu as utilisé le même code HTML pour ton encart d'introduction et tes catégories, les codes CSS s'appliquent aux 2 gadgets. Pour les différencier ils faut changer le nom d'un des 2 gadgets, ou rajouter un nom.

      Par exemple, ajoute ceci :

      class="intro"

      Au code suivant du code HTML de ton encart d'introduction :

      <div id="encart-intro">

      Comme ceci :

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

      Maintenant tu pourras cibler spécifiquement ce gadget.
      Pour cibler l'image de ce gadget utilise le code CSS :

      .intro img {
      }

      Pour la qualité de tes images, le problème vient simplement de la taille de tes images qui sont plus petites que la taille affichée. Tes images font 165 pixels de large et 82 pixels de haut, or sur le blog elles s'affichent à 171px par 89px. Elles sont donc étirées et perdent en résolution. Pour éviter ceci, il faut que tes images soient plus grandes que la taille affichée. Par exemple, utilise des images qui font 200px de large.

      Supprimer
  57. Bonjour Catherine,

    Merci pour ton prompte retour.

    Les images sont déjà à 200px de largeur dans la colonne et je les enregistre en PNG donc je ne comprends pas... J'utilise PhotoFiltre.

    Un autre problème, quand je réalise les codes de ton tutoriels pour les articles en miniature et en grille il y a un grand espace blanc entre la première et les autres colonnes.... :(

    Encore merci,

    Gladys

    RépondreSupprimer
    Réponses
    1. Bonjour Gladys,
      Pour voir le problème il faut que je vois le blog avec les modifications. Sans quoi je ne peux pas savoir d'où vient le problème sur ton blog.
      Tu peux essayer sur un blog test avant de modifier directement ton blog. Comme ça tu peux laisser le problème sur le blog test pendant qu'on essaye de le résoudre ;)

      Supprimer
  58. Bonjour!
    Je n'ai pas souvent pris le temps de te remercier pour tes tuto que j'utilise de temps à autres et qui me sont très utiles pour essayer de donner à mon blog une apparence personnelle.
    Bravo et merci pour tes articles précis et bien expliqués, ton site est une précieuse aide pour moi!

    RépondreSupprimer
  59. Bonjour, Avant de créer ce gadget, j'aimerais savoir s'il est possible en cliquant dessus d'amener mes lecteurs vers une page de présentation plus complète, avec texte et photos... sans que cette page apparaisse dans le flux de mes articles? Faut-il passer par un brouillon que je ne publierai pas? Je m'inspire de la présentation de ce blog https://www.latartinegourmande.com/about-bea/
    Et voici les coordonnées du mien http://devousamoi-dominique.blogspot.fr/
    Merci Catherine

    RépondreSupprimer
    Réponses
    1. Bonjour Dominique,
      Pour créer une page qui n'apparaît pas dans le flux des articles il faut créer une Page et non un Article. Va dans Pages et clique sur Nouvelle Page. L'interface de création est la même que pour un article. Une fois publiée, la page n'est accessible que par son lien url. Pour trouver ce lien il faut avoir publié la page, ensuite va sur Pages à partir de ton tableau de bord, survol le nom de la page en question et clique sur Afficher qui apparaît sous le nom de la page. Copie l'adresse url qui se trouve dans la barre d'adresse de ton navigateur.
      Maintenant tu peux ajouter un lien dans ton gadget d'introduction qui renvoie à cette page. Pour ajouter un lien il faut ajouter le code HTML suivant dans le texte de ton encart d'introduction :

      <a href="URL">Texte du lien</a>

      Remplace :
      - URL par l'adresse url de ta page
      - Texte du lien par le texte du lien sue tu souhaites afficher dans ton introduction

      Supprimer
    2. Aaaaah c'est exactement ce que je cherchais, c'est super! Par contre mon "lire la suite" apparaît à la suite de mon texte, je n'arrive pas à le passer à la ligne.. J'aurais aussi aimé le mettre en couleur ou en italique pour le dissocier du reste du texte... Peux-tu m'aider? :)

      Supprimer
    3. Bonjour,
      Si tu n'as qu'un seul lien dans ton texte, tu peux ajouter le code CSS suivant aux codes CSS de ton encart d'introduction :

      /* Lien de l'introduction */
      #encart-intro a {
      display: block;
      color: #dc1731; /* Couleur de la police */
      font-style: italic; /* Style de la police : normal = normal | italic = italique */
      font-weight: bold; /* Graisse de la police : normal = normal | bold = gras */
      text-align: left; /* Alignement de la police : left = à gauche | center = centré | right = à droite */
      }

      Modifie les valeurs des lignes comportant les commentaires pour ce qui te plaît ;)

      Tu peux également modifier ces mêmes paramètres au survol du lien avec la souris. Pour cela, utilise le code suivant :

      /* Lien de l'introduction au survol de la souris */
      #encart-intro a:hover {
      }

      Ajoute avant le signe } les éléments que tu souhaites modifier au survol du lien avec la souris.

      Supprimer
  60. Supers tutos !

    Par contre j'ai un souci.. Mon image et mon titre ne cesse de se superposer et je n'arrive pas à la changer...

    Pourrais-tu m'orienter ? :)

    RépondreSupprimer
    Réponses
    1. Bonjour,
      Tu peux ajouter une marge au-dessus de ton titre pour le décaler vers le bas.
      Dans le code CSS pour définir l'apparence du titre, augmente la valeur de 15px à la ligne :

      margin-top: 15px; /* Marge au-dessus du titre */

      Supprimer
  61. Bonjour Catherine,

    cela fait un petit moment que je ne suis pas venue par là mais je me remet à fignoler mon design.
    J'ai fait ce tuto il y a pas mal de temps et j'en suis toujours ravie mais j'aimerais savoir s'il était possible de fixer la sidebar que sur les pages d'accueil, là où y a tous mes articles répertoriés et ne plus la voir lorsque l'on ouvre un article. Je ne sais pas si je suis très claire.
    Je te redonne mon blog, www.mamasycabeaute.com

    Merci d'avance, bonne journée à toi.
    Jessica

    RépondreSupprimer
  62. Re coucou,

    j'ai trouvé ma réponse dans le 1er commentaire sur ton dernier article "https://ladybirdr.blogspot.fr/2016/10/afficher-du-contenu-sur-certaines-pages.html"

    Juste un détail, serais possible de réduire l'espace entre le titre de l'article et la bannière, je te laisse voir ce dont je te parle.
    http://www.mamasycabeaute.com/2016/11/4-monday-shadow-challenge-old-pink.html

    Merci encore.
    Bizz
    Jessica

    RépondreSupprimer
    Réponses
    1. Bonjour Jessica,
      Pour réduire l'espace entre ton en-tête et tes articles sur les pages des articles, rajoutes les codes CSS suivants :

      .region-inner.main-inner {
      padding-top: 0;
      }

      .main-outer {
      margin-top: 0;
      }

      .content-inner {
      margin-top: 30px; /* Espace au-dessus des articles */
      }

      Dans le code conditionnel pour la page des articles.
      Tu peux ajuster l'espace en modifiant la valeur de 30px à la ligne :

      margin-top: 30px; /* Espace au-dessus des articles */

      Supprimer
  63. ou carrément enlever la bannière et la barre de menu du bas (celle sur la bannière) quand on est dans un article, en gros qu'il ne reste que la barre fixe du haut, l'article et le pied de page.

    Merci merci <3

    RépondreSupprimer
    Réponses
    1. Bonjour Jessica,
      Pour cacher l'en-tête et ta 2e barre de menu il faut utiliser le code CSS suivant :

      .region-inner.header-inner, .tabs-outer {
      display: none;
      }

      Supprimer
    2. Coucou Catherine,
      Merci pour ton aide précieuse, une énième fois <3
      Tout fonctionne ;)

      Bisousss
      Jessica

      Supprimer
  64. Bonjour Catherine,

    Tout d'abord un grand grand grand merci pour ton blog, j'y trouve juste TOUT ce que je cherche! Tes tutoriels sont super bien construits, clairs et faciles d’exécution, un régal!
    Grâce à toi, cette nouvelle aventure qu'est mon blog paraît moins compliquée!

    Je viens d'essayer le modèle orange sauf que j'ai deux petits soucis. Le premier et le plus embêtant, c'est l'image : elle apparaît beaucoup trop grande! Du coup elle déborde largement hors du cadre et de la page... Ensuite c'est la police du titre, qui n'apparaît pas avec la jolie police que tu proposes mais beaucoup plus banale. C'est dommage.

    J'espère que tu pourras m'aider, merci encore!

    Clémence

    RépondreSupprimer
    Réponses
    1. Bonjour Clémence,
      Je vois que tu as réglé les problèmes car ton encart apparaît correctement :)

      Supprimer
  65. Bonjour Catherine,

    Merci pour ce super tuto ! Par contre j'ai un petit souci, lorsque je veux mettre le texte de mon paragraphe en gras et au centre, rien à faire, il reste normal et sur la gauche. Je ne comprend pas trop car j'ai fait exactement comme cela:

    #encart-intro p {
    font-family: 'PT sans', sans-serif;
    font-weight: normal;
    font-size: 14px;
    color: #000000;
    text-align: center;
    padding: 0;
    margin-top: 15px;
    margin-bottom: 0;
    margin-left: 0;
    margin-right: 0;
    }

    Aurais-tu une solution à mon problème ?
    Merci d'avance!

    RépondreSupprimer
    Réponses
    1. Bonjour,
      Ton code CSS pour le texte me semble correcte.
      Par contre j'ai vu une erreur dans ton code CSS pour ton image :

      /* Apparence de l'image */
      #encart-intro img {
      position: relative;
      float: none;
      max-width: 100%;
      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: #D1CDD1; /* Couleur de la bordure */
      border-style: solid; /* Style de la bordure */
      border-width: 4px; /* Epaisseur de la bordure */
      #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 */}

      Tu as 2 codes l'un dans l'autre. Un code CSS doit toujours finir par un signe } sinon il sera mal ou pas pris en compte. S'il y a une erreur alors tous les codes qui suivent cette erreur peuvent être affectés. L'erreur venait peut-être de là.

      Ton 1er code n'est pas fermé :

      /* Apparence de l'image */
      #encart-intro img {
      position: relative;
      float: none;
      max-width: 100%;
      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: #D1CDD1; /* Couleur de la bordure */
      border-style: solid; /* Style de la bordure */
      border-width: 4px; /* Epaisseur de la bordure */

      Ajoute donc le signe } à la fin de ce code, et supprime le code qui le suit comme ceci :

      /* Apparence de l'image */
      #encart-intro img {
      position: relative;
      float: none;
      max-width: 100%;
      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: #D1CDD1; /* Couleur de la bordure */
      border-style: solid; /* Style de la bordure */
      border-width: 4px; /* Epaisseur de la bordure */
      }

      Supprimer
  66. Bonjour Catherine, j'ai toujours suivie tes tutoriels d'une grande simplicité (merci !!) mais là je suis dans l'impasse. J'ai réussi à créer mon encart d'intro comme je voulais mais depuis la barre latérale se retrouve en bas de mon blog, à la suite de mes articles...J'ai pourtant essayé de réduire sa taille mais sans conséquences..Je suis perdue..Merci d'avance !
    Voici mon blog http://caracteri-elle.blogspot.fr

    RépondreSupprimer
    Réponses
    1. Bonjour Laura,
      Le problème ne vient pas de l'encart d'introduction. Le problème vient de la largeur de ta barre latérale et de la zone de tes articles.
      Retrouve ce code CSS :

      div#mywrapper {
      float: left;
      width: 780px;
      }

      Remplace 780px par 770px, et voilà ;)

      Supprimer
    2. tout refonctionne à nouveau ! un grand merci et continue, je met en pratique chacun de tes tutos !! Milles merci !

      Supprimer
  67. Merci beaucoup pour ta réponse !

    RépondreSupprimer
  68. Bonjour, je voulais tenter ce turtoriel mais je suis les instructions à la lettre et je n'obtiens que mon paragraphe,je n'ai pas ma photo et le titre du gadget est affiché sur mon blog...J'ai essayé de changer de codes,j'ai recommencé 2 ou 3 fois mais je n'y arrive toujours pas.
    Auriez-vous une solution rapidement ?

    RépondreSupprimer
    Réponses
    1. Bonjour Nora,
      Peux-tu me donner le lien vers ton blog avec l'encart d'introduction pour que je puisse voir d'où vient le problème ?

      Supprimer
  69. Bonjour Catherine, voilà j'ai un petit problème. Mon encart d'introduction allé très bien jusqu'à il y a quelques jour où sans que je ne fasse rien, la bordure n'apparaît plus et le texte du paragraphe n'est plus dans la bonne police.
    Je ne comprends vraiment pas puisque tout est en ordre dans le code HTLM et pourtant ...

    Je te serais vraiment reconnaissante si tu pouvais résoudre mon petit problème ^^
    Merci d'avance !

    Milla

    RépondreSupprimer
  70. Au fait, mon blog est http://milla-unicorn.blogspot.fr

    Désolé pour ce petit oublis et merci d'avance.
    Milla

    RépondreSupprimer
    Réponses
    1. Bonjour Milla,
      Le problème vient de ton gadget contenant "En ce moment sur ma table de chevet ♡". Tu as copié/collé le code de ton encart d'introduction pour créer ce gadget, ce qui est très bien mais il y a juste un petit problème : ces 2 gadgets portent le même nom encart-intro.
      Les codes CSS que tu as ajouté pour ce nouveau gadget entrent en conflit avec les codes de ton encart d'introduction.
      Pour rectifier ce problème il suffit de modifier le nom de ton 2e gadget. Remplace tous les termes encart-intro de ce gadget par un autre terme, par exemple gadget-livre ou surmonchevet. Attention à remplacer le terme dans le code HTML et le code CSS du ton gadget ;)

      Supprimer
    2. Merci beaucoup pour ta réponse ^^ J'ai, sur tes conseils, changé les noms des gadgets et en effet, la bordure mon 1er gadget est revenu (youpii)! Néanmoins la police n'a toujours pas changé et le titre ne veut pas se centrer ... Je commence à désespéer ^^'

      Supprimer
    3. Bonjour Milla,
      Je ne peux plus accéder à ton blog :/

      Supprimer
  71. Bonjour Catherine :)

    Mille mercis pour ce tuto! J'ai lu tous les commentaires et j'avais une question (enfin plusieurs):
    - ma photo apparaît hyper grande et je ne sais pas comment la réduire.
    - j'ai suivi le tuto avec la photo ronde/orange, seulement elle n'apparait pas ronde ni avec la typo que tu avais utilisé (j'ai changé le code couleur en revanche)

    Pourrais-tu m'éclairer?

    En te remerciant par avance :)
    Belle journée à toi

    RépondreSupprimer
    Réponses
    1. Bonjour Paulette,
      Tu peux réduire la taille de la photo en réduisant la valeur de 100% de la ligne :

      max-width: 100%;

      Du code qui commence par :

      #encart-intro img {

      Pour que ta photo soit bien ronde, utilises un photo carrée. Sinon elle sera ovale.
      Pour la police que j'utilise dans la version Orange, il faut d'abord installer la police Satisfy de Google Fonts. J'explique comment installer une police Google Fonts ici ;)

      Supprimer
  72. Coucou Catherine !

    Pour moi tout fonctionne, seulement mon image ne fais pas du tout un jolie rond, même si je change le pourcentage de "border-radius" ça ne fonctionne pas :/ C'est peut être mon image qui ne convient pas ?

    Merci de ta réponse, bisous :)

    RépondreSupprimer
    Réponses
    1. Bonjour Bérénys,
      Pour que l'image soit bien ronde, utilise une image carré. En utilisant une image rectangulaire, l'image sera ovale ;)

      Supprimer
    2. Merci beaucoup ! Toi et tes tutos m'aide tellement :) ♡

      Supprimer
  73. Merci infiniment pour tous ces tutos !
    Je voulais savoir comment insérer les encadrements d'images offert en bonus ? je dois utiliser moi aussi photoshop?

    Merci encore

    RépondreSupprimer
    Réponses
    1. Bonjour Marine,
      Les modèles d'images en bonus ont été créés avec Photoshop. Il faut donc Photoshop pour pouvoir les modifier ;)

      Supprimer

Le blog est officiellement en PAUSE. Je ne pourrai PAS répondre à vos commentaires. Pour plus d'infos.

Vérifiez que la réponse à votre problème ne se trouve pas déjà dans les commentaires ;)

Lady Bird RedDesign et contenu par Catherine Surr
Mentions légales . Un blog créé sur Blogger