Código JavaScript para colocar emoticons do WordPress nos comentários do Blogger!

Você está aqui: Home » Blog » Código JavaScript para colocar emoticons do WordPress nos comentários do Blogger! . Postado por: Paulo Roberto.

Esse pequeno código JavaScript, irá exibir emoticons do WordPress nos comentários de blogs hospedados na plataforma Blogger. Os emoticons funcionam em templates nativos do Blogger (menos nos modelos de visualizações dinâmicas) e em templates baixados da internet.

Os emoticons ficarão ocultos no seu blog, só irão aparecer nos comentários, quando alguém fizer um comentário e inserir algum código que for correspondente à algum emoticon. O seu blog ficará igual a um blog do WordPress!

(Exibindo comentário com emoticons, num template baixado da internet!)

(Exibindo comentário com emoticons, num template nativo do Blogger)

Primeiro faça backup do template do seu blog, caso dê algum erro você poderá recuperá-lo. Baixando o template - Painel de controle ==> Modelo ==> Fazer backup/Restaurar ==> Fazer download do modelo completo.

Depois de fazer backup do template do seu blog, clique em "Editar HTML" e localize no código fonte do template, a tag "</body>". Cole esse código JavaScript, que está logo abaixo, antes de "</body>". Depois clique em "Salvar modelo".

<!-- Emoticons Inicio-->

<b:if cond='data:blog.pageType == &quot;item&quot;'>

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

<script type='text/javascript'>

//<![CDATA[

a = document.getElementById('comment-holder');

