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 une liste déroulante de libellés sur Blogger

Les gros tutoriels c'est bien, mais les petits tutoriels sont toujours bienvenus. Après vous avoir expliqué comment déplacer la date sous le titre de vos articles, aujourd'hui je vous explique comment créer une liste déroulante à partir d'un gadget Libellés.

C'est parti pour les explications !

Sommaire


Faire une sauvegarde de son thème

Comme d'habitude, commencez toujours par faire une sauvegarde de votre thème avant d'y apporter des modifications ! Si vous faites une erreur, même d'inattention, vous pourrez facilement revenir en arrière ;)

Cliquez sur Modèle à partir de votre tableau de bord et cliquez sur Sauvegarder/Restaurer en haut à droite de l'écran. Cliquez sur Télécharger le modèle complet pour faire une sauvegarde de votre thème.

Créer une liste déroulante de libellés sur Blogger

Vous pourrez maintenant facilement revenir en arrière si vous faites une erreur en cliquant sur Choisissez un fichier et en sélectionnant ce fichier.

Ajouter votre gadget Libellés

Pour commencer, il faut ajouter un gadget libellés. Si vous en avez déjà un, passez à l'étape suivante.

Dans Mise en page cliquez sur Ajouter un gadget. Cherchez le gadget nommé Libellés, et cliquez dessus :

Créer une liste déroulante de libellés sur Blogger

Dans la fenêtre qui s'ouvre vous pouvez modifier les paramètres de votre gadget :
  1. Afficher tous les libellés, ou n'en sélectionner que certains
  2. Afficher les libellés par ordre alphabétique ou par fréquence
  3. Afficher les libellés en liste ou nuage
  4. Afficher ou non le nombre d'articles par libellé

Créer une liste déroulante de libellés sur Blogger

Enregistrez votre gadget en cliquant sur le bouton Enregistrer.

Préparer votre gadget

Avant de transformer votre gadget en liste déroulante, il faut préparer votre gadget.

Affichage en liste

Dans les paramètres, définissez le tri des libellés en liste et non en nuage.

Créer une liste déroulante de libellés sur Blogger

Trouver le nom de votre gadget

Pour trouver le nom de votre gadget, allez dans la barre d'adresse de la fenêtre de paramètres de ce gadget :

Créer une liste déroulante de libellés sur Blogger

Placez-vous à la fin de l'adresse URL. Vous trouverez un bout d'adresse comme suit :
widgetId=Label3
Le texte situé après widgetId= est le nom de votre gadget.
Dans mon exemple, mon gadget est Label3 car j'ai déjà 2 autres gadgets libellés d'installés. Le numéro 3 peut être différent pour vous. Notez bien ce nom.

Transformer le gadget en liste déroulante

Trouver le code HTML du gadget

Maintenant que vous avez créé et préparé votre gadget, passons à sa transformation.
Allez dans Modèle puis cliquez sur Modifier le code HTML.

Créer une liste déroulante de libellés sur Blogger

Cliquez sur Accéder au widget à droite du bouton Enregistrer le modèle. Dans la liste de gadgets qui s'affiche, cliquez sur le nom de votre gadget :

Créer une liste déroulante de libellés sur Blogger

Vous devrez trouver un code comme ceci :
<b:widget id='Label3' locked='false' title='Libellés' type='Label' visible='true'>
Avec à la place de Label3, le nom de votre gadget :

Créer une liste déroulante de libellés sur Blogger

Cliquez sur le triangle noir à gauche de cette ligne. Si vous ne la trouvez pas, passez à l'étape suivante.

Créer une liste déroulante de libellés sur Blogger

Le code suivant apparaît :
<b:includable id='main'>...</b:includable>
Si vous n'avez que :
<b:includable id='main'>
Alors cliquez sur le numéro à gauche de cette ligne pour fermer le code :

Créer une liste déroulante de libellés sur Blogger

Vous obtiendrez :

Créer une liste déroulante de libellés sur Blogger

Surlignez ce code fermé avec la souris.

Attention à ne surligner que ce code, et rien de plus ni de moins !

Si le code s'ouvre, alors il suffit de le fermer à nouveau en cliquant sur le numéro à gauche de :
<b:includable id='main'>
Supprimez le code surligné, et remplacez-le par :
<b:includable id='main'>
  <b:if cond='data:title'>
    <h2><data:title/></h2>
  </b:if>
  <div class='widget-content'>
    <select onchange='location=this.options[this.selectedIndex].value;' style='width:100%'>
      <option>Choisir une catégorie</option>
      <b:loop values='data:labels' var='label'>
        <option expr:value='data:label.url'><data:label.name/><b:if cond='data:showFreqNumbers'>(<data:label.count/>)</b:if>
        </option>
      </b:loop>
    </select>
  <b:include name='quickedit'/>
  </div>
</b:includable>
Sauvegardez en cliquant sur Enregistrer le modèle en haut de la page.

Si un message d'erreur apparaît, alors vous avez dû supprimer quelque chose en trop, quelque chose en moins, ou ajouté un code en trop, ou oublié de coller une partie du code.
Dans ce cas, recommencez en chargeant votre sauvegarde de thème.

Visuellement on obtient :

Créer une liste déroulante de libellés sur Blogger

Personnaliser la liste déroulante

Modifier le texte par défaut

Pour modifier le texte par défaut, remplacez Choisir une catégorie en bleu ci-dessous, par ce que vous voulez :

Créer une liste déroulante de libellés sur Blogger

Modifier l'apparence du nouveau gadget

Pour modifier l'apparence de ce nouveau gadget, nous allons utiliser le nom du gadget. Au début de chaque code CSS nous allons ajouter le nom du gadget avec un # comme ceci :
#Label3
Dans mon cas, le nom de mon gadget est Label3, mais utilisez bien le nom de votre gadget qui peut être Label1, Label2, etc.

Où coller les codes

Cliquez n'importe où dans la boîte de code de votre thème. Ensuite appuyez sur Ctrl et F en même temps (Cmd et F sur mac), dans le champ de recherche qui apparaît en haut à droite de la boîte de code collez :
]]></b:skin>
Appuyez sur Entrer. Collez tous les codes CSS suivants juste avant cette ligne.

Attention à bien cliquer dans la boîte de code avant d'appuyer sur Ctrl et F, sinon un champ de recherche apparaît en haut de l'écran, et non dans la boîte de code, or celui-ci ne marchera pas.

L'apparence globale du gadget

Pour modifier l'apparence globale du gadget utilisez le code CSS suivant :
/* Apparence globale du gadget */
#Label3 {
}
Vous pouvez modifier la couleur de fond du gadget avec la ligne suivante, à coller avant le signe } du code ci-dessus :
background: #A7C5BD;   /* Couleur de fond */
Remplacez le code couleur par celle de votre choix. Pour trouver le code d'une couleur, vous pouvez utiliser le site code-couleur.

Vous pouvez ajouter une marge à l'intérieur du gadget avec la ligne suivante :
padding: 20px 20px 20px 20px;   /* Marge à l'intérieur du gadget : haut droite bas gauche */
Cette ligne comprend 4 valeurs en pixels qui représentent dans l'ordre la marge :
  • en haut
  • à droite
  • en bas
  • à gauche

Avec ces 2 modifications le code CSS donne :
/* Apparence globale du gadget */
#Label3 {
    background: #A7C5BD;   /* Couleur de fond */
    padding: 20px 20px 20px 20px;   /* Marge à l'intérieur du gadget : haut droite bas gauche */
}
Visuellement on obtient :

Créer une liste déroulante de libellés sur Blogger

Modifier le titre du gadget

Pour modifier le titre du gadget, utilisez le code CSS suivant :
/* Apparence du titre du gadget */
#Label3 h2 {
    font-family: 'Kite One', sans-serif;   /* Police */
    color: #ffffff;   /* Couleur */
    font-weight: 400;   /* Graisse de la police */
    font-size: 14px;   /* Taille de la police */
    text-transform: uppercase;   /* Texte en majuscules : normal = normal | uppercase = majuscules | lowercase = minuscules */
    text-align: center;   /* Alignement du texte : left = à gauche | center = centré | right = à droite */
    letter-spacing: 2px;   /* Espace entre les caractères */
}
Remplacez les valeur des différents paramètres par ceux de votre choix ;)
Visuellement on obtient :

Créer une liste déroulante de libellés sur Blogger

Modifier l'apparence de la boîte de la liste

Pour modifier l'apparence de la boîte de la liste, vous pouvez utiliser le code CSS suivant :

/* Apparence de la boîte de la liste de libellés */
#Label3 select {
    padding: 10px 10px 10px 10px;   /* Marge à l'intérieur de la boîte : haut droite bas gauche */
    border: none;   /* Bordure de la boîte : none = aucune */
    background: #ffffff;   /* Couleur de fond */
    color: #524656;   /* Couleur du texte */
    font-family: 'Open sans', sans-serif;   /* Police */
    font-size: 11px;   /* Taille de la police */
    font-weight: 400;   /* Graisse de la police */
    letter-spacing: 1px;   /* Espace entre les caractères */
    text-transform: uppercase;   /* Texte en majuscules : normal = normal | uppercase = majuscules | lowercase = minuscules */
}
Rempalcez les valeur par celles que vous voulez.

Si vous souhaitez ajouter une bordure à votre boîte, remplacez la ligne suivante :
border: none;   /* Bordure de la boîte : none = aucune */
Par :
border: 1px solid #767676;   /* Bordure de la boîte : épaisseur style couleur */
Cette ligne comprend 3 valeurs comme suit :
  • l'épaisseur du trait de la bordure en pixels
  • le style de la bordure : solid = solide ; dashed = tirets ; dotted = pointillés
  • le code de la couleur de la bordure

Visuellement on obtient :

Créer une liste déroulante de libellés sur Blogger

Supprimer la bordure quand on clique sur la liste déroulante

Pour supprimer la bordure qui apparaît sur la liste quand on clique dessus, ajoutez la ligne suivante :
outline: none;   /* Supprime la bordure quand on clique sur la liste déroulante */
avant le signe } du code suivant :
/* Apparence de la boîte de la liste de libellés */
#Label3 select {
}
Sauvegardez en cliquant sur Enregistrer le modèle, et voilà !

Autres articles

68 commentaires:

  1. Je suis impressionnée par ta maîtrise et tes tutoriels si bien expliqués.
    Vraiment, ta newsletter est une denrée précieuse pour arriver à ses faufiler dans les arcanes de Blogger.
    Bises

    RépondreSupprimer
  2. Oh merci Catherine ! Je vais essayé ça tout de suite !

    Dis, j'ai toujours mon petit souci pour le menu en haut. Les textes ne sont pas centré, comment je peux régler ça ?

    Merci pour tout Catherine !

    Bise

    RépondreSupprimer
    Réponses
    1. Bonjour Marion,
      As-tu réglé le problème ?

      Supprimer
  3. Et voilà un gadget en plus bien sympa à mon blog :) Merci !!!!

    RépondreSupprimer
  4. C'est vraiment gentil tous ces tutos. Merci encore !

    RépondreSupprimer
  5. Coucou Catherine, tutoriel effectué mais malheureusement il n'y a pas de fond :/ Mon blog est en privé peut tu me donner ton email pour que tu puisse voir stp :)

    RépondreSupprimer
    Réponses
    1. Bonjour Sarah,
      Envoie-moi une invitation à contact@catherinesurr.fr

      Supprimer
  6. Merci, encore un super tuto !
    Pourrais-tu néanmoins le reproduire pour le widget "Archives du blog" s'il te plaît ?

    Merci encore :)

    RépondreSupprimer
    Réponses
    1. Bonjour,
      Tu peux mettre le gadget Archives en liste déroulante dans les options du gadget (dans Mise en Page clique sur Modifier sur le gadget en question) ;)
      Pour modifier son apparence (les codes CSS), suit les mêmes instructions que pour le gadget des catégories en remplaçant le nom du gadget par le nom de ton gadget d'archives ;)

      Supprimer
    2. D'accord merci beaucoup ! :)

      Supprimer
    3. C'est encore moi :)

      Serait-il possible que tu m'indiques la marche à suivre pour modifier le gadget des articles les plus consultés s'il te plaît ?

      Merci encore, ton blog est une référence en matière de customisation sur Blogger. Tu peux en être fière ;)

      Supprimer
    4. Bonjour,
      C'est sur ma liste de tutoriels à faire ;)

      Supprimer
    5. D'accord génial, merci beaucoup !

      Supprimer
  7. Bonjour, il y a une chose que je n'arrive pas à faire sur mon blog, c'est ajouter certains articles dans une catégorie précise. Comment fait-on? Merci d'avance.

    RépondreSupprimer
    Réponses
    1. Bonjour,
      Il faut associer ton article à un libellé sur la page de création/modification de l'article. Voici un tutoriel qui explique comment faire : http://ladybirdr.blogspot.com/2015/02/ajouter-des-libelles-aux-articles.html

      Supprimer
  8. Coucou,
    je dois avoir un problème je pense car il est bien en menu déroulant, mais je ne peux pas le personnaliser, ça ne fonctionne pas, aucunes modifications s'effectuent.

    RépondreSupprimer
  9. C'est bon j'ai résolu le problème, moi c'est Label1 et j'avais copié Label3

    RépondreSupprimer
  10. Bonjour, j'ai bien mon menu déroulant, j'ai remplacé le #Label3 par #Label1 car j'aimerai juste modifier l’apparence de la boite de liste et quand je sauvegarde rien n'a changé.... Toujours mon menu déroulant.... Aidez moi svp

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

      Supprimer
    2. Oui tenez, theawayhun.blogspot.fr

      Supprimer
    3. Bonjour,
      Il y a un erreur dans tes codes CSS. Un code juste avant le code pour ton gadget n'est pas fermé (il manque le signe }). Tout ce qui suit cette erreur n'est pas, ou mal, pris en compte.

      Retrouve ce morceau de code CSS :

      .contact-form-button-submit:hover{
      background: #ffffff;
      color: #000000;
      border: 1px solid #FAFAFA;
      }.post {
      padding-bottom:20px;
      border-bottom: 1px solid #BDBDBD;h3.post-title {
      font-family: 'Satisfy', cursive;
      font-weight: 100;
      font-size: 22px;
      color: #5b5b5b;
      padding-top: 5px;
      padding-right: 0;
      padding-bottom: 5px;
      padding-left: 0;
      }

      Remplace-le par :

      .contact-form-button-submit:hover{
      background: #ffffff;
      color: #000000;
      border: 1px solid #FAFAFA;
      }

      .post {
      padding-bottom:20px;
      border-bottom: 1px solid #BDBDBD;
      }

      h3.post-title {
      font-family: 'Satisfy', cursive;
      font-weight: 100;
      font-size: 22px;
      color: #5b5b5b;
      padding-top: 5px;
      padding-right: 0;
      padding-bottom: 5px;
      padding-left: 0;
      }

      Maintenant ça devrait marcher ;)

      Supprimer
    4. Merci pour ta reponse mais maintenant je n'arrive pas a changer le "choisir une categorie".... j'aimerai metre juste "CATEGORIES".
      Je n 'arrive pas non plus a mettre le titre de la meme taille que pour mon gadget "CONTACT" et "ACCEUIL"...
      J'attends ta reponse ;)
      merci encore

      Supprimer
    5. Bonjour Orso,
      Retrouve le code HTML de ton gadget (celui que tu as copié à partir de ce tutoriel) tu trouveras la ligne :

      <option>Choisir une catégorie</option>

      Remplace Choisir une catégorie par CATEGORIES pour changer ce terme.

      Pour modifier l'apparence du texte il faut modifier les valeurs du code CSS suivant :

      /* Apparence de la boîte de la liste de libellés */
      #Label3 select {
      padding: 10px 10px 10px 10px; /* Marge à l'intérieur de la boîte : haut droite bas gauche */
      border: none; /* Bordure de la boîte : none = aucune */
      background: #ffffff; /* Couleur de fond */
      color: #524656; /* Couleur du texte */
      font-family: 'Open sans', sans-serif; /* Police */
      font-size: 11px; /* Taille de la police */
      font-weight: 400; /* Graisse de la police : normal = normal | bold = gras */
      letter-spacing: 1px; /* Espace entre les caractères */
      text-transform: uppercase; /* Texte en majuscules : normal = normal | uppercase = majuscules | lowercase = minuscules */
      }

      Change la police, la taille de la police, la graisse, l'espacement des caractères, etc.

      Supprimer
  11. bonjour j'ai deux petits problèmes le premier est que à partir de "modifier l'apparence du nouveau gadget" je n'y arrive plus, je ne sais pas ou il faut insérer le code CSS et mon deuxième problème et que la barre "choisir une catégorie" s'affiche que sur blogger et quand je met afficher mon blog elle n'y est pas :)

    RépondreSupprimer
    Réponses
    1. Bonjour Mélanie,
      Colle les codes CSS donnés dans le tutoriel avant la ligne suivante dans le code HTML de ton thème :

      ]]></b:skin>

      Peux-tu me donner le lien de ton blog pour que je puisse voir le problème d'affichage ?

      Supprimer
  12. Bonjour voici le lien de mon blog :http://d-mel-s.blogspot.fr

    RépondreSupprimer
    Réponses
    1. Bonjour Mélanie,
      Il n'y a aucune trace de ton gadget sur ton blog.
      Vérifie dans Mise en Page que ton gadget se trouve bien dans la barre latérale de ton blog (sidebar).

      Supprimer
  13. Bonjour, c'est trés bien expliqué et un bon tutoriel ,mais je ne comprends pas , ca veux dire quoi le code CSS et du coup je sais pas ou coller le Label1 merci et bonne journée!

    RépondreSupprimer
    Réponses
    1. Bonjour Dana,
      les codes CSS vont permettre de définir l'apparence du gadget. Utilise les codes donnés dans le tutoriel. Modifie les valeurs par celles qui te plaisent (taille de police en pixels, nom de la police que tu souhaites utiliser, etc.). Colle tous les codes CSS que tu utilise, avant la ligne suivante dans le code de ton thème :

      ]]></b:skin>

      Supprimer
  14. Bonjour,
    vos tutoriels sont superbes et m'ont bien aidé ! Ce n'est peut-être pas le bon article pour ça, mais je voulais vous demander si vous saviez faire des cartes interactives (ou images cliquables) ? J'ai trouvé différents tutos sur internet et il y a 2 manières : codage html/css ou avec Gimp qui écrit tout seul un code html à copier/coller. Mais mon problème c'est que je ne sais pas où est-ce qu'il faut coller les codes pour que ma carte apparaisse comme une image au milieu d'un article avec du texte.
    Merci d'avance :)

    RépondreSupprimer
    Réponses
    1. Bonjour Ed,
      Pour coller du code HTML dans un article il faut cliquer sur le bouton HTML en haut à droite de la page de création/modification de l'article. Colle ton code à partir de cette page. Pour retourner en mode édition, clique sur le bouton Rédiger à côté du bouton HTML.

      Supprimer
    2. Merci beaucoup, j'essayerais dès que je pourrais !

      Supprimer
    3. Excusez-moi de vous déranger ^^, mais je voulais vous demander : lorsque je colle ma carte interactive (au milieu d'un texte) elle n'est pas positionnée au même endroit selon les navigateurs et cela pose parfois problème puisque le texte se déplace sur le côté de la carte ... Est-ce que vous savez de quoi ça peut venir ?

      Supprimer
    4. Peux-tu me donner le lien de ton blog pour que je puisse voir le problème ?
      A noter que c'est tout à fait normal que l'affichage de certains éléments change selon le navigateur. Malheureusement les navigateurs ne prennent pas tous en charge les mêmes éléments d'un site web, et même de manière différente.. C'est un grand casse-tête pour les web-designers ^^

      Supprimer
    5. J'ai réussi à recadrer en ajoutant ”width” et ”height” avant la viewbox, donc pour ça c'est bon finalement, merci quand même ^^.

      Par contre j'ai un autre problème, c'est que j'ai mis 3 cartes différentes sur la même page et que ma première qui devrait être bleue prend le code CSS de la 3ème et devient verte ... Comment faire pour que ma carte ”lise bien” son code ?
      Voilà le lien de la page : http://cuisinetpatisserie.blogspot.fr/p/manger-ailleurs.html

      Supprimer
    6. Le problème des couleurs vient du fait que tes 3 cartes ont le même nom. Rien ne les différencie dans le code. Il faut nommer tes cartes avec un nom différent pour pouvoir leur attribuer des couleurs différentes.
      Pour cela tu peux modifier la première ligne de chaque code :

      <div class="map" id="map">

      Change le mot map dans la partie id="map" par un nom différent pour chaque carte. Par exemple map-europe pour la première carte.

      Ensuite dans les codes CSS associés à cette carte, ajoute #map-europe avant la première ligne de chaque code comme ceci :

      #map-europe .map__image{

      Fait de même pour tes autres cartes, en changeant bien le terme map-europe pour chaque carte.

      Supprimer
    7. Au début j'avais oublié les espaces dans : ”#map-europe .map__image{” mais maintenant ça marche. C'est super, merci beaucoup !!!

      Supprimer
  15. Bonjour, j'aime beaucoup le nouveau design :)

    RépondreSupprimer
  16. Bonjour ma belle, j'ai essayé de réaliser ton tuto pour mes Archives et Mes libellés mais ça ne fonctionne pas... Comment je peux faire ..? Les codes sont là mais rien ne bouge ...

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

      Supprimer
  17. Bonjour, Est-ce qu'on peut ajouter de l'espace entre les noms des libellés due la liste déroulante, Je trouve qu'ils sont trop collés.
    Merci!

    RépondreSupprimer
    Réponses
    1. Bonjour Angélique,
      Malheureusement le personnalisation de la liste est très limitée du à sa construction HTML.
      Je note l'idée d'un tutoriel alternatif à cette méthode qui permettra de modifier plus en détail la liste ;)

      Supprimer
  18. Bonjour Catherine, encore un super tuto, merci ! J'ai appliqué cette méthode pour les archives, par contre, les mois n'apparaissent pas dans le menu déroulant (alors que ça fonctionne trés bien pour les catégories). Merci d'avance pour ton aide !http://jarrete-demain.blogspot.fr/

    RépondreSupprimer
    Réponses
    1. Bonjour,
      Ce tutoriel ne marchera qu'avec le gadget Libellés.
      Mais le gadget Archives propose par défaut un affichage en liste déroulante.
      Pour mettre les archives en liste déroulante, va dans Mise en Page, clique sur Modifier sur le gadget en question. A la ligne Style coche Menu déroulant. Enregistre, et voilà ;)

      Supprimer
    2. Bonjour Catherine, merci de ton retour mais c'est déjà ce que j'avais fait et ça ne fonctionne plus depuis que j'ai voulu appliquer ce tuto pour mes archives ;-(

      Supprimer
    3. Bonjour,
      Supprime le gadget Archives que tu as modifié et ajoutes-en un nouveau dont le code n'a pas été modifié. Ensuite modifie ses paramètres ;)

      Supprimer
  19. Ce commentaire a été supprimé par l'auteur.

    RépondreSupprimer
    Réponses
    1. Bonjour,
      Cherche le code CSS directement dans ton thème. Va dans Modèle > Modifier le code HTML. Clique dans la boîte de code puis appuie sur Ctrl et F en même temps (ou Cmd et F sur Mac). Dans le champ de recherche qui apparaît en haut de la boîte de code colle la première ligne du code CSS que tu cherches. Appuie sur Entrer et tu seras dirigé vers le code.
      Si tu souhaites ajouter des codes CSS à ton thème, ajoute-les en suivant cette méthode avant la ligne suivante de ton thème :
      ]]></bskin>

      Supprimer
  20. Bonjour Catherine et merci beaucoup vraiment pour ce que tu fais, car c'est grâce à toi et tes tutos si bien expliqués, que j'arrive petit à petit à mettre mon petit blog gourmand en forme.
    C'est pas facile, ça me prend du temps, mais petit à petit, et grâce à toi, j'y arrive ;)
    Cependant, j'ai un soucis. Je t'explique : je souhaite ajouter le widget libellé afin de mieux référencer mes recettes, et aussi car j'aime beaucoup m'en servir personnellement, lorsque je suis en recherche d'idées de recettes avec une même thématique, seulement, lorsque je veux insérer mon widget comme tu l'explique, et que je veux sauvegarder, ça me met un message d'erreur et ça "bug" ma page à l'aperçu. Je suis donc obligée de le supprimer et revenir en arrière pour que le blog fonctionne bien.
    Je suis sûre que je dois faire une erreur quelque part, mais je ne sais pas où :/
    Saurais-tu m'éclairer stp?
    Voici l'adresse de mon blog : https://ldpma.blogspot.be/
    Merci d'avance pour ta réponse et très bonne journée à toi :)
    Jen

    RépondreSupprimer
    Réponses
    1. Bonjour Jen,
      Quel type d'erreur est-ce que cela affiche ? Vérifie que tu n'as pas supprimé un morceau de code en trop, ou laissé un bout de code en trop. Ça peut venir de là.

      Supprimer
  21. Je n'ai compris ou il faillait mettre #Label3 dans le chapitre : Modifier l'apparence du nouveau gadget

    RépondreSupprimer
    Réponses
    1. Bonjour,
      Label3 est le nom du gadget de mon exemple. Pour modifier l'apparence du gadget il faut ajouter des codes CSS qui vont cibler ce gadget. Pour cela, il faut commencer tous les codes CSS par #Label3, comme ceci :

      #Label3 {
      }

      Les codes CSS sont à coller avant la ligne suivante dans le code de ton thème Blogger :

      ]]></b:skin>

      Tu peux suivre les explications du tutoriel pour trouver cette ligne dans ton code ;)

      Supprimer
  22. Bonjour, j'ai un petit soucis avec le widget archive. j'ai voulu faire comme pour le widget libellés, mais quand je déroule il n'y a rien qui se modifie quand je modifie le code, quelle pourrait être l'erreur ? http://nouveaudesignmissfashionista.blogspot.fr/

    Merci et bonne journée ;)

    RépondreSupprimer
    Réponses
    1. Bonjour,
      Pas besoin de suivre ce tutoriel pour la gadget Archives car le menu déroulant est déjà proposé dans les paramètres du gadget ;)
      Par contre pour la personnalisation du gadget Archives tu peux t'inspirer de ce tutoriel en remplaçant le nom du gadget par celui de ton gadget Archives ;)

      Supprimer
    2. Bonsoir,
      C'est ce que j'ai fais mais malheureusement ça ne fonctionne pas :/

      Supprimer
    3. Bonjour,
      As-tu réssi à faire ce que tu souhaitais ? Car en allant voir le blog test le champ contenant Archives est bien modifié. Par contre si tu souhaites modifier le gadget autour du champ il faut utiliser ce code CSS :

      /* Apparence du gadget Archives */
      #BlogArchive1 {
      }

      Et pour le titre :

      /* Apparence du gadget Archives */
      #BlogArchive1 h2 {
      }

      Supprimer
    4. Bonjour,
      Non je n'ai pas réussi à faire ce que je voulais. J'ai bien réussi à modifier Le" archives du blog" mais je n'arrive pas à modifier la liste déroulante.

      Supprimer
    5. Bonjour,
      Malheureusement ce n'est pas vraiment possible de modifier la liste déroulante à cause de sa structure HTML. on ne peut pas modifier l'apparence des éléments de la liste car se sont des option et non de li comme dans le menu par exemple.
      Désolée :/

      Supprimer
  23. Bonjour Catherine, je voulais te remercier pour tes tutos qui m'ont énormément aidé jusque là ! :)
    Mais voilà mon problème,
    Quand j'écris un article, il se trouve directement dans l'accueil, or ce que je voudrai, c'est qu'il soit directement placé dans un onglet "mode" dans le menu "Catégories" déroulant que j'ai fais. Même si avec le libéllé "mode" on le retrouve, dans l'onglet du menu déroulant il n'y ai pas. Je ne sais absolument pas si je me fais comprendre :/
    Je te laisse le lien de mon blog : http://modeandjoy.blogspot.fr/

    Merci !

    RépondreSupprimer
    Réponses
    1. Bonjour Bérénys,
      L'adresse url de ton lien Mode n'est pas correcte. L'adresse url d'un de tes libellés est comme ceci :

      http://modeandjoy.blogspot.fr/search/label/libellé

      Remplace Libellé par le mot exacte de ton libellé (accents et majuscules compris) et en remplaçant les espaces par %20. Par exemple :

      http://modeandjoy.blogspot.fr/search/label/Mon%20Libellé

      Par contre, la page d'accueil comporte le flux d'articles du blog. Il affiche tous les articles écrits. Tu ne peux pas changer ceci :/

      Supprimer
    2. Oh merci beaucoup, je viens de réussir ! :)
      D'accord merci encore ♡

      Supprimer
  24. bonjour, j'ai un soucis, je n'arrive pas a modifier l'apparence de mon gadget je vous laisse le lien si vous avez 2s a me consacrer
    http://www.alexfashionbreak.com/

    RépondreSupprimer
    Réponses
    1. Bonjour Alex,
      Je ne vois pas ton gadget sur ton blog :/
      Si les codes CSS n'ont pas eu d'effet sur ton gadget, vérifies que tu as bien changé le nom du gadget dans les codes CSS par le nom de ton gadget ;)

      Supprimer
  25. Bonsoir,

    Merci beaucoup pour ce tuto simple et facile :)

    RépondreSupprimer
  26. Bonjour !
    Je suis en train de commencer un tout nouveau blog et tes tutoriels m'ont énormément aidée ! Un grand merci !
    J'ai cependant un petit soucis (sinon, ça aurait été trop facile :p). J'avais suivi ce tuto pour les libellés et les archives. Tout fonctionnait correctement, mais j'ai fait d'autres choses par la suite et je me suis rendue compte que les deux gadgets ne s'affichaient plus :(. Pourtant, je les vois dans la preview, mais ils ne s'affichent plus sur le blog :/. Sais-tu d'où cela pourrait venir stp ?

    Merci d'avance pour ton aide :)
    https://monautumn.blogspot.fr/

    RépondreSupprimer

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