MINESWEEPER

Minesweeper in einen Blogger-Post einbetten

Blogger führt ein eingebettetes Spiel ohne Plugin und ohne Änderung am Template aus.

Zeitaufwand
Etwa 2 Minuten
Editor-Modus
HTML-Ansicht
Bedienelement
Stift-Dropdown
Für die Seitenleiste
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>

Den Container solltest du gerade bei Blogger behalten: Das mobile Template verwendet dein Post-Markup in deutlich geringerer Breite, und ein iframe mit fester Größe ohne Container schiebt die Seite seitwärts.

Beide Teile gehören zusammen hinein. Der Absatz unter dem Fenster ist der Quellenlink, der das Einbetten kostenlos hält; hier wurde die Inline-Farbe entfernt, damit dein Blogger-Theme den Link wie jeden anderen Link im Post gestaltet – genau die Art Anpassung, die uns lieber ist, als wenn du ihn weglässt.

Zwei Dinge bringen viele aus dem Tritt: Der Umschalter zur HTML-Ansicht steckt hinter einem kleinen Dropdown-Pfeil, und das Zurückwechseln in die Schreibansicht kann den gerade eingefügten Code zerstören. Beides lässt sich leicht vermeiden, wenn man es weiß.

Das Spiel in einen Blogger-Post einfügen

  1. Den Einbettungscode kopieren

    Wähl im Generator Spielfeldgröße und Design und kopier den ganzen Code. Blogger nimmt vollständiges HTML an, lass also das iframe und den Absatz mit der Quellenangabe darunter zusammen und füg beides ein.

  2. Einen neuen Blogger-Post öffnen

    Geh zu blogger.com, wähl den Blog und klick auf „Neuer Post“. Schreib den Post zuerst ganz normal – das Spiel lässt sich leichter einfügen, wenn der Text drumherum schon steht.

  3. Den Editor in die HTML-Ansicht schalten

    Ganz links in der Werkzeugleiste des Post-Editors steht ein Stift-Symbol mit einem kleinen Dropdown-Pfeil daneben. Klick auf den Pfeil und wähl „HTML-Ansicht“. Das Symbol wird zum Code-Symbol mit spitzen Klammern, und der Textkörper zeigt das rohe Markup.

  4. Das iframe an der richtigen Stelle im Markup einfügen

    Such den Absatz, auf den das Spielfeld folgen soll, und füg dort beide Teile ein, die Quellenzeile direkt unter dem iframe. Bricht das Eingefügte unschön über mehrere Zeilen um, setz das iframe in eine einzige Zeile – damit kommt Blogger besser zurecht.

  5. Aus der HTML-Ansicht prüfen und veröffentlichen

    Öffne den Post über „Vorschau“ in einem neuen Tab und spiel eine Runde. Veröffentliche, ohne in die Schreibansicht („Compose view“) zurückzuwechseln: Blogger schreibt das Markup bei diesem Hin und Her um und ist dafür bekannt, unerwartete Tags zu maskieren oder zu entfernen.

Die HTML-Ansicht finden und warum sie wichtig ist

Der aktuelle Post-Editor von Blogger nutzt nicht mehr die alten Tabs „Verfassen“ und „HTML“. Stattdessen dient das erste Element der Werkzeugleiste als Modusumschalter: ein Stift-Symbol in der Schreibansicht, ein <>-Symbol in der HTML-Ansicht, jeweils mit einem kleinen Dropdown-Pfeil daneben. Klick auf den Pfeil, wähl den gewünschten Modus, und die Werkzeugleiste kehrt zurück. Wählst du den Modus, in dem du schon bist, schließt sich das Menü einfach.

Dieser Umschalter entscheidet bei Blogger alles. Die Schreibansicht ist eine Rich-Text-Oberfläche, und die Umwandlung zwischen beiden Darstellungen ist auf gut dokumentierte Weise verlustbehaftet: Sie maskiert spitze Klammern, entfernt unbekannte Attribute und ordnet Leerraum neu. Ein iframe, das in der HTML-Ansicht eingefügt und dann in der Schreibansicht angezeigt wurde, kann auf deinem Live-Blog als sichtbarer Text <iframe src=... wieder auftauchen.

Die sichere Reihenfolge: in der Schreibansicht schreiben, einmal auf HTML wechseln, einfügen, Vorschau ansehen, veröffentlichen. Willst du den Post später bearbeiten, öffne ihn und wechsle in die HTML-Ansicht, bevor du irgendetwas anfasst.

Das Spielfeld an ein Blogger-Theme anpassen

Die Standard-Themes von Blogger geben der Post-Spalte zwischen 550 und 700 Pixel, den Rest nimmt die Seitenleiste ein. Das heißt:

  • Anfänger 9×9 (344 × 472) – passt in jedes Theme, jede Spalte und auf Handys. Die Standardempfehlung.
  • Fortgeschritten 16×16 (536 × 664) – passt am Desktop in die meisten Post-Spalten. Prüf es vor dem Veröffentlichen auf dem Handy.
  • Experte 30×16 (956 × 664) – breiter als eine Blogger-Post-Spalte. Nimm es nur auf einer eigenständigen Seite mit breitem Layout oder ohne Seitenleiste und behalte den scrollbaren Container.

Das mobile Template von Blogger ist eine wirklich eigene Darstellung deines Posts, die du dir ansehen kannst, indem du ?m=1 an eine Post-URL hängst. Prüf das Spielfeld dort ebenso wie in der Desktop-Vorschau – diese Version sehen die meisten deiner Leser tatsächlich.

Der Weg über ein Seitenleisten-Gadget

Soll das Spiel auf jeder Seite des Blogs stehen statt in einem einzelnen Post, lass den Post-Editor ganz weg. Wähl im Blogger-Dashboard Layout, klick in der Seitenleisten-Spalte auf Gadget hinzufügen und wähl HTML/JavaScript. Füg den Code in das Inhaltsfeld ein, gib einen Titel wie „Kurze Pause“ an und speichere die Anordnung.

Gadget-Inhalte werden so gespeichert, wie du sie eingegeben hast, die Gefahren der Schreibansicht gibt es hier also nicht – füg die Quellenzeile zusammen mit dem Fenster in das Gadget ein. Die Grenze ist die Breite: Blogger-Seitenleisten sind meist 250 bis 350 Pixel breit, nimm also das Anfänger-Spielfeld oder erzeug etwas Kleineres wie ?size=6x6&mines=5, das auch in einer schmalen Spalte gut lesbar ist.

Egal welchen Weg du nimmst: Das Spielfeld braucht danach keine Pflege. Es ist ein Link auf eine Seite, Verbesserungen am Spiel erscheinen also auf deinem Blog, ohne dass du etwas bearbeitest. Willst du später Größe oder Design ändern, erzeug den Code auf der Seite zum Einbetten neu und tausch die URL aus.

Fragen zum Einbetten in Blogger

Wo ist die HTML-Ansicht im neuen Blogger-Editor?

Sie ist das Element ganz links in der Werkzeugleiste des Post-Editors, kein eigener Tab. In der Schreibansicht erscheint es als Stift-Symbol; klick auf den kleinen Pfeil daneben, dann bietet ein Menü die Schreibansicht und die HTML-Ansicht an. In der HTML-Ansicht wird das Symbol zum Code-Symbol mit spitzen Klammern, und über dasselbe Dropdown kommst du zurück.

Mein Einbettungscode ist verschwunden oder als Text sichtbar. Was ist passiert?

Höchstwahrscheinlich hast du vor dem Veröffentlichen von der HTML-Ansicht zurück in die Schreibansicht gewechselt. Blogger liest den Textkörper bei diesem Wechsel neu ein und maskiert dabei regelmäßig spitze Klammern oder entfernt Attribute – das iframe verschwindet dann oder steht als normaler Text auf der veröffentlichten Seite. Füg den Code zuletzt ein und veröffentliche direkt aus der HTML-Ansicht.

Kann ich Minesweeper in meine Blogger-Seitenleiste setzen?

Ja, und das ist robuster als ein Post. Geh zu Layout, klick in der Seitenleisten-Spalte auf Gadget hinzufügen, wähl das Gadget HTML/JavaScript, füg den Code in das Inhaltsfeld ein und speichere. Das Gadget speichert das Markup unverändert, es gibt also keine Schreibansicht, die es zerstören könnte. Nimm das Anfänger-Spielfeld 9x9 – Seitenleisten sind selten breiter als 350 Pixel.

Funktioniert die Einbettung in der mobilen Blogger-Version?

Ja. Blogger liefert ein eigenes mobiles Template aus, das du erreichst, indem du ?m=1 an eine Post-URL hängst, und iframes werden dort angezeigt. Feste Breiten schrumpfen allerdings nicht, ein Spielfeld, das breiter ist als der Handybildschirm, erzwingt also seitliches Scrollen. Ein div mit max-width:100% und overflow:auto um das iframe hält den Rest des Layouts intakt.

Muss ich mein Blogger-Template ändern?

Nein. Die Einbettung ist normaler Post-Inhalt und braucht nichts vom Theme. Wichtig am Template ist nur die Breite deiner Post-Spalte – sie entscheidet, welche Spielfeldgröße passt.

Macht ein eingebettetes Spiel Probleme mit AdSense?

Die Einbettung ist ein einfaches iframe, das auf eine Spielseite ohne Werbecode von Drittanbietern und ohne eigenes Tracking-Skript zeigt. Sie schleust also keine Werbung in deinen Blog ein und konkurriert nicht mit deinen eigenen Anzeigenblöcken. Wie immer gilt: Halte deine eigenen AdSense-Platzierungen konform mit den Google-Richtlinien zu interaktiven Inhalten.

Alles auf dieser Seite beginnt mit einem Code aus dem Generator: einem Spielfenster und einer einzeiligen Quellenangabe mit Link darunter. Wähl Spielfeldgröße und Design, entscheide, ob die optionale „Powered by“-Zeile im Spiel erscheinen soll, und kopier dann den Code.

Minesweeper-Generator öffnen

Ebenfalls nützlich: der Minesweeper-Widget-Generator mit allen iframe-Optionen, die Minesweeper-Spielanleitung und eigene Spielfeldgrößen.