Trucos para Poner Código desde las Entradas o Páginas y que Funcione
Probablemente hayas abandonado algún proyecto como el de incluir un elemento que necesite código HTML en una entrada o página del blog, porque el resultado no fue el esperado.
Para que puedas insertar el código de un elemento en una entrada o en una página estática, como por ejemplo el de una galería de imágenes, una sección con pestañas, o cualquier otra cosa, hay que seguir ciertas pautas en la configuración de las entradas/páginas, y echar de mano de alguno que otro truco que de no saberlo y usarlo, evitará que las cosas funcionen como Dios manda... o como tú esperas :)
Es por eso que hoy quiero compartirte algunos trucos y cosas que debes tomar en cuenta y que seguramente te serán útiles cuando quieras implementar cualquier cosa que utilice código HTML desde el editor de entradas o páginas, y que he aprendido sobre la marcha al usarlos.
1. Eligiendo el modo de redacción
Este es un punto básico y de partida a la hora que empiezas a redactar una entrada, y cuando vas a agregar código que desees que se "interprete", es decir, que no aparezca tal y como lo has agregado.
Yo te recomendaría usar la opción: "Interpretar HTML escrito" tal y como muestro en la siguiente imagen.
Si lo haces de ése modo, puedes pegar el código estando en la opción: "Redactar", con la seguridad de que el código será interpretado y se visualizará el elemento que quieres poner.
Ten en cuenta que si usas la opción "Interpretar HTML escrito" y pasas a la opción HTML porque por ejemplo vas a agregar el ancho y alto de una imagen, o cualquier otra cosa en alguna etiqueta, al regresar a la opción "Redactar" se va a visualizar el elemento y no el código de éste.
Lo mismo sucederá si utilizas la opción "Mostrar HTML tal cual", en cuyo caso debes poner el código del elemento estando el la opción HTML de la entrada para que funcione.
Otra cosa importante que debes saber, es que las preferencias son almacenadas por lo que, cada vez que empieces una nueva entrada, o accedas a una para editarla, por defecto aparecerán seleccionadas las últimas preferencias que configuraste.
2. Evitar el uso de la etiqueta <br>
Desde las opciones de configuración de la entrada, puedes elegir si se agrega o no la etiqueta <br> para lograr crear un salto de linea. Por ejemplo para que el navegador muestre el texto que le sigue en otra nueva linea.
Lo que hace una etiqueta <br> sería el equivalente a pulsar la tecla "Enter" o intro. Por ello la opción de "Salto de linea" dice: Utilizar etiqueta <br> y la otra: Pulsar intro para los saltos.
Una etiqueta <br> y que se ve así: "<br />" si accedes al HTML de la entrada, puede provocar un "desastre" si es que al estar editando el código con el que estás trabajando, separas cada linea usando la tecla: "Enter", ya que estarías agregando la etiqueta <br> entre el código cada vez que lo hagas.
Por ejemplo, en una galería de imágenes que estés agregando, puede hacer que se cree un espacio en blanco arriba de cada imagen, al insertarse dicha etiqueta por el editor.
Si vas a poner código desde el editor de entradas, selecciona la opción: "Pulsar Intro para los saltos" de ese modo el editor no agregará la etiqueta <br> y estropeará el resultado.
3. Cómo usar etiquetas <span> o <p> u otras que "desaparecen"
Una de las particularidades del editor de Blogger es que "desaparece" como por arte de magia algunas etiquetas como la etiqueta "span" cuando no lleva ningún atributo, al cambiar la vista Redactar a la vista HTML.
Por ejemplo, esto va a quedar sin la etiqueta span, cuando cambies la vista de "HTML" a "Redactar":
La verdad, no sé si ésto fue intencional o se trata de un bug o error del editor. Lo único que nos queda es evitarlo, si es que el código que vamos a insertar lleva esa etiqueta, ya que si por ejemplo han sido definidos algunos estilos para dicha etiqueta, pues simplemente no se van a aplicar porque la etiqueta ya no va a "estar en el código".
¿La solución? Una solución sencilla es poner un atributo, por ejemplo agregarle una clase, como se puede apreciar a continuación, al usar una etiqueta span:
Al agregar el atributo "class" con el valor: "te_quedas" (es solo un ejemplo, puede ser cualquier otro nombre/texto) la etiqueta no va a desaparecer.
Hasta ahí se soluciona el problema, pero podemos mejorarlo si es que ha sido definido CSS para dicha etiqueta y que usa el elemento que estamos queriendo poner.
Pensando en eso, habría que escribir o editar el CSS usando esa clase que agregamos a la etiqueta. De otro modo, no estaría justificado su uso, excepto el de evitar que desaparezca al usar el editor de entradas o páginas.
Por ejemplo, supongamos que en el CSS de una galería de imágenes que quieres poner se definió la presentación de dicha etiqueta así:
Al agregar la clase a la etiqueta span, cambiaríamos "#galeria span" (que es el llamado "selector" en CSS) por el nombre de la clase de la etiqueta:
De ese modo, estaríamos especificando los estilos de la etiqueta span a la cual identificamos con la clase: "te_quedas" y "evitamos" que desaparezca dicha etiqueta por no tener ningún atributo.
Otra forma de solucionar la susodicha desaparición, sería ponerle algún estilo que no interfiera con la presentación del contenido de la etiqueta. Por ejemplo:
Lo que hacemos es usar el atributo "style" y pensando en usar "pocos caracteres para no extender mucho nuestro código" agregamos la propiedad "font-family" a la que le ponemos el valor: "inherit" para que "herede" el tipo de fuente de la sección donde aparecerá el elemento en cuestión (que en este caso sería de las entradas) o que haya sido definido.
También es una solución válida y aunque sea redundante, soluciona el problema de "la desaparición de la etiqueta", incluso yo la he usado porque me resulta muy práctico y rápido hacerlo, aunque, podemos hacerlo mejor, evitando escribir ese estilo cada vez, usando la clase, tal y como te comentaba anteriormente. De hecho éso es lo ideal.
Siéntete libre de compartir tu experiencia al usar el editor, cuando agregas código, o bien, de hacernos una sugerencia para mejorar la experiencia al agregar código desde el editor.
Espero sea útil ;)
Para que puedas insertar el código de un elemento en una entrada o en una página estática, como por ejemplo el de una galería de imágenes, una sección con pestañas, o cualquier otra cosa, hay que seguir ciertas pautas en la configuración de las entradas/páginas, y echar de mano de alguno que otro truco que de no saberlo y usarlo, evitará que las cosas funcionen como Dios manda... o como tú esperas :)
Es por eso que hoy quiero compartirte algunos trucos y cosas que debes tomar en cuenta y que seguramente te serán útiles cuando quieras implementar cualquier cosa que utilice código HTML desde el editor de entradas o páginas, y que he aprendido sobre la marcha al usarlos.
1. Eligiendo el modo de redacción
Este es un punto básico y de partida a la hora que empiezas a redactar una entrada, y cuando vas a agregar código que desees que se "interprete", es decir, que no aparezca tal y como lo has agregado.
Yo te recomendaría usar la opción: "Interpretar HTML escrito" tal y como muestro en la siguiente imagen.
Si lo haces de ése modo, puedes pegar el código estando en la opción: "Redactar", con la seguridad de que el código será interpretado y se visualizará el elemento que quieres poner.
Ten en cuenta que si usas la opción "Interpretar HTML escrito" y pasas a la opción HTML porque por ejemplo vas a agregar el ancho y alto de una imagen, o cualquier otra cosa en alguna etiqueta, al regresar a la opción "Redactar" se va a visualizar el elemento y no el código de éste.
Lo mismo sucederá si utilizas la opción "Mostrar HTML tal cual", en cuyo caso debes poner el código del elemento estando el la opción HTML de la entrada para que funcione.
Otra cosa importante que debes saber, es que las preferencias son almacenadas por lo que, cada vez que empieces una nueva entrada, o accedas a una para editarla, por defecto aparecerán seleccionadas las últimas preferencias que configuraste.
2. Evitar el uso de la etiqueta <br>
Desde las opciones de configuración de la entrada, puedes elegir si se agrega o no la etiqueta <br> para lograr crear un salto de linea. Por ejemplo para que el navegador muestre el texto que le sigue en otra nueva linea.
Lo que hace una etiqueta <br> sería el equivalente a pulsar la tecla "Enter" o intro. Por ello la opción de "Salto de linea" dice: Utilizar etiqueta <br> y la otra: Pulsar intro para los saltos.
Una etiqueta <br> y que se ve así: "<br />" si accedes al HTML de la entrada, puede provocar un "desastre" si es que al estar editando el código con el que estás trabajando, separas cada linea usando la tecla: "Enter", ya que estarías agregando la etiqueta <br> entre el código cada vez que lo hagas.
Por ejemplo, en una galería de imágenes que estés agregando, puede hacer que se cree un espacio en blanco arriba de cada imagen, al insertarse dicha etiqueta por el editor.
Si vas a poner código desde el editor de entradas, selecciona la opción: "Pulsar Intro para los saltos" de ese modo el editor no agregará la etiqueta <br> y estropeará el resultado.
3. Cómo usar etiquetas <span> o <p> u otras que "desaparecen"
Una de las particularidades del editor de Blogger es que "desaparece" como por arte de magia algunas etiquetas como la etiqueta "span" cuando no lleva ningún atributo, al cambiar la vista Redactar a la vista HTML.
Por ejemplo, esto va a quedar sin la etiqueta span, cuando cambies la vista de "HTML" a "Redactar":
<span> Un texto o cualquier otra cosa dentro </span> La verdad, no sé si ésto fue intencional o se trata de un bug o error del editor. Lo único que nos queda es evitarlo, si es que el código que vamos a insertar lleva esa etiqueta, ya que si por ejemplo han sido definidos algunos estilos para dicha etiqueta, pues simplemente no se van a aplicar porque la etiqueta ya no va a "estar en el código".
¿La solución? Una solución sencilla es poner un atributo, por ejemplo agregarle una clase, como se puede apreciar a continuación, al usar una etiqueta span:
<span class="te_quedas">Soy un texto que se supone debe verse muy mono con fondo rosita </span>Al agregar el atributo "class" con el valor: "te_quedas" (es solo un ejemplo, puede ser cualquier otro nombre/texto) la etiqueta no va a desaparecer.
Hasta ahí se soluciona el problema, pero podemos mejorarlo si es que ha sido definido CSS para dicha etiqueta y que usa el elemento que estamos queriendo poner.
Pensando en eso, habría que escribir o editar el CSS usando esa clase que agregamos a la etiqueta. De otro modo, no estaría justificado su uso, excepto el de evitar que desaparezca al usar el editor de entradas o páginas.
Por ejemplo, supongamos que en el CSS de una galería de imágenes que quieres poner se definió la presentación de dicha etiqueta así:
#galeria span{
/* todos los estilos definidos para la etiqueta "span" aquí dentro */
}
Al agregar la clase a la etiqueta span, cambiaríamos "#galeria span" (que es el llamado "selector" en CSS) por el nombre de la clase de la etiqueta:
.te_quedas{
/* todos los estilos definidos para la etiqueta "span" aquí dentro */
}
De ese modo, estaríamos especificando los estilos de la etiqueta span a la cual identificamos con la clase: "te_quedas" y "evitamos" que desaparezca dicha etiqueta por no tener ningún atributo.
Otra forma de solucionar la susodicha desaparición, sería ponerle algún estilo que no interfiera con la presentación del contenido de la etiqueta. Por ejemplo:
<span style="font-family:inherit"> Soy un texto que se supone debe verse muy mono con fondo rosita </span>Lo que hacemos es usar el atributo "style" y pensando en usar "pocos caracteres para no extender mucho nuestro código" agregamos la propiedad "font-family" a la que le ponemos el valor: "inherit" para que "herede" el tipo de fuente de la sección donde aparecerá el elemento en cuestión (que en este caso sería de las entradas) o que haya sido definido.
También es una solución válida y aunque sea redundante, soluciona el problema de "la desaparición de la etiqueta", incluso yo la he usado porque me resulta muy práctico y rápido hacerlo, aunque, podemos hacerlo mejor, evitando escribir ese estilo cada vez, usando la clase, tal y como te comentaba anteriormente. De hecho éso es lo ideal.
Siéntete libre de compartir tu experiencia al usar el editor, cuando agregas código, o bien, de hacernos una sugerencia para mejorar la experiencia al agregar código desde el editor.
Espero sea útil ;)
mismo que aparece en tu blog, una vez que has accedido a tu cuenta y que se muestra debajo del gadget.
