Nos comentários do Blogger, aprenda como "inserir vídeos e imagens'

fonte e créditos: 

ciudadblogger

"Inserir imagens e vídeos nos comentários do Blogger"

Será que você passado que você quer dizer alguma coisa, mas as palavras não são suficientes? Às vezes isso acontece quando você quer dizer algo em um blog, talvez um meme pode resumir a nossa opinião, ou um vídeo para cumprimentar os nossos comentários. Infelizmente, o formulário de comentários do Blogger não inclui a opção de fazer upload de fotos ou vídeos embed, mas não permitir que o Blogger não significa que você pode.

O que vamos ver neste post é apenas isso, como inserir imagens e vídeos nos comentários do blog de ​​uma forma tão simples que requer apenas um passo.
O método que vai usar é semelhante ao que fazemos quando adicionar emoticons nos comentários, Então, o que nós escrevemos no comentário é substituído por outro código, neste caso, o HTML necessário para exibir imagens e vídeos.

Você pode vê-lo trabalhando em teste neste blog .
Para inserir uma imagem usando este código:

[img]URL de la imagen[/img]

Para inserir um vídeo do YouTube ou Vimeo usando este código:

[video]URL del video[/video]

..." a instalação é um passo."

 Só entrar Template | Editar HTML e antes de</ body> cole 

o seguinte:

<script> //<\[\/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>

ou

<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>

"Abaixo o "script "...

...que contêm 

...alguns estilos"... 
...esses estilos estão a dar-lhe um pouco de personalização 
de imagens e vídeos a serem exibidos nos comentários, 
como 
a 
borda, 
sombra, 
e 
tamanho. 

"Cor verde especifica o que corresponde cada uma dessas áreas." "Claro que você pode adicionar mais estilos se o desejar."

"Para que seus leitores saibam que você pode adicionar fotos e vídeos podem postar um aviso de isso, você pode fazer isso a partir de ":

Configurações | Entradas e Comentários | Postar Comentário Form.

Inserindo imagens e vídeos


para imagens,
você e os comentaristas deve usar este código:

[img]URL de la imagen[/img]

E no caso de vídeos, o YouTube ou Vimeo para que este código é usado:

[video]URL del video[/video]

Em ambos os casos, você deve adicionar o URL da imagem (ou vídeo), quando apropriado. 


Como obter a URL dos vídeos

Para YouTube, você pode copiar a URL na barra de endereços do navegador quando você está assistindo a um vídeo.



Você também pode usar a URL que aparece em " Compartilhar este vídeo ".


Ou você pode copiar a URL no código inserir em " Inserir Link ".


Todas essas URLs são válidos para uso nos comentários:

https://www.youtube.com/watch?v=GfxAEl15pDs

http://youtu.be/GfxAEl15pDs

https://www.youtube.com/embed/GfxAEl15pDs

Ou seja, aqueles com o termo relógio , você tem encurtador youtu.be , e que incluem o termo de incorporação . Qualquer um dos dois vai funcionar.

Considerações finais.

• Este método é para modelos que contêm comentários aninhados, ou seja, com uma opção para "Responder". Se o seu blog não tem a opção "Responder" não vai funcionar.
• Você precisa exibir os comentários abaixo o post, não pop, de página inteira, etc.
• Todos os formatos de imagem convencionais (JPG, PNG, GIF) permitido.
• Para os vídeos a partir de vídeos do YouTube e Vimeo são aceitos.
• Note-se que a inclusão de imagens e vídeos nos comentários do blog pode atrasar o carregamento.

Esses truques podem ser muito atraente e útil em muitos blogs, mas sempre com moderação para não abusar do número de imagens e vídeos que poderiam retardar a carga. Se for dada uma boa utilização, tais opções poderiam melhorar a experiência do leitor ao interagir com o autor e outros comentaristas no blog.