MINESWEEPER

Comment intégrer le Démineur dans un article Blogger

Blogger fait tourner un jeu intégré sans extension ni modification du modèle.

Temps nécessaire
Environ 2 minutes
Mode de l’éditeur
Vue HTML
Commande de la barre d’outils
Menu du crayon
Option barre latérale
Gadget HTML/JavaScript
<div style="max-width:100%;overflow:auto;text-align:center">
  <iframe src="https://play-minesweeper.games/embed/?size=beginner"
    width="344" height="472" frameborder="0"
    title="Minesweeper Game" loading="lazy"></iframe>
  <p style="font:12px/1.5 sans-serif;margin:6px 0 0">
    <a href="https://play-minesweeper.games/">play-minesweeper.games</a> — free Minesweeper, no download
  </p>
</div>

L’enveloppe vaut la peine d’être gardée sur Blogger en particulier, car le modèle mobile réutilise le balisage de ton article à une largeur bien plus étroite, et une iframe de taille fixe sans enveloppe poussera la page sur le côté.

Les deux parties vont ensemble. Le paragraphe sous le cadre est le lien de mention qui garde l’intégration gratuite ; ici, la couleur en ligne a été retirée pour que ton thème Blogger stylise le lien comme tous les autres liens de l’article. C’est exactement le genre d’ajustement que nous préférons te voir faire plutôt que de voir le lien sauter.

Deux choses font trébucher : la bascule vers la vue HTML se cache derrière une petite flèche de menu, et revenir ensuite à la vue de rédaction peut détruire le code que tu viens de coller. Les deux s’évitent facilement une fois qu’on le sait.

Ajouter le jeu à un article Blogger

  1. Copie le code d’intégration

    Choisis une taille de grille et un thème dans le générateur d’intégration et copie l’extrait entier. Blogger accepte du HTML complet : garde l’iframe et le paragraphe de mention en dessous ensemble, et colle les deux.

  2. Ouvre un nouvel article Blogger

    Va sur blogger.com, sélectionne le blog et clique sur le bouton de nouvel article. Écris d’abord l’article normalement : il est plus facile d’ajouter le jeu une fois le texte autour en place.

  3. Passe l’éditeur en vue HTML

    Tout à gauche de la barre d’outils de l’éditeur d’article se trouve une icône de crayon avec une petite flèche de menu à côté. Clique sur la flèche et choisis la vue HTML (HTML view). L’icône devient l’icône de code à chevrons et le corps passe en balisage brut.

  4. Colle l’iframe au bon endroit du balisage

    Repère le paragraphe que la grille doit suivre et colle les deux parties à cet endroit, la ligne de mention juste sous l’iframe. Si le collage se répartit mal sur plusieurs lignes, ramène l’iframe sur une seule ligne : Blogger s’en accommode mieux.

  5. Prévisualise et publie depuis la vue HTML

    Utilise l’aperçu pour ouvrir l’article dans un nouvel onglet et joue une partie. Publie sans repasser par la vue de rédaction : Blogger réécrit le balisage lors de cet aller-retour et il est réputé pour échapper ou supprimer les balises auxquelles il ne s’attend pas.

Trouver la vue HTML, et pourquoi elle compte

L’éditeur d’article actuel de Blogger n’utilise plus les anciens onglets Rédiger / HTML. La première commande de la barre d’outils sert à la place de sélecteur de mode : une icône de crayon quand tu es en vue de rédaction (Compose view), une icône <> quand tu es en vue HTML (HTML view), avec une petite flèche de menu à côté. Clique sur la flèche, choisis le mode voulu, et la barre d’outils revient. Choisir le mode dans lequel tu te trouves déjà ferme simplement le menu.

Toute l’affaire, sur Blogger, tient à cette bascule. La vue de rédaction est une surface de texte enrichi, et la conversion de Blogger entre les deux représentations fait des pertes bien connues : elle échappe les chevrons, supprime les attributs qu’elle ne reconnaît pas et remanie les espaces. Une iframe collée en vue HTML puis affichée en vue de rédaction peut revenir sous forme de texte visible, du genre <iframe src=..., sur ton blog en ligne.

La séquence sûre : écrire en vue de rédaction, passer une seule fois en HTML, coller, prévisualiser, publier. Si tu dois modifier l’article plus tard, ouvre-le et passe en vue HTML avant de toucher à quoi que ce soit.

Adapter la grille à un thème Blogger

Les thèmes de base de Blogger donnent à la colonne d’article entre 550 et 700 pixels, la barre latérale prenant le reste. Concrètement :

  • Débutant 9×9 (344 × 472) : tient dans tous les thèmes, toutes les colonnes et sur téléphone. C’est la recommandation par défaut.
  • Intermédiaire 16×16 (536 × 664) : tient dans la plupart des colonnes d’article sur ordinateur. Vérifie l’aperçu sur téléphone avant de publier.
  • Expert 30×16 (956 × 664) : plus large qu’une colonne d’article Blogger. Ne l’utilise que sur une Page autonome avec une mise en page large ou sans barre latérale, et garde l’enveloppe qui fait défiler.

Le modèle mobile de Blogger est un rendu vraiment distinct de ton article, que tu peux examiner en ajoutant ?m=1 à l’URL de n’importe quel article. Vérifie la grille là aussi, pas seulement dans l’aperçu sur ordinateur : c’est la version que la plupart de tes lecteurs verront réellement.

La voie du gadget de barre latérale

Si tu veux le jeu sur toutes les pages du blog plutôt que dans un seul article, laisse complètement de côté l’éditeur d’article. Dans le tableau de bord Blogger, choisis Mise en page (Layout), clique sur Ajouter un gadget (Add a Gadget) dans la colonne de la barre latérale, et choisis HTML/JavaScript. Colle l’extrait dans le champ de contenu, donne-lui un titre comme « Faites une pause », et enregistre la disposition.

Le contenu d’un gadget est enregistré tel que tu l’as saisi : aucun des dangers de la vue de rédaction ne s’applique. Colle la ligne de mention dans le gadget avec le cadre. La contrainte, c’est la largeur : les barres latérales Blogger font en général de 250 à 350 pixels, alors utilise la grille Débutant ou génère quelque chose de plus petit comme ?size=6x6&mines=5, qui reste bien lisible même dans une colonne étroite.

Quelle que soit la voie choisie, la grille ne demande ensuite aucun entretien. C’est un lien vers une page : les améliorations du jeu apparaissent sur ton blog sans que tu modifies quoi que ce soit. Si tu veux changer la taille ou le thème plus tard, régénère le code sur la page d’intégration et remplace l’URL.

Questions sur l’intégration dans Blogger

Où est la vue HTML dans le nouvel éditeur Blogger ?

C’est la commande la plus à gauche de la barre d’outils de l’éditeur d’article, pas un onglet séparé. En vue de rédaction, elle prend la forme d’une icône de crayon ; clique sur la petite flèche à côté et un menu propose la vue de rédaction et la vue HTML. Une fois en vue HTML, l’icône devient l’icône de code à chevrons, et le même menu te ramène en arrière.

Mon code d’intégration a disparu ou s’affiche en texte. Que s’est-il passé ?

Tu es presque à coup sûr revenu de la vue HTML à la vue de rédaction avant de publier. Blogger réanalyse le corps lors de ce changement et échappe régulièrement les chevrons ou retire des attributs : l’iframe disparaît, ou s’affiche en texte littéral sur la page publiée. Colle le code en dernier et publie directement depuis la vue HTML.

Peut-on mettre le Démineur dans la barre latérale Blogger ?

Oui, et c’est plus robuste que de le mettre dans un article. Va dans Mise en page, clique sur Ajouter un gadget dans la colonne de la barre latérale, choisis le gadget HTML/JavaScript, colle l’extrait dans la zone de contenu et enregistre. Le gadget stocke le balisage tel quel : pas de vue de rédaction pour l’abîmer. Utilise la grille Débutant 9x9, les barres latérales dépassant rarement 350 pixels de large.

L’intégration fonctionne-t-elle sur la version mobile de Blogger ?

Oui. Blogger sert un modèle mobile distinct, accessible en ajoutant ?m=1 à l’URL d’un article, et les iframes s’y affichent. Les largeurs fixes ne rétrécissent pas pour autant : une grille plus large que l’écran du téléphone oblige à faire défiler sur le côté. Placer l’iframe dans un div avec max-width:100% et overflow:auto préserve le reste de la mise en page.

Faut-il modifier mon modèle Blogger ?

Non. L’intégration est un contenu d’article ordinaire et n’a besoin de rien de la part du thème. Le seul point lié au modèle est la largeur de ta colonne d’article, qui décide de la taille de grille qui tient.

Un jeu intégré pose-t-il problème avec AdSense ?

L’intégration est une simple iframe qui pointe vers une page de jeu sans code publicitaire tiers ni script de suivi propre : elle n’injecte pas de publicité dans ton blog et ne concurrence pas tes propres blocs d’annonces. Comme toujours, veille à ce que tes propres emplacements AdSense respectent les règles de Google concernant les contenus interactifs.

Tout ce qui figure sur cette page part d’un extrait du générateur : un cadre de jeu et, en dessous, une ligne de mention avec un lien. Choisis une taille de grille et un thème, décide si tu affiches la ligne facultative « Powered by » à l’intérieur du jeu, puis copie le code.

Ouvrir le générateur d’intégration du Démineur

Également utile : le générateur de widget Démineur et les options de l’iframe, comment jouer au Démineur et les tailles de grille personnalisées.