if (a) {

 b = a.getElementsByTagName("p");

 for (i = 0; i < b.length; i++) {

  if (b.item(i).getAttribute('CLASS') == 'comment-content') {

   bh_b_smly = b.item(i).innerHTML.replace(/:\)/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhaTwM06-lP8sSl8PX3bGjBW8CojI-Jfs04nmJ1uwo7GLy4SAiu7Dy2J-lMX4m_JuhkeRv2BjB-FQXqOVDJhumJaYIVfkWuQnEt3pTpeWKGZvl53hWoIYjZqVYm0Zq6REi2m2bT8pw1QcE/s1600/feliz.gif' alt='' class='smiley'/>");

   bh_b_smly = bh_b_smly.replace(/:D/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1ngoQtaUwhP8hYgj92-fiKr7bJdhTwzTW4TaI3FMbkLbxHCG5Jg6rpj0xY9cKS6TPUy0etIFYJMMxH9h8bahoFQtf2d84dc9wDd6zHyBoJpe2uJGUV0A1HmnnF7RvcPLwPk_-mvAkJ-s/s1600/sorrisao.gif' alt='' class='smiley'/>");

   bh_b_smly = bh_b_smly.replace(/:\(/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOGkYEbTsiy46eu1To_LBm5UJUwXOFPXUN28-MHUMRSMEmTR7cHObHk9vNcG9jRfwazemW3FxakRllTW4y_w6gqXZ_IweZWWX_eE8qcukolVtE4nQv2rf6Vv5Qm7Rgg32hTTSHFadghAk/s1600/triste.gif' alt='' class='smiley'/>");

    bh_b_smly = bh_b_smly.replace(/:-o/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNnKa-f1dv7Om4q3WkZePyEZFJg3nrVts2Rq9tYM7lrZh0fh_r9haFGK8s_aAQufYl6fChXxCjOG0zpASPvZrDEXYkgN0unZDPYAX48DakjZSkHyULbymQa6qguEZ9ewNpTdgcculhqXc/s1600/surpreso.gif' alt='' class='smiley'/>");

   bh_b_smly = bh_b_smly.replace(/8\O/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjIshZLICQP71FnD61z7Ls7Y7fqy5jLQJrcWP83TMFo9kgmV_h9TTNCLEnRXzrv3Z54LXrCh3OV1qgCnXw47fSSaMO5csbkGmVE3VBiqC2X-0SbfAAn0ciaFwqZVq7g5MExijuTYq0VgUs/s1600/chocado.gif' alt='' class='smiley'/>");

   bh_b_smly = bh_b_smly.replace(/:\?/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGQepQ6dJfPKxBrMWgEAW54Htuuyzq8BDcljuNVfiQWY03mmGsapTqlZab47j_nMsMf6hhltNmjkjJzaBd_3E269vowZNuuldEaqAgEliGYldqV0dG1dXvtgZ1yFw2TutGQfyqdjRG7DA/s1600/confuso.gif' alt='' class='smiley'/>");

   bh_b_smly = bh_b_smly.replace(/8\)/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7WNZ5GOuwBOHtGU4Lq_WWkDmrbuYeFZV71IxGRkcfIh3gvSoTsU33GJAQSgADJ2V-lAulgLpl9novMZN_TR22E5PM53i7AsA5ze9UXEvnRQv8-rssOQ_m9YJbjl0AZqjE_xRidtT0m4k/s1600/legal.gif' alt='' class='smiley'/>");

   bh_b_smly = bh_b_smly.replace(/:x/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjWaZSu6wJZlLNz10A0Q8yLj5ZTRsECTrIWWtQUFMa9q4MwCaQmqC_MkeCFivNcjMBTPGfZt5BzkCjKjQsMVMu52ca6xW62ET3PTEwljyIVqQiRNNnUdZaKDVTZ0Wpqq6gEiImbxWJZ6EQ/s1600/furioso.gif' alt='' class='smiley'/>");

   bh_b_smly = bh_b_smly.replace(/:P/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqFFE2p0wBLyb7Ldrl_riy3bSoStp2atSzlXQQoESPhN4VfEvG3UohY49HOA5YHl5Yfs7lMG8mML_fE-9-La4AOFA4Q9mG_CdGxlMXsFRMim3Hi6-0Xktvv-Aq0GH9h0pjtJOrkOIzFcQ/s1600/falando.gif' alt='' class='smiley'/>");

   bh_b_smly = bh_b_smly.replace(/:\|/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg308U4WQOwH0aTkIWd7eRF6I8OLt8eN07pq7qP_mkqQBGCWLEU0hJ3dDE1hXtkL7nvh_Rt_549dVVZ1Z4r8sAj3nsrY0fLiA-SlBpLVbj-j16np1JgDBWsXM232bDjIuUVTGl9zQKvWhA/s1600/neutro.gif' alt='' class='smiley'/>");

   bh_b_smly = bh_b_smly.replace(/;\)/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjw1_j-VGogPIvG_NQDghMRbQKrfwOgGaQ48wOzi3cbAdbVgrdbNl3unWQTX5PVj17u_w1E0o5MNpe_vWWscM4psjpQ_ctnJgQnspaerhKGHRpnfJHfKVxTLgpK0OF1URs8okOvJjRCWps/s1600/piscando.gif' alt='' class='smiley'/>");

    bh_b_smly = bh_b_smly.replace(/:\lol\:/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5ktPEXjs0Yr40tTCCywWahiwNNHjefBX-eOKURU6lwLaQOOTmG2n3PYrJlAOnSep0iHDdZaGTcT6ShAFWUpdey4iEnHwGG7C5i-Pwb1IXzsBnUkLrhyphenhyphenyVWivcds-cC4it7KFcsUnwZqI/s1600/LoL.gif' alt='' class='smiley'/>");

    bh_b_smly = bh_b_smly.replace(/:\oops\:/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOx2iQuMYDF1aRPKTd6vl9HoKEp07ndV6iJwmjjzB6YxJGPcwruSHbedvuJC9s9GqI5Sh3TRDGdrZhiRZdMuMUY8NN1nAYx7NFVH8Xf4xNtWvq0rX0Sq35QlkXwL-Oq-hflZrf_GtHeVY/s1600/vergonha.gif' alt='' class='smiley'/>");

    bh_b_smly = bh_b_smly.replace(/:cry:/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2goruZCXHCdmmXYTG37vQYPGXDeOyzcsEXRoZa7fCAa1L1nLVIPfMbvqsbxjoxssJ5ARWm8WG3xL6MldrKzsTNnARMbE2CWcLf2n-qDwW5J7fi9DVXgl5SxRHMZvkBnMNnBXWdzZrvmY/s1600/chorando.gif' alt='' class='smiley'/>");

    bh_b_smly = bh_b_smly.replace(/:roll:/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJSAfJYG_aRkHyxzAeNBTCObtDPBrAxM8Nrbhao1bb6gyfC9pO-NweNeSipNY_B2BivT9XnJSUSFK6VDprL8v3Mj0WCjgfukNNkGzCLnHgki2WEBjhRu9GPFFKZ4JZDjiV0fqT-5eKJPs/s1600/virando+olhos.gif' alt='' class='smiley'/>");

    bh_b_smly = bh_b_smly.replace(/:\idea\:/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjN51fYriMjB_kGsX2aRKzr3m1ISr0OlxMs5karWpBcWd_EFNZrzaA563sxnNePhW9GBiwNh-bo-98wGjHhdZUg3BAkeW5tNzXST846-RZKR2Q2ysr3D_hldH-hlRB4FyEHsIfPtWvMENg/s1600/ideia.gif' alt='' class='smiley'/>");

    bh_b_smly = bh_b_smly.replace(/:\mrgreen\:/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJWnpp66O9abTyLAdWhQBZkTilsHv2xTpMiQNwvh0JjB8uXtC8o9rHnH0DnQr4qUdarNoYavnrAkTSB4IPg1NsQNVOXc7zGsmlodOgelsRBQYEyYeySaaJ6ig9aAqbsE7GJPaJ2LLKSBc/s1600/mrgreen.gif' alt='' class='smiley'/>");

    bh_b_smly = bh_b_smly.replace(/:\yes\:/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyI3Q5TMmM9rnXOt7TfHXogwgFVMKQpCEyw8AQbRhjM90Op-6s6sFXabWb3iF2E1h_cchgbI83MO9bj9nntW-3pwlyn1llzH8wqVXFd2vfhdN-olIN-j44w_wt7d4zWomaZWmU1copQDs/s1600/like.png' alt='' class='smiley'/>");

    bh_b_smly = bh_b_smly.replace(/:no\:/ig, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFdPbnRJ83gw6myoFJhk4D2MFZMnXriP2UUsdwq5DWO3Mgp0CfrOofpQdo0pmhJy0LR_k37FpXWH9kKWoPlkm-_RwZG83_aup_UrSycpNpMnbzPFUHUmHnDxX0quUXrJY8svdKUHr0RIQ/s1600/unlike.png' alt='' class='smiley'/>")

   b.item(i).innerHTML = bh_b_smly;

  }

 }

}



//]]>

</script>

</b:if><!-- Emoticons fim-->

Você também pode fazer upload das imagens dos emoticons e hospedá-las no seu próprio blog, depois copie o endereço url de cada imagem e substitua pelos liks correspondentes às imagens no código.

:)
:D
:(
:-o
8O
:?
8)
:x
:P
:\|
;)
:lol:
:oops:
:cry:
:roll:
:idea:
:mrgreen:
:yes:
:no:

Caso você desejar exibir os emoticons juntos com o código correspondente, acima da caixa de comentários do seu blog, você deverá incluir também, esses códigos que estão logo abaixo. Os emoticons e os códigos correspondentes irão aparecer numa caixinha, logo acima da caixa de comentários do blog; assim, os usuários poderão ver que é possível utilizar emoticons nos comentários!

(Caixa de comentários exibindo emoticons, logo acima!)
a)Procure no código fonte do template do seu blog, por essa linha "]]></b:skin>" e, cole esse código CSS, logo acima dela:

.emoticonsmiley {background: none repeat scroll 0 0 #transparent !important; font-size: 11px !important; padding: 10px !important; text-align: left !important; font-weight:bold !important; font-size:11px !important;   border:1px solid #ccc;}

img.smiley {height: auto !important; vertical-align: middle !important; width: auto important; border:0px !important;}

b)Agora, procure por essa linha "<b:include data='post' name='threaded-comment-form'/>" e, cole esse código logo acima dela (para esse código funcionar corretamente, os endereços urls dos emoticons devem ser os mesmos, correspondentes aos que estão no primeiro código):

<!-- Emoticons Inicio-->

<b:if cond='data:blog.pageType == "item"'>

<div class='emoticonsmiley'>

<img alt='' class='smiley' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhaTwM06-lP8sSl8PX3bGjBW8CojI-Jfs04nmJ1uwo7GLy4SAiu7Dy2J-lMX4m_JuhkeRv2BjB-FQXqOVDJhumJaYIVfkWuQnEt3pTpeWKGZvl53hWoIYjZqVYm0Zq6REi2m2bT8pw1QcE/s1600/feliz.gif'/> :)

<img alt='' class='smiley' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1ngoQtaUwhP8hYgj92-fiKr7bJdhTwzTW4TaI3FMbkLbxHCG5Jg6rpj0xY9cKS6TPUy0etIFYJMMxH9h8bahoFQtf2d84dc9wDd6zHyBoJpe2uJGUV0A1HmnnF7RvcPLwPk_-mvAkJ-s/s1600/sorrisao.gif'/> :D

<img alt='' class='smiley' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOGkYEbTsiy46eu1To_LBm5UJUwXOFPXUN28-MHUMRSMEmTR7cHObHk9vNcG9jRfwazemW3FxakRllTW4y_w6gqXZ_IweZWWX_eE8qcukolVtE4nQv2rf6Vv5Qm7Rgg32hTTSHFadghAk/s1600/triste.gif'/> :(

<img alt='' class='smiley' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNnKa-f1dv7Om4q3WkZePyEZFJg3nrVts2Rq9tYM7lrZh0fh_r9haFGK8s_aAQufYl6fChXxCjOG0zpASPvZrDEXYkgN0unZDPYAX48DakjZSkHyULbymQa6qguEZ9ewNpTdgcculhqXc/s1600/surpreso.gif'/> :-o

<img alt='' class='smiley' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjIshZLICQP71FnD61z7Ls7Y7fqy5jLQJrcWP83TMFo9kgmV_h9TTNCLEnRXzrv3Z54LXrCh3OV1qgCnXw47fSSaMO5csbkGmVE3VBiqC2X-0SbfAAn0ciaFwqZVq7g5MExijuTYq0VgUs/s1600/chocado.gif'/> 8O

<img alt='' class='smiley' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGQepQ6dJfPKxBrMWgEAW54Htuuyzq8BDcljuNVfiQWY03mmGsapTqlZab47j_nMsMf6hhltNmjkjJzaBd_3E269vowZNuuldEaqAgEliGYldqV0dG1dXvtgZ1yFw2TutGQfyqdjRG7DA/s1600/confuso.gif'/> :?

<img alt='' class='smiley' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7WNZ5GOuwBOHtGU4Lq_WWkDmrbuYeFZV71IxGRkcfIh3gvSoTsU33GJAQSgADJ2V-lAulgLpl9novMZN_TR22E5PM53i7AsA5ze9UXEvnRQv8-rssOQ_m9YJbjl0AZqjE_xRidtT0m4k/s1600/legal.gif'/> 8)

<img alt='' class='smiley' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjWaZSu6wJZlLNz10A0Q8yLj5ZTRsECTrIWWtQUFMa9q4MwCaQmqC_MkeCFivNcjMBTPGfZt5BzkCjKjQsMVMu52ca6xW62ET3PTEwljyIVqQiRNNnUdZaKDVTZ0Wpqq6gEiImbxWJZ6EQ/s1600/furioso.gif'/> :x

<img alt='' class='smiley' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqFFE2p0wBLyb7Ldrl_riy3bSoStp2atSzlXQQoESPhN4VfEvG3UohY49HOA5YHl5Yfs7lMG8mML_fE-9-La4AOFA4Q9mG_CdGxlMXsFRMim3Hi6-0Xktvv-Aq0GH9h0pjtJOrkOIzFcQ/s1600/falando.gif'/> :P

<img alt='' class='smiley' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg308U4WQOwH0aTkIWd7eRF6I8OLt8eN07pq7qP_mkqQBGCWLEU0hJ3dDE1hXtkL7nvh_Rt_549dVVZ1Z4r8sAj3nsrY0fLiA-SlBpLVbj-j16np1JgDBWsXM232bDjIuUVTGl9zQKvWhA/s1600/neutro.gif'/> :|

<img alt='' class='smiley' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjw1_j-VGogPIvG_NQDghMRbQKrfwOgGaQ48wOzi3cbAdbVgrdbNl3unWQTX5PVj17u_w1E0o5MNpe_vWWscM4psjpQ_ctnJgQnspaerhKGHRpnfJHfKVxTLgpK0OF1URs8okOvJjRCWps/s1600/piscando.gif'/> ;)

<img alt='' class='smiley' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5ktPEXjs0Yr40tTCCywWahiwNNHjefBX-eOKURU6lwLaQOOTmG2n3PYrJlAOnSep0iHDdZaGTcT6ShAFWUpdey4iEnHwGG7C5i-Pwb1IXzsBnUkLrhyphenhyphenyVWivcds-cC4it7KFcsUnwZqI/s1600/LoL.gif'/> :lol:

<img alt='' class='smiley' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOx2iQuMYDF1aRPKTd6vl9HoKEp07ndV6iJwmjjzB6YxJGPcwruSHbedvuJC9s9GqI5Sh3TRDGdrZhiRZdMuMUY8NN1nAYx7NFVH8Xf4xNtWvq0rX0Sq35QlkXwL-Oq-hflZrf_GtHeVY/s1600/vergonha.gif'/> :oops:

<img alt='' class='smiley' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyI3Q5TMmM9rnXOt7TfHXogwgFVMKQpCEyw8AQbRhjM90Op-6s6sFXabWb3iF2E1h_cchgbI83MO9bj9nntW-3pwlyn1llzH8wqVXFd2vfhdN-olIN-j44w_wt7d4zWomaZWmU1copQDs/s1600/like.png'/> :yes:

<img alt='' class='smiley' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFdPbnRJ83gw6myoFJhk4D2MFZMnXriP2UUsdwq5DWO3Mgp0CfrOofpQdo0pmhJy0LR_k37FpXWH9kKWoPlkm-_RwZG83_aup_UrSycpNpMnbzPFUHUmHnDxX0quUXrJY8svdKUHr0RIQ/s1600/unlike.png'/> :no:

<img alt='' class='smiley' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2goruZCXHCdmmXYTG37vQYPGXDeOyzcsEXRoZa7fCAa1L1nLVIPfMbvqsbxjoxssJ5ARWm8WG3xL6MldrKzsTNnARMbE2CWcLf2n-qDwW5J7fi9DVXgl5SxRHMZvkBnMNnBXWdzZrvmY/s1600/chorando.gif'/> :cry:

<img alt='' class='smiley' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJSAfJYG_aRkHyxzAeNBTCObtDPBrAxM8Nrbhao1bb6gyfC9pO-NweNeSipNY_B2BivT9XnJSUSFK6VDprL8v3Mj0WCjgfukNNkGzCLnHgki2WEBjhRu9GPFFKZ4JZDjiV0fqT-5eKJPs/s1600/virando+olhos.gif'/> :roll:

<img alt='' class='smiley' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjN51fYriMjB_kGsX2aRKzr3m1ISr0OlxMs5karWpBcWd_EFNZrzaA563sxnNePhW9GBiwNh-bo-98wGjHhdZUg3BAkeW5tNzXST846-RZKR2Q2ysr3D_hldH-hlRB4FyEHsIfPtWvMENg/s1600/ideia.gif'/> :idea:

<img alt='' class='smiley' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJWnpp66O9abTyLAdWhQBZkTilsHv2xTpMiQNwvh0JjB8uXtC8o9rHnH0DnQr4qUdarNoYavnrAkTSB4IPg1NsQNVOXc7zGsmlodOgelsRBQYEyYeySaaJ6ig9aAqbsE7GJPaJ2LLKSBc/s1600/mrgreen.gif'/> :mrgreen:

</div>

</b:if><!-- Emoticons fim-->

Eu sempre recomendo que você salve imagens de banners, logotipos, emoticons etc, na sua própria conta, por uma questão de segurança! Deste modo você terá mais controle das imagens e não ficará dependente de links externos; você pode administrar as imagens na sua conta do Google!