En esta guía completa, aprenderás cómo crear un cuadro de código fuente en Blogger y WordPress para mostrar tus fragmentos de código de manera profesional y fácil de leer. Seguir estos pasos te permitirá mejorar la presentación de tu blog y ofrecer a tus lectores una mejor experiencia.
Paso 1: Acceder al Editor de Blogger
Primero, inicia sesión en tu cuenta de Blogger y dirígete al panel de control. Desde allí, selecciona la entrada en la que deseas insertar el cuadro de código, o crea una nueva entrada haciendo clic en «Entrada nueva».
Paso 2: Cambiar al Modo HTML
Una vez en el editor de entradas, cambia de «Vista de redacción» al modo «Vista HTML». Esto te permitirá insertar el código necesario directamente en el contenido de tu entrada.
Paso 3: Insertar el Código de Estilo
Para darle un buen formato a tu cuadro de código, necesitas agregar algunos estilos CSS. El siguiente código lo puedes pegar al inicio de todo en la entrada:
Código CSS para el Estilo del Cuadro de Código
<style>
.code-container {
background-color: #2d2d2d;
color: #ffffff;
padding: 10px;
border-radius: 5px;
white-space: pre-wrap; /* Ajusta el contenido para que se ajuste a la pantalla */
word-wrap: break-word; /* Rompe las líneas largas */
overflow-x: auto; /* Muestra la barra de desplazamiento si es necesario */
}
code {
font-family: Consolas, "Courier New", monospace;
}
</style>
Paso 4: Insertar el Cuadro de Código
Después de agregar el código de estilo, puedes insertar el cuadro de código en el lugar donde desees que aparezca en tu entrada. Pega el siguiente código HTML para el cuadro de código:
<!--Comienza el cuadro de código-->
<pre class="code-container">
<code>
PEGA EL CÓDIGO AQUÍ.
</code>
</pre>Resultado
Resultado del código
MUY IMPORTANTE
- Cuando hayas pegado el código del PASO 4, cambia a modo «Vista de Redacción» y busca la señal que dejaste «PEGA EL CODIGO AQUÍ» y reemplaza por el código a mostrar para que el código se muestre correctamente. Esto es un paso importantísimo.
- Utiliza etiquetas descriptivas y comentarios dentro de tu código para hacerlo más comprensible para tus lectores. Ejemplo <!–Comienza el cuadro de código–>
- Verifica que el estilo del cuadro de código se adapte a la estética general de tu blog para una mejor integración visual.
Paso 5: Publicar la Entrada
Una vez que hayas insertado y formateado tu cuadro de código, puedes realizar una «Vista Previa» para visualizar tu trabajo. Cuando estés satisfecho con tu entrada, haz clic en «Publicar» para que el contenido esté disponible en tu blog.
Conclusión
Crear un cuadro de código fuente en Blogger es una excelente manera de compartir fragmentos de código con tus lectores de manera clara y profesional. Siguiendo los pasos descritos en esta guía, podrás mejorar la presentación de tu blog y ofrecer un mejor contenido técnico. ¡Empieza hoy mismo y lleva tu blog al siguiente nivel!
