Guía breve sobre cómo insertar pens, imágenes y código en Ksesocss y #tras42 16.9.14
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
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.
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.
Kseso
the obCSServer ᛯ 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 Kseso
Este es un viejo pen:
ResponderEliminar[pen]data-height="420" data-theme-id="299" data-slug-hash="BjEvg" data-default-tab="result" data-user="Kseso" class='codepen'[/pen]
Y acompañado de una imagen:
[img]http://2.bp.blogspot.com/-N5JN1O47gVY/U9Zb6oDf73I/AAAAAAAAJwc/Rbx_3LVj9Ho/s1600/pie-abajo.jpg[/img]
Espero que sea una herramienta útil y bien usada.
Kseso, he visto el código que tienes en este blog para sustituir las imágenes y los pens, y me he fijado que se puede simplificar a esto:
ResponderEliminar(function(){
var divcomentarios = document.querySelector("#comment-holder");
sustituir = divcomentarios.innerHTML;
sustituir = sustituir.replace(/\[img](.*)\[\/img\]/g, '<img src="$1" alt="una imagen de Ksesocss"/>');
sustituir = sustituir.replace(/\[pen](.*)\[\/pen\]/g, "<p $1></p>");
divcomentarios.innerHTML = sustituir;
})();
Puedes añadir varias expresiones regulares ( .replace() ) seguidas y actualizar el código al final de todo sin tener que crear una variable para cada vez que haces el reemplazo.
Saludos.
Gracias Jorge,
Eliminara tí y a Furoya que por distintos caminos me habéis hecho llegar básicamente la misma mejora.
Ya está incorporado al código de los 2 blogs y más adelante modificaré el post de tra42.
Por G+ te voy a pedir una información (en twitter no te tengo localizado). Espero te parezca bien.
Un saludo y de nuevo gracias por la colaboración, allá y acá.
[code][/code]
ResponderEliminar