Arquivos do Website:

Como publicar imagens nos comentários de um blog do Blogger?


Permita que os visitantes do seu blog, insiram imagens nos comentários, utilizando apenas um simples link! Ao invés de utilizar um formulário de comentários que não é nativo do Blogger, para poder inserir imagens nos comentários, você pode utilizar um pequeno código javascript para exibir as imagens. O javascript é instalado direto no código fonte do seu blog, de forma bem simples.


 
Imagem: minimoo64 - http://colunas.globorural.globo.com

Primeiro, acesse o painel de controle do Blogger para fazer backup do template, caso dê algum erro, aí, você terá como recuperar o blog (Modelo ==> Fazer backup/Restaurar ==> Fazer download do modelo completo).

É um procedimento quase idêntico ao esquema para inserir vídeos do YouTube nos comentários de um blog do Blogger! Após fazer download do template do seu blog, clique em "Editar HTML", para acessar o código fonte do template. Localize a tag "</body>" e logo acima dela, cole este código:

<script type='text/javascript'>
//<![CDATA[
    function repText(id) {
        var a = document.getElementById(id),
            b = a.innerHTML,
            // Images
            b = b.replace(/<i rel="image">(.[^\>]*)<\/i>/ig, "<img class='cm-image' src='$1' alt='loading...' \/>");
            b = b.replace(/\[img\](.[^\]]*)\[\/img\]/ig, "<img class='cm-image' src='$1' alt='loading...' \/>");
        document.getElementById(id).innerHTML = b;
    } repText('comment-holder');
//]]>
</script>

Localize a tag "]]></b:skin>" no final do CSS do código fonte do seu blog, e cole logo acima dela a seguinte linha:

.cm-image{max-width:580px; max-height:450px}

Depois, clique em "Salvar modelo". Você pode personalizar a largura e a altura das imagens que serão exibidas nos comentários; "max-width:580px" é a largura máxima da imagem, e "max-height:450px" é a altura máxima da imagem. Personalize conforme a largura da área de comentários, disponível no template do seu blog!

Esse comando CSS irá determinar o tamanho máximo das imagens postadas nos comentários do seu blog. Por exemplo, se alguém postar uma imagem, com 2560x1600, seria um desastre na área de comentários; com esse comando CSS, você pode controlar todas as imagens para serem exibidas, conforme a largura da área de comentários do seu blog.

Para poder exibir imagens postadas nos comentários do seu blog, será preciso adicionar o endereço url completo da imagem, entre estas tags: [img] [/img], sempre que for fazer um comentário com imagem. Ex: [img]http://ENDEREÇO URL DA IMAGEM[/img].

Mas, os visitantes do seu blog, precisam saber disso! Acesse o painel de controle do Blogger ==> Configurações ==> Postagens e comentários ==> Na opção "Mensagem do formulário de comentário", clique em "Adicionar" ==> Insira as instruções na caixa e clique em "Salvar configurações".

Exemplo de instrução: Para inserir uma imagem nos comentários, copie o link completo da imagem desejada e cole entre [img] [/img]. (ex: <b>[img]http://ENDEREÇO URL DA IMAGEM[/img]</b> ).

A instrução acima, irá aparecer para os visitantes do seu blog, assim:

Para inserir uma imagem nos comentários, copie o link completo da imagem desejada e cole entre [img] [/img] (ex: [img]http://ENDEREÇO URL DA IMAGEM[/img] ).

Acesse o seu blog e faça um comentário de teste, utilizando uma imagem. Caso a imagem não apareça nos comentários do seu blog, acesse o painel de controle do Blogger ==> Modelo ==> Editar HTML. Procure no código fonte do seu blog, pela tag "</head>" e, logo acima dela cole a seguinte linha de código:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js' type='text/javascript'/>

Essa linha de código do Google, irá fazer as imagens aparecem nos comentários do seu blog, caso seja esse o problema!