Como mencione en el post “Cómo eliminar el cuadro y sombra de las imágenes en Blogger”, contamos con una plataforma algo básica para la personalización de nuestro blog y es necesario recurrir a algunos trucos para lograr mejorar su apariencia. Y para esto necesitamos agregar varias líneas de código a nuestro blog en HTML, CSS, etc.
En mi caso, necesito incluir código HTML o CSS para mostrar a mis lectores de una mejor manera como modificar sus plantillas de blogger y así resolver sus dudas. Existen varias formas de incluir código que sea visible para nuestros lectores en nuestros post y el método que les mostrare es uno de los más simples pero aun asi puede ser personalizado a nuestro gusto y lograr acoplarlo al estilo de la plantilla de blogger que estemos usando.
Para añadir código a mis post de blogger hago lo siguiente:
Paso 1.- Iremos al menú principal de nuestro Blog y daremos clic en la opción “Plantilla” o “Tema” y dentro de esta daremos clic en "Editar HTML".
Paso 2.- Aparecerá una nueva página con el código fuente de nuestra plantilla de blogger, allí tenemos que dar un clic dentro del cuadro y luego tecleamos CONTROL+F. Aparecerá un pequeño rectángulo de búsqueda en la esquina superior derecha.
*NOTA: Si el cuadro de búsqueda apareció fuera de la ventana donde está el código fuente de nuestro blog, es porque no dimos clic en la posición indicada en el paso 2.
Paso 3.- En el cuadro de búsqueda escribiremos lo siguiente (SIN LAS COMILLAS): “]]></b:skin>” y luego presionamos la tecla ENTER.
Paso 4.- Antes de la línea de texto que buscamos en el Paso 3, vamos a dar un espacio de 1 o 2 ENTER y pegaremos el siguiente código:
/* Code
----------------------------------------------- */
code {background:#424242;
font-family: Trebuchet MS; color: #ffffff;
display:block;
border:1px solid #BDBDBD;
padding:5px;
}
Paso 5.- Ahora daremos clic a “Guardar Tema”.
Paso 6.- Para empezar a mostrar el código HTML, CSS, etc. que queramos en nuestro blog, tenemos que ir a un post o crear uno nuevo. Justo encima del área en donde usualmente escribimos el contenido de nuestro post hay dos botones, uno dice “Redactar” y el otro “HTML”, seleccionaremos “HTML” y se mostrara el código fuente de nuestro post.
Paso 8.- El código que te presente en el Paso 4 tiene una apariencia general pero puede ser modificado, solo cambia los siguientes valores a tu gusto:
background: Determina el color de fondo, su valor es en hexadecimal.
fonf-family: Es el tipo de letra en el que se mostrara el código que escribas.
color: Es el color del texto, tambien debes escribirlo en hexadecimal.
display: Especifica cómo se mostrará el texto resultante.
border: Es el ancho, tipo y color del borde que rodeará al texto que escribas.
padding: Sera el espacio entre el texto y su contenedor.
"GRACIAS POR TU VISITA"
Si te gusto este artículo sobre “Cómo mostrar código en tus post de Blogger”, por favor compártelo con tus conocidos, en tus redes sociales y sobre todo no olvides dejar un comentario, todo esto me será de gran ayuda para seguir mejorando la calidad del blog.
No hay comentarios.:
Publicar un comentario