Hay dos cosas que confunden a la gente: el conmutador de la vista HTML está escondido tras una pequeña flecha desplegable, y volver después a la vista de redacción puede destrozar el código que acabas de pegar. Las dos se evitan fácilmente una vez que lo sabes.
Añadir el juego a una entrada de Blogger
Copia el código para insertar
Elige el tamaño del tablero y el tema en el generador y copia el fragmento entero. Blogger acepta HTML completo, así que mantén juntos el iframe y el párrafo de crédito que va debajo y pega las dos partes.
Abre una entrada nueva en Blogger
Ve a blogger.com, selecciona el blog y haz clic en Entrada nueva (New post). Escribe primero la entrada con normalidad: es más fácil añadir el juego cuando ya existe el texto de alrededor.
Cambia el editor a la vista HTML
En el extremo izquierdo de la barra de herramientas del editor hay un icono de lápiz con una pequeña flecha desplegable al lado. Haz clic en la flecha y elige Vista HTML (HTML view). El icono pasa a ser el de código, con los corchetes angulares, y el cuerpo se convierte en código sin formato.
Pega el iframe en el punto adecuado del código
Busca el párrafo tras el que quieres el tablero y pega ahí las dos partes, con la línea de atribución justo debajo del iframe. Si al pegar las líneas se cortan de forma rara, junta el iframe en una sola línea: Blogger lo lleva mejor.
Previsualiza y publica desde la vista HTML
Usa Vista previa para abrir la entrada en una pestaña nueva y jugar una partida. Publica sin volver a la vista de redacción (Compose view): Blogger reescribe el código en ese ida y vuelta y es conocido por escapar o eliminar las etiquetas que no espera.
Dónde está la vista HTML y por qué importa
El editor de entradas actual de Blogger no usa las antiguas pestañas Redactar / HTML. En su lugar, el primer control de la barra de herramientas hace también de selector de modo: un icono de lápiz cuando estás en la vista de redacción y un icono <> cuando estás en la vista HTML, con una pequeña flecha desplegable al lado. Haz clic en la flecha, elige el modo que quieras y la barra de herramientas vuelve. Si eliges el modo en el que ya estás, el menú simplemente se cierra.
Ese conmutador lo es todo en Blogger. La vista de redacción es una superficie de texto enriquecido, y la conversión de Blogger entre las dos representaciones pierde información de una forma bien documentada: escapa los corchetes angulares, elimina los atributos que no reconoce y recoloca los espacios. Un iframe pegado en la vista HTML y luego visto en la de redacción puede acabar como texto visible, del tipo <iframe src=..., en tu blog publicado.
La secuencia segura es: escribe en la vista de redacción, cambia a HTML una vez, pega, previsualiza y publica. Si necesitas editar la entrada más tarde, ábrela y cambia a la vista HTML antes de tocar nada.
Cómo hacer que el tablero quepa en un tema de Blogger
Los temas estándar de Blogger dan a la columna de la entrada entre 550 y 700 píxeles, y la barra lateral ocupa el resto. Eso significa:
- Principiante 9×9 (344 × 472): cabe en cualquier tema, en cualquier columna y en los móviles. La recomendación por defecto.
- Intermedio 16×16 (536 × 664): cabe en la mayoría de columnas de entrada en ordenador. Previsualízalo en un móvil antes de publicar.
- Experto 30×16 (956 × 664): más ancho que una columna de entrada de Blogger. Úsalo solo en una página independiente con un diseño ancho o sin barra lateral, y mantén el envoltorio con desplazamiento.
La plantilla móvil de Blogger es de verdad una versión aparte de tu entrada, que puedes ver añadiendo ?m=1 a la URL de cualquier entrada. Comprueba el tablero ahí además de en la vista previa de ordenador: es la versión que verán la mayoría de tus lectores.
La opción del gadget en la barra lateral
Si quieres el juego en todas las páginas del blog y no en una sola entrada, olvídate del editor de entradas. En el panel de Blogger elige Diseño (Layout), haz clic en Añadir un gadget (Add a Gadget) en la columna de la barra lateral y elige HTML/JavaScript. Pega el fragmento en el campo de contenido, ponle un título como «Tómate un descanso» y guarda la disposición.
El contenido de los gadgets se guarda tal como lo escribiste, así que no se aplica ninguno de los peligros de la vista de redacción: pega en el gadget la línea de atribución junto con el marco. La limitación es el ancho: las barras laterales de Blogger suelen medir de 250 a 350 píxeles, así que usa el tablero de Principiante o genera algo más pequeño como ?size=6x6&mines=5, que se lee con claridad incluso en una columna estrecha.
Elijas la vía que elijas, el tablero no necesita mantenimiento después. Es un enlace a una página, así que las mejoras del juego aparecen en tu blog sin que edites nada. Si más adelante quieres cambiar el tamaño o el tema, vuelve a generar el código en la página para insertar y cambia la URL.