Comentar em um blog/site fica mais divertido usando aquelas imagens animadas que muitas vezes expressam o que queremos falar e até enfeitam nossa forma de entrar em contato com os outros.
Há algumas eras, usei um código bem complicado para adicionar essa opção ao blog, mas sabia que há uma forma super simples de se fazer isso?
Tudo o que é necessário é um script no html do template e que os comentários estejam incorporados à postagem (Configurações-Postagens,comentários e compartilhamentos-Comentários-Local do comentário-Incorporado).
A versão original desse script faz com que seja aceito imagens e vídeos na área dos comentários. Para não deixar o blog lento, acho mais interessante permitir apenas imagens e pequenas, como gifs, emojis e emoticons, por isso, removi o trecho que permite vídeos.
A versão original desse script faz com que seja aceito imagens e vídeos na área dos comentários. Para não deixar o blog lento, acho mais interessante permitir apenas imagens e pequenas, como gifs, emojis e emoticons, por isso, removi o trecho que permite vídeos.
No HTML do seu template, procure por </body> e antes dele cole:
<script>//<![CDATA[!function(){for(var a=/(\[img\])?((http:|https:)?\/\/\S*?\.(gif|png]))(\[\/img\])?/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;" src="$2"" alt=""/>'),d[e].innerHTML=j}}();
//]]></script>
Visualize e se estiver tudo certo, salve.
Como usar
Vá em alguma postagem e digite um comentário junto com o link de alguma imagem (ou vídeo). Exemplo:
Funcionou!!! https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLhvcVecnAFFYdWWar4TQ-uta_3Ws4BCiCqmIkYJzBjBOAhN7vsEc-RLJOvJDTHKmXczcGhX2U7EgbPnUpPn4Ad1CYWWEFgK1Op-2C2_k5PERSj8F02ng_BkT7vkO38XmpZNcIlw4X1do/s1600/emoticon5.gif
Clique em publicar e o resultado será assim:
Sempre que quiser adicionar uma imagem ou vídeo, copie o endereço da imagem ou link que aparece na barra de endereços de vídeos do vimeo ou youtube e cole no comentário.
Para que seus leitores saibam que seu blog permite usar imagens/vídeos, deixe isso claro no formulário de comentários (Configurações-Postagens, comentários e compartilhamentos-Comentários-Mensagem do formulário de comentários)...
ou procure por post-footer/post-footer-line1 ou 2 ou 3, ou áreas acima dos comentários no html do seu template e cole os links dos emoticons como sugestão para usarem.
E é isso...
Imagem de abertura do post: Freepik.com
Ola Roberta o/
ResponderExcluirAdorei o tutorial , vou testar e vê se coloco no meu blog hahaha! https://3.bp.blogspot.com/-d1PZNAoifZ0/WjQgwTUZnYI/AAAAAAAARi8/4F2SFMIoP34ZRBFqgxPfLmBVA1DCuQmSwCLcBGAs/s1600/emoticon4.gif
+Emy-Lee Cosplay+
Fico feliz que tenha gostado e espero que dê certo :3
ExcluirAqui no blog, na primeira postagem não tá aparecendo, só nas outras, acho que é o modelo que estou usando... Vou verificar.
Deu certo com esse modelo novo!!! https://3.bp.blogspot.com/-NhUnhRtzpLw/WjQgwFY4rJI/AAAAAAAARi4/5TJ3SqD-itQf6fW5VrEN-wYkuetwnVvYACLcBGAs/s1600/emoticon2.gif
Excluirdeu certo,mas todo gif que coloco fica enorme.. mesmo sendo 20x20 o que estou fazendo errado? pq nao fica pequeno? >>>o meu gif https://media.giphy.com/media/OuGlqcReA1Cb6/200.gif
ResponderExcluirTem um trecho no código max-width:100%
ExcluirTalvez se modificá-lo dê certo.