Como inserta imágenes y videos en los comentarios de mi blogger ~ El friki de la informatica

Por si no me explique con el titulo me refiero a como hacer que los usuarios de tu blogger puedan poner imágenes y/o vídeos en los comentarios.

Cosas a tener en cuanta antes de hacer esto:

Este método es únicamente para plantillas que tengan comentarios anidados, o sea, con opción de "Responder". Si tu blog no tiene la opción de "Responder" no funcionará.
Es necesario que los comentarios se muestren debajo de la entrada, y no en ventana emergente, página completa, etc.
Se admiten todos los formatos de imágenes convencionales (JPG, PNG, GIF).
En el caso de los vídeos se aceptan vídeos de YouTube y Vimeo.
Ten en cuenta que la inclusión de imágenes y vídeos en los comentarios pueden reducir la velocidad de carga del blog.

Para empezar vas al editor de HTML de tu plantilla y antes de </body> colocas lo siguiente

<script>
//<![CDATA[
// Insertar imágenes y videos en los comentarios (ciudadblogger.com)
function InsertarImagenVideo(id) {
var IDelemento = document.getElementById(id),
sustituir = IDelemento.innerHTML;
sustituir = sustituir.replace(/\[img\](.[^\]]*)\[\/img\]/ig, "<img class='img-comentarios' src='$1'\/>");
sustituir = sustituir.replace(/\[video\]https:\/\/www\.youtube\.com\/embed\/(.*?)\[\/video\]/ig, "<iframe class='vid-comentarios' src='https://www.youtube.com/embed/$1'><\/iframe>");
sustituir = sustituir.replace(/\[video\](https:\/\/youtu\.be\/|https:\/\/www\.youtube\.com\/watch\?v\=)(.*?)\[\/video\]/ig, "<iframe class='vid-comentarios' src='https://www.youtube.com/embed/$2'><\/iframe>");
sustituir = sustituir.replace(/\[video\](http:\/\/youtu\.be\/|http:\/\/www\.youtube\.com\/watch\?v\=)(.*?)\[\/video\]/ig, "<iframe class='vid-comentarios' src='https://www.youtube.com/embed/$2'><\/iframe>");
sustituir = sustituir.replace(/\[video\](http:\/\/player\.vimeo\.com\/video\/)(.*?)\[\/video\]/ig, "<iframe class='vid-comentarios' src='http://player.vimeo.com/video/$2'><\/iframe>");
document.getElementById(id).innerHTML = sustituir;} InsertarImagenVideo('comment-holder');
//]]>
</script>
<style>
<!--
#comment-holder .img-comentarios, #comment-holder i[rel="image"] {
max-width: 450px; /* Ancho máximo de las imágenes */
width: auto;
height: auto;
display: block;
border: 5px solid #FFF; /* Borde de las imágenes */
margin: 0 auto;
padding: 0;
box-shadow: 1px 1px 5px rgba(0, 0, 0, .1); /* Sombra de las imágenes */
}
#comment-holder .vid-comentarios {
width: 450px; /* Ancho del video */
height: 253px; /* Alto dle video */
display: block;
margin: 0 auto;
padding: 0;
border: 5px solid #FFF; /* Borde del video */
box-shadow: 1px 1px 5px rgba(0, 0, 0, .1); /* Sombra del video */
}
-->
</style>

Y ya esta, tienes que saber que para poner los videos tiendran que insertar esto en los comentarios:

[video]URL de la imagen[/video]

Y si quieren poner imágenes ponen esto:

[img]URL de la imagen[/img]

Y para que tus lectores lo sepan tienes que ir a las configuraciones de tu pagina después a "Entradas y comentarios" y en la parte en la que dice "Mensaje del formulario de comentarios" haces click en agregar y hay comentas que se pueden agregar imágenes y vídeos, como tienen que hacer etc. Por ultimo guardas las configuraciones y eso es todo.

Como inserta imágenes y videos en los comentarios de mi blogger

Related Post