Modifier le widget "PageList" via le code html

[CHERE GOSPA]

Bonjour, je suis nouveau sur Blogger et j'aimerais poser une question :
    
Sous la bannière de mon blog (en haut), j'ai mis le widget "PageList" (il s'étend sur les trois colonnes).
  
J'aimerais savoir comment on peut réduire les espaces entre les 12 liens qui figurent dans ce widget ("Msg", "Thèmes", "Infos", "Sts", "Liturgie", "Echos", "Rapel", "Stats", "Divers", "Val.", "France", "E-nous") via le code html.
  
Autrement dit, je voudrais que ces liens soient plus "serrés" les uns contre les autres.
  
D'avance je vous remercie pour votre aide et je vous laisse l'adresse de mon blog pour que vous puissiez voir le widget et les liens :
https://chere-gospa-medjugorje.blogspot.com/

[Claude VIQUESNEL]

Bonjour

 Vas sur l'inspecteur et cherche ceci

Essaies li.widget-content {padding-left:-5px;padding-right:-5px;} et bidouilles jusqu'à tu aies les espaces que tu souhaites. Sinon élargis la largeur du corps de ton blog.

Cordialement

[CHERE GOSPA]

Merci pour la réponse, mais je n'arrive pas à trouver l'endroit que vous me dites.
  
Quand je recherche le widget "PageList", ça me renvoie à ceci (si vous pouviez me dire où exactement je dois insérer votre code dans les lignes suivantes, ça m'aiderait beaucoup. Merci d'avance) :
  
<b:widget id='PageList1' locked='false' title='Page' type='PageList'>
          <b:widget-settings>
            <b:widget-setting name='pageListJson'><![CDATA[{"link1":{"href":"https://chere-gospa-medjugorje.blogspot.com/2024/06/quelques-themes-abordes-dans-les.html","position":1,"title":"Thèmes"},"link0":{"href":"https://chere-gospa-medjugorje.blogspot.com/search/label/Les%20derniers%20messages%20de%20la%20Sainte%20Vierge","position":0,"title":"Msg"},"link5":{"href":"https://chere-gospa-medjugorje.blogspot.com/2024/06/echos-des-paroisses.html","position":5,"title":"Echos"},"link4":{"href":"https://chere-gospa-medjugorje.blogspot.com/2024/06/lannee-liturgique-2024-avec-medjugorje.html","position":4,"title":"Liturgie"},"link3":{"href":"https://chere-gospa-medjugorje.blogspot.com/2024/06/paroles-de-saints.html","position":3,"title":"Sts"},"link2":{"href":"https://chere-gospa-medjugorje.blogspot.com/2024/06/blog-post.html","position":2,"title":"Infos"},"link9":{"href":"https://chere-gospa-medjugorje.blogspot.com/2024/06/le-poeme-de-lhomme-dieu-maria-valtorta.html","position":9,"title":"Val."},"link11":{"href":"https://chere-gospa-medjugorje.blogspot.com/2024/06/entre-nous-le-nouveau-site-chere-gospa.html","position":11,"title":"E. nous"},"link8":{"href":"https://chere-gospa-medjugorje.blogspot.com/2024/06/articles-divers.html","position":8,"title":"Divers"},"link7":{"href":"https://chere-gospa-medjugorje.blogspot.com/2024/06/statistiques.html","position":7,"title":"Stats"},"link6":{"href":"https://chere-gospa-medjugorje.blogspot.com/2024/06/piqure-de-rappel_20.html","position":6,"title":"Rappel"},"link10":{"href":"https://chere-gospa-medjugorje.blogspot.com/2024/06/bouquets-de-prieres-pour-la-france.html","position":10,"title":"France"}}]]></b:widget-setting>
            <b:widget-setting name='homeTitle'>Accueil</b:widget-setting>
          </b:widget-settings>

[Claude VIQUESNEL]

Bonjour

  Bon là tu es sur le code html, php donc vaut mieux pas y toucher. 

Dans le code de ton blog, tu as au début écrit en bleu le fichier .css puis en rouge, le code html, php.

Soit tu cherches  li.widget-content dans le code bleu si tu ne le trouves pas vas à la fin

et tu mets li.widget-content {padding-left:-5px;padding-right:-5px;}  avant les deux ]]

Bon courage

[Claude VIQUESNEL]

Il ne faut pas toucher à ce code sauf si vous  maîtrisez bien l'HTML-PHP 

Allez en bas des lignes écrites en bleu jusqu'au double crochet qui se trouve avant ></b:skin>

]]></b:skin>
    <b:template-skin>
et placer la ligne de code  li.widget-content {padding-left:-5px;padding-right:-5px;}  avant les deux ]]  et tester en modifiant le -5

[Luc Fayard]

Pour la petite histoire, il n'y a pas de PHP dans Blogger, On peut en rajouter si on veut, en l'encapsulant dans des <objet> et en stockant les fichiers PHP sur des serveurs distants; 

Luc

--
La Communauté ne peut vivre qu'à travers ses membres ! C'est vous qui construisez cet espace à votre image. Comment faire ? :
 
• Poser des questions : votre question n'a pas encore été abordée ? Lancez un nouveau sujet dans le forum et attendez qu'un membre vienne vous aider.
• Aider les autres : un sujet n'a pas encore de réponse et vous avez la solution ? Proposez-la et peut-être qu'elle conviendra !
• Remercier : un membre donne la bonne réponse à votre question ? Remerciez-le et notez-la comme "meilleure réponse"
• Participer : une Communauté doit être vivante. N'hésitez pas à prendre part aux discussions en cours pour apporter un point de vue nouveau sur un sujet.
---
Vous recevez ce message, car vous êtes abonné au groupe Google Groupes "Forum Blogger Ambassade Francophone".
Pour vous désabonner de ce groupe et ne plus recevoir d'e-mails le concernant, envoyez un e-mail à l'adresse blogger-fr+...@googlegroups.com.
Cette discussion peut être lue sur le Web à l'adresse https://groups.google.com/d/msgid/blogger-fr/641482d0-a63c-4f58-bcdf-c8ffda0e520dn%40googlegroups.com.

[CHERE GOSPA]

Merci pour votre réponse.
Je viens de placer le code à l'endroit que vous m'indiquez, mais, malheureusement, cela ne change rien quand je prévisualise (voir la capture d'écran ci-jointe), et ce même en augmentant ou en diminuant les valeurs en pixels.
Me serais-je trompé d'endroit ?

[Juan P Moedano]

Bonjour, bonne journée, cherchez cette partie dans votre code rouge et dans le padding où il est écrit 1em, jouez avec ce paramètre en le réduisant jusqu'à obtenir ce que vous voulez.

.tabs-inner .widget li a {
    display: inline-block;
    padding: .6em 1em;
    font: normal normal 14px Arial, Tahoma, Helvetica, FreeSans, sans-serif;
    color: #999999;
    border-left: 1px solid #ffffff;
    border-right: 1px solid #eeeeee;
}

peut-être que tu veux réaliser quelque chose comme ça

Salutations de Pachuca de Soto, Mexique

Juan Pablo Moedano

--

La Communauté ne peut vivre qu'à travers ses membres ! C'est vous qui construisez cet espace à votre image. Comment faire ? :
 
• Poser des questions : votre question n'a pas encore été abordée ? Lancez un nouveau sujet dans le forum et attendez qu'un membre vienne vous aider.
• Aider les autres : un sujet n'a pas encore de réponse et vous avez la solution ? Proposez-la et peut-être qu'elle conviendra !
• Remercier : un membre donne la bonne réponse à votre question ? Remerciez-le et notez-la comme "meilleure réponse"
• Participer : une Communauté doit être vivante. N'hésitez pas à prendre part aux discussions en cours pour apporter un point de vue nouveau sur un sujet.
---
Vous recevez ce message, car vous êtes abonné au groupe Google Groupes "Forum Blogger Ambassade Francophone".
Pour vous désabonner de ce groupe et ne plus recevoir d'e-mails le concernant, envoyez un e-mail à l'adresse blogger-fr+...@googlegroups.com.

Cette discussion peut être lue sur le Web à l'adresse https://groups.google.com/d/msgid/blogger-fr/ae66de04-5c5e-4bb3-8637-3314754d9d3cn%40googlegroups.com.

[CHERE GOSPA]

Oui, c'est exactement ce que je voudrais faire : avoir des espaces plus courts entre les mots pour pouvoir mettre des mots plus longs.
 
J'ai bien trouvé l'emplacement que vous m'indiquez dans votre message et j'ai mis votre code mais, là aussi, absolument rien ne se passe quand je prévisualise. Les espaces restent exactement les mêmes.

[Juan P Moedano]

Bonjour, bonne journée, si vous avez copié le code tel quel ça ne fera rien, mais si vous le modifiez comme ça, ça doit sûrement fonctionner:

.tabs-inner .widget li a {
    display: inline-block;

    padding: .6em .3em;

    font: normal normal 14px Arial, Tahoma, Helvetica, FreeSans, sans-serif;
    color: #999999;
    border-left: 1px solid #ffffff;
    border-right: 1px solid #eeeeee;
}

Atentamente,

Juan P Moedano

Cette discussion peut être lue sur le Web à l'adresse https://groups.google.com/d/msgid/blogger-fr/60397c19-069d-4d5c-acae-588225246819n%40googlegroups.com.

[CHERE GOSPA]

Merci beaucoup, Juan Pablo. !
En modifiant la valeur "1em", ça marche parfaitement !
  
Juste une petite précision : si on remplace "1em" par "3em" (par exemple), ça augmente les espaces entre les mots.
Donc, dans mon cas (je voulais diminuer ces espaces), il a fallu que je remplace "1em" par "0.75em" pour avoir l'espacement que je souhaitais.
  
Encore un grand merci !

[Claude VIQUESNEL]

Bonjour

 J'ai suivi ces échanges avec grand intérêt, mes connaissances en informatique étant assez légères et j'ai quelques questions :

 - Quel est le codage écrit en rouge utilisé dans modifier html svp ?

 - Au lieu d'utiliser des valeurs négatives pour les px, il vaut mieux utiliser des fractions de em ?

Merci pour vos réponses

Bien à vous

[Juan P Moedano]

Bonjour CHERE GOSPA, c'est super que tu aies eu ce que tu cherchais !!!

En effet 1em est une unité relative qui désigne la taille de police actuelle.

Il convient de mentionner que lorsque vous utilisez un:

padding: 1em .75em ; 

cela signifie que vous aurez un remplissage de 1em en haut et en bas et de 0,75em à gauche et à droite.

Salutations!!!

Juan Pablo Moedano

Cette discussion peut être lue sur le Web à l'adresse https://groups.google.com/d/msgid/blogger-fr/fd7804e3-c724-4c2e-99ba-fd4b42e45aa9n%40googlegroups.com.

[Juan P Moedano]

    

Bonjour Claude VIQUESNEL, le code indiqué en rouge ne fait pas partie du HTML, mais plutôt du CSS avec lequel le HTML est présenté.

D'un autre côté, considérez que le blogueur utilise un langage XLM, où HTML, CSS, JS et bien d'autres éléments sont inclus dans un seul code.

Le HTML dans ce cas est codé comme suit :

<div class='region-inner tabs-inner'>
      <b:section class='tabs' id='crosscol' maxwidgets='1' showaddelement='yes'>
        <b:widget id='PageList1' locked='false' title='Páginas' type='PageList'>
          <b:widget-settings>
            <b:widget-setting name='pageListJson'><![CDATA[{"link0":{"href":"http://b2c-casa200.blogspot.com/","position":0,"title":"Página Principal"},"1323397823330483004":{"href":"https://b2c-casa200.blogspot.com/p/acerca-de_22.html","position":2,"title":"ACERCA DE"},"8179606611956295756":{"href":"https://b2c-casa200.blogspot.com/p/aviso-de-privacidad-simplificado.html","position":1,"title":"AVISO DE PRIVACIDAD SIMPLIFICADO"},"3323598738940199223":{"href":"https://b2c-casa200.blogspot.com/p/contactenos.html","position":3,"title":"CONTÁCTENOS"}}]]></b:widget-setting>
            <b:widget-setting name='homeTitle'>Página Principal</b:widget-setting>
          </b:widget-settings>
          <b:includable id='main'>
  <b:if cond='data:title != &quot;&quot;'><h2><data:title/></h2></b:if>
  <div class='widget-content'>
    <b:if cond='data:mobile'>
      <select expr:id='data:widget.instanceId + &quot;_select&quot;'>
        <b:if cond='data:showPlaceholder'>
          <option disabled='disabled' hidden='hidden' value=''>
            <b:attr cond='!data:hasCurrentPage' name='selected' value='selected'/>
            <b:message name='messages.moveToPage'/>
          </option>
        </b:if>
        <b:loop values='data:links' var='link'>
          <option expr:value='data:link.href'>
            <b:attr cond='data:link.isCurrentPage' name='selected' value='selected'/>
            <data:link.title/>
          </option>
        </b:loop>
      </select>
      <span class='pagelist-arrow'>&amp;#9660;</span>
    <b:else/>
      <ul>
        <b:loop values='data:links' var='link'>
          <li>
            <b:class cond='data:link.isCurrentPage' name='selected'/>
            <a expr:href='data:link.href'><data:link.title/></a>
          </li>
        </b:loop>
      </ul>
    </b:if>
    <b:include name='quickedit'/>
  </div>
</b:includable>
        </b:widget>

Par contre, en utilisant des valeurs négatives pour px et qu'il vaut mieux utiliser des fractions d'em, je pense qu'il y a une confusion, px et em sont des unités de mesure de longueur, px sont des unités absolues et em sont des unités relatives.

un px équivaut à 1/96ème de 1 pouce et un em équivaut à la taille de la lettre.

J'espère que c'est compréhensible.

Salutations!!!

Atentamente,

Juan P Moedano

Cette discussion peut être lue sur le Web à l'adresse https://groups.google.com/d/msgid/blogger-fr/7be9734b-4cea-43fa-9a58-6b4122bb05b2n%40googlegroups.com.

[Claude VIQUESNEL]

Merci Juan

 Je suis allé voir ce qu'est le codage XML et je comprends mieux comment est codé blogger, ça va être plus facile pour modifier certains éléments.

bien à toi

Claude

[CHERE GOSPA]

En réponse à Claude VIQUESNEL :
  
Le code qu'il faut modifier pour réduire ou agrandir les espaces entre les liens du Widget "PageList" (le code donné par Juan Pablo) se trouve dans la partie qui commence par : /* Tabs
  
Pour accéder à cette partie, il faut cliquer sur "Modifier le code HTML" (dans l'administration du blog).
  
Encore un grand merci à tous !