soy Kseso y esto EsCSS

Guía breve sobre cómo insertar pens, imágenes y código en Ksesocss y #tras42

Una breve y detallada guía sobre cómo tienes que hacer para insertar imágenes, pens de Codepen y/o código con formato en el blog #ksesocss y #tras42

Guía breve sobre cómo insertar pens, imágenes y código en Ksesocss y #tras42

·Por Kseso ✎ 4

Con motivo de la publicación en el blog #tras42 del artículo sobre cómo poder insertar pens de @Codepen en los comentarios de Blogger creo oportuno esta pequeña guía de cómo poder hacerlo. Tanto aquí, en Ksesocss, como allá, en #tras42.

A diferencia del artículo publicado en #tras42 (en el que se explica detalladamente todo el proceso (dos códigos diferentes) para que el administrador de un blog en Blogger lo implemente) esta entrada está enfocada a explicarte a ti, usuario y comentarista, cómo hacer para publicar un pen, una imagen o código en cualquiera de estos 2 blogs (y en cualquier otro que lo implemente usando la forma explicada en el post de #tras42.

Una pieza de rompecabezas encadenada

Insertar pen de Codepen

Parto de la premisa que que conoces el proceso para conseguir el código que ofrece Codepen para poder insertar un pen cualquiera. Esto lo salto.

Así que supongo que ya has copiado todo el código que te ofrece, que es el siguiente:

<p data-height="416" data-theme-id="299" data-slug-hash="BjEvg" data-default-tab="result" data-user="Kseso" class='codepen'> See the Pen <a href='http://codepen.io/Kseso/pen/BjEvg/'>:hover guillotined</a> by Kseso (<a href='http://codepen.io/Kseso'>@Kseso</a>) on <a href='http://codepen.io'>CodePen</a>.</p> <script async src="//codepen.io/assets/embed/ei.js"></script>

De todo ello sólo necesitas el contenido de la etiqueta de apertura del párrafo (p). Esto es, lo siguiente:

data-height="416" data-theme-id="299" data-slug-hash="BjEvg" data-default-tab="result" data-user="Kseso" class='codepen'

Este código, ni más ni menos, es el que tienes que pegar en el cuerpo del comentario entre las etiquetas [pen] [/pen]. Son corchetes, a semejanza del BBcode. en tu comentario debe quedar así:

[pen]data-height="416" data-theme-id="299" data-slug-hash="BjEvg" data-default-tab="result" data-user="Kseso" class='codepen'[/pen]

No te preocupes si al darle a "vista previa" en vez de mostrar el pen sólo aparece el texto introducido por ti. En el iframe que muestra la vista previa del comentario no se ejecuta el código necesario. Si lo has hecho bien aparecerá el pen al publicarlo.

Insertar imágenes en el comentario

Colocar una imagen en tu comentario es muy sencillo. Sólo tienes que colocar la ruta a ella entre las marcas de BBcode [img]ruta[/img]. Así:

[img]http://dominio.ext/imagen.jpg[/img]

Nada más ni nada menos. Aquí también sirve el aviso de antes de la vista previa.

Publicar código en los comentarios

Para publicar código y que aparezca con formato tienes que meterlo en el elemento [code]aquí[/code]. Recuerda que el texto así marcado se publicará bajo los efectos de white-space: pre;

[code] * { margin: 0; padding: 0; border: 0 none; position: relative; } [/code]

Un aviso: Si aparece el carácter < en el código que vas a publicar debes sustituirlo por su entidad html. Todas las veces que aparezca.

Nota para blogueros

Si eres administrador de un blog en Blogger y tú también quieres ofrecer la posibilidad a tus visitantes de incluir pens o imágenes en sus comentarios, consulta el artículo Cómo insertar pens de @Codepen en los comentarios de Blogger de mi blog #tras42.

avatar del Editor del blog

Ramajero Argonauta, Enredique Amanuense de CSS.
#impoCSSible inside
Dicen que, en español, EsCss es el mejor blog de CSS. Posíblemente exageren.
@Kseso EsCss Don Kseso Kseso