Colocar - ver imágenes y vídeos en los comentarios de tu blog en Blogger

¡Tomado gentilmente de Oloblogger!

¡Sorprendido! Admito que no tenía muy claro como lograr este efecto pues durante un tiempo investigué por la red, y pasandome un rato por el blog de Oloman me topé con su artículo que muestra este mismo efecto, a razón de difusión y en español compartiré con ustedes este buen truco para poder visualizar o incrustar imágenes y vídeos en los comentarios de tu blog en Blogger sólo peganlo el enlace, link, URL etc.

Vídeo incrustado en DEMO de Oloblogger

El truco podrás verlo en el siguiente DEMO ofrecido por el autor original:

¡El Tutorial!

ACLARACIÓN: El lector sólo tendrá que pegar la URL de la imagen o vídeo para que el script ejecute la conversión y lo visualice.

1. Es muy en el HTML de nuestra plantilla buscaremos la etiqueta </body> y justo arriba de ella pegaremos el siguiente código:

<script>//<![CDATA[
!function(){for(var a=/(\[img\])?((http:|https:)?\/\/\S*?\.(jpg|gif|png|bmp|jpeg]))(\[\/img\])?/gi,b=/(\[vid\])?http(?:s?):\/\/(?:www\.)?youtu(?:be\.com\/watch\?v=|\.be\/)([\w\-\_]*)(&(amp;)?‌​[\w\?‌​=]*)?(\[\/vid\])?/gi,c=/(\[vid\])?(http:|https:)?\/\/(vimeo.com)\/([0-9]*)(\[\/vid\])?/gi,d=document.querySelectorAll(".comment-content"),e=0;e<d.length;e++){for(var f=d[e].getElementsByTagName("a"),g=0;g<f.length;g++)if(f[g].href.match(a)||f[g].href.match(b)||f[g].href.match(c)){var h=document.createElement("span");h.innerHTML=f[g].href;var i=f[g];i.parentNode.insertBefore(h,i),f[g].href="",f[g].innerHTML=""}var j=d[e].innerHTML;j=j.replace(a,'<img style="max-width: 100%; height: auto;display: blocK;margin: 10px auto;" src="$2"" alt=""/>'),j=j.replace(b,'<div style="position:relative;width:100%;height:0;padding-bottom:56.25%;overflow:hidden;margin:20px auto;"><iframe style="position: absolute;width: 100%;height: 100%;top: 0;left: 0;" src="https://www.youtube.com/embed/$2" frameborder="0" allowfullscreen></iframe></div>'),j=j.replace(c,'<div style="position:relative;width:100%;height:0;padding-bottom:56.25%;overflow:hidden;margin:20px auto;"><iframe style="position: absolute;width: 100%;height: 100%;top: 0;left: 0;" src="https://player.vimeo.com/video/$4" frameborder="0" allowfullscreen></iframe></div>'),d[e].innerHTML=j}}();
//]]></script>

2. Guardar y listo, es todo básicamente prueba a indexar algún comentario con imagen desde su URL y observa la magia.


No es más en este corto post si deseas saber como funciona a fondo en el artículo de Oloblogger tiene algunas líneas explicando como funciona el código por ahora aquí en Bloggin Red lo dejamos para que lo tomen y lo usen.

Hasta la próxima,