Sé que ésta información existe en otros sites, pero en muchos de ellos solo copian y pegan los scripts sin siqueira explicar qué fucking están haciendo. Aquí te explico cómo puedes poner una "caja" en donde puedas exponer o mostrar un script en una entrada de Blogger.
Lo malo
El texto a mostrar dentro de la caja se mostrará de un único color y fuente, por lo que éste no lucirá como sueles verlo en un editor.
Lo bueno
Este pequeño script está basado en css y html, mismo que se mostrará dependiendo las características que tú desees.
Al ser éste un script basado en css y html, es necesario separar los parámetros. Las líneas de css irán dentro del <body> del blog, mientras que las líneas de html con las cuales mandaremos llamar dichos valores, irán en la plantilla "html" de tu entrada.
Follow me, follow me! - Extracto de Bad Boys II
En el panel principal de tu blogger, ve a Tema > Editar HTML y busca la siguiente línea:
y da click en los tres puntos:
dentro de esta parte, insertarás el siguiente código:
pre code { /* Inicio de código */
overflow:auto; /* Agrega el scroll a la caja si el contenido del texto es mayor al max-height */
background:#111111; /* Color del background de la caja */
border: 1px solid rgb(114, 114, 114); /* Agrega un borde de Xpx grosor y colores en valores RGB */
color:#7f7f7f; /* Color del borde */
font-size:14px; /* Tamaño de letra */
display:block; /* Despliega el contenido como bloque. */
/* display:table; El max-height dependerá de la altura del párrado o script */
max-height:150px; /* Altura máxima de la caja */
padding:10px; /* Margen desde el cual comenzará el texto */
text-align:left; /* Alinear el contenido a la izquierda */
min-height:43px; /* Altura mínima de la caja */
width:80%; /* Ancho de la caja. Puede ser en Xpx o en porcentaje (depende del max-width de la página *
white-space:normal; /* Ajustará el texto (si es párrado al max-width de tu caja */
/* white-space:pre; Hará los saltos de línea automaticamente. */
}
Bien, puedes modificar cualquiera de ellos a tu gusto, pero te recomiendo vayas a https://www.w3schools.com/ para ver más ejemplos del uso de algunos parámetros, como por ejemplo el de display y white-space. En mi tester, el script se ve algo así:
Después, ve a la entrada donde quieras desplegar la caja para tu script y ve a la edición en HTML
<pre><code> Texto a insertar en la caja </pre></code>Debe quedarte something like this:
Y con ello, al momento de publicar tu entrada, podrás ver tu script, texto o whatever tu quieras ponerle, en una caja para diferenciarlo el texto de tu entrada.
Pero como te decía, el texto dentro de ésta, será en un único color. Maybe pueda cambiarse si te pones a editar el texto independientemente, pero vaya, eso es para las personas pacientes.
Bites.
No hay comentarios.:
Publicar un comentario