Poner emoticons en Blogger estilo Facebook

Estos emoticons (emoticones, emoticonos, smiles, o como le quieras llamar) aparecerán sólo en los comentarios, y para ello usaremos un script de Vagabundia que ingeniosamente hace que los emoticons sólo se ejecuten en el cuerpo de los comentarios para no interferir con otras áreas.

Primero entra en Diseño | Edición de HTML, marca la casilla Expandir plantillas de artilugios y agrega antes de </head> el siguiente script:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script type='text/javascript'>
//<![CDATA[
function emoticonComentario(emoticon) {
if(!document.getElementById) {return;}
bodyText = document.getElementById(emoticon);
cambiarLetra = bodyText.innerHTML;

// :)
cambiarLetra = cambiarLetra.replace(/:\)/g,'<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg67y1EUaIuWhzyxxhAx3VmWuBp6x5CZYQMm1Up5EL6ANToZ2yth7ZAuh-jZihvxZUM-lXg6tLvqecuEl-NMPZrJZUcaEm5npLuTuaXdxjP-1M8fC0-45UsTKdbuUA2mLvyXAD8YEmUgy8/" />');

// :(
cambiarLetra = cambiarLetra.replace(/:\(/g,'<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvI2EKSPzyEGoL_G19AeVwXi-aJ5FwSmwS736YiOmCFjrPX0v5dtH-FGQlvbHKATPRnPUqGzFd0ntynSAfna05tWCcuM_c4mIAKecbUanpp3xImLtX3J9cKb5lFmfrQHKJR6gzZejFFJo/" />');

// ;)
cambiarLetra = cambiarLetra.replace(/;\)/g,'<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPvD30LVGIENbPqNxwd6wRKTHDlFI_Ql6NFyVaTVc42n7yhMoz59HmSoKLK3LSydKtJRLUqzUTwzehFhUYSi4H3xif47ytehvO9C1jG4fZTilCC8X6djY79B52e4wUg5ssvY6HUICKV_g/" />');

// :P
cambiarLetra = cambiarLetra.replace(/:\P/g,'<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgyVoLJLCMBMKOXX4o5jyEhBrq_NWYDMA4JzHkJcvVc_yA4rqU8IKWsYrrEyhcBieYHYj4_tAt3lJjR9_dfTI5Epfq2h_xel_3W6pzPFEuRDgu4s6tWjudYuhv2hZ4y7N2JLpMYKAR4BOE/" />');
cambiarLetra = cambiarLetra.replace(/:\p/g,'<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgyVoLJLCMBMKOXX4o5jyEhBrq_NWYDMA4JzHkJcvVc_yA4rqU8IKWsYrrEyhcBieYHYj4_tAt3lJjR9_dfTI5Epfq2h_xel_3W6pzPFEuRDgu4s6tWjudYuhv2hZ4y7N2JLpMYKAR4BOE/" />');

// :D
cambiarLetra = cambiarLetra.replace(/:D/g,'<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfA-AcDsnkm2wKV2vmO2P0My-sJNZAPy3qom1oE8lhsMz8tiSR_xzM778qz13h5tCViGZM3smBWaev6tCMy-2hFpV-uBUATkDLRhPzMNNI23LfH3pqJfKtEAokKy6pAvWWwHHfHqdW_Os/" />');
cambiarLetra = cambiarLetra.replace(/:d/g,'<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfA-AcDsnkm2wKV2vmO2P0My-sJNZAPy3qom1oE8lhsMz8tiSR_xzM778qz13h5tCViGZM3smBWaev6tCMy-2hFpV-uBUATkDLRhPzMNNI23LfH3pqJfKtEAokKy6pAvWWwHHfHqdW_Os/" />');

// XD
cambiarLetra = cambiarLetra.replace(/XD/g,'<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjr-qI4WsHuGOUweU4geKwMLkSBu418KTw3SpCenahBV_N2ts_GCDcBxKvMkTE5vQIHtxYLTPxpLxlFSeuQKHJC6x9lHPNN8JQDHbatWqxnNjQ-eRoR2SSwA1-Mb28MB-9zLytWtvndupA/" />');

// :S
cambiarLetra = cambiarLetra.replace(/:S/g,'<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKCV-PVTL3Plfis42AHiIiPFH881Ht7LsdaTm0ES6tQX6-9FlbNJp3Tcvxb0P6mePnBp8fWaEG93jq-QJDonXiJRiRU3EKsNpxu4S2DX1E71F4LenVuHlYq_7fA04boTyog4qMEfvAPqA/" />');
cambiarLetra = cambiarLetra.replace(/:s/g,'<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKCV-PVTL3Plfis42AHiIiPFH881Ht7LsdaTm0ES6tQX6-9FlbNJp3Tcvxb0P6mePnBp8fWaEG93jq-QJDonXiJRiRU3EKsNpxu4S2DX1E71F4LenVuHlYq_7fA04boTyog4qMEfvAPqA/" />');

// X(
cambiarLetra = cambiarLetra.replace(/X\(/g,'<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjkL1Zs10ViRd8w6bYI_bFYXwPOHtpjmoBV_qDodfeSu2w_BmIwk3OZIW2ysYQiSzZe9c7FCKmdCdsgq4Ne7T2NrDuZNIUzNhNjeHZgPSvYguiCu_Yl1LMVOn0q2ollg6FNLBvV2iRpCEk/" />');

// :'(
cambiarLetra = cambiarLetra.replace(/:'\(/g,'<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyCdBdNyPvWbckSWpvagJM0caFAY3q85MaT4tB2MFj_2JFQRQC6PLyt0nr4VHON8_U2QVDMTUVBwfbi38DkHfi-ndailhx8HzzUJLKAeKL4FzYjsfq20UrPJcberrOvGS_aao-tZtRa5w/" />');

// 8)
cambiarLetra = cambiarLetra.replace(/8\)/g,'<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjC3IUf1VEyg17zTBsmntCBmprWe0Y2dJ_49dlwC9fRAbc-xAqK3oHXx6YXZqy-3UuZM-bB7Qq7lHXQfxHjsGFaDWuwDhlOOhpOfZjj_qM6cguM7mpbxeNe1Ct5pFvqfUM6IdpRZQDc3oI/" />');

// :O
cambiarLetra = cambiarLetra.replace(/:\O/g,'<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimcQjYJuCn7feWQC_VF4cBpx7rG_aiAZ4M2IluxvTHqQ02jcJCfoI56y96Ps9oP4XdVjbDXGzfYPHYKn6oURceLlyQYUVRAYfLH3DSSXNfCeoGnK01tMwvL2b6OVVLtR4USjThzxf8-3g/" />');
cambiarLetra = cambiarLetra.replace(/:\o/g,'<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimcQjYJuCn7feWQC_VF4cBpx7rG_aiAZ4M2IluxvTHqQ02jcJCfoI56y96Ps9oP4XdVjbDXGzfYPHYKn6oURceLlyQYUVRAYfLH3DSSXNfCeoGnK01tMwvL2b6OVVLtR4USjThzxf8-3g/" />');

// :*
cambiarLetra = cambiarLetra.replace(/:\*/g,'<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgL-2Q9IXrZIq2UMsBQg8Quph72tOSfUdYKdKiOTcyu97MEvz_eHM7kDIvyEpDrLqF_Us_-S-1CXZ7La6fKcIHD-wNrA8IxNaRMyb-NhjB10oIJrls1RmE1ZUzgHTTBkbTDQzw2nvt0Aq0/" />');

// :A
cambiarLetra = cambiarLetra.replace(/:A/g,'<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-7i3rH5vUOSU298lySh5lfSxJpkqExAl5SVlWYAKzTu3qHGAQvF-V69pZP85MEg8g-nCAzIHWrvSfWeMYpU4Hw4r5lfrLd8CxOQp8F116nn3DkOnfo80XvL2QfSFxoCAF_cr42ASW8zE/" />');
cambiarLetra = cambiarLetra.replace(/:a/g,'<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-7i3rH5vUOSU298lySh5lfSxJpkqExAl5SVlWYAKzTu3qHGAQvF-V69pZP85MEg8g-nCAzIHWrvSfWeMYpU4Hw4r5lfrLd8CxOQp8F116nn3DkOnfo80XvL2QfSFxoCAF_cr42ASW8zE/" />');

// 3:
cambiarLetra = cambiarLetra.replace(/3:/g,'<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiSnH8fmtcFDfTLgghwEWG2QQ39crrZ39JQq0PNa_zSgGwiTwtmP4744LjajNXDt3lQZWBDQ-VfVYO3bbAAB3XeYf0ByKKt-8d_pvb86O3wuYvH1rktLyFN0AQz8xfaeW1wsKorIrEJxOs/" />');

bodyText.innerHTML = cambiarLetra;
}
//]]>
</script>
</b:if>


Ahora busca esta parte:

<p>
<data:comment.body/>
</p>


Y cámbiala por este código:

<p expr:id='&quot;combody-&quot; + data:comment.anchorName'><data:comment.body/></p>
<script type='text/javascript'>
emoticon = &quot;combody-&quot; + &quot;<data:comment.anchorName/>&quot;;
emoticonComentario(emoticon);
</script>


Luego busca esta línea:

<a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/>


Muy posiblemente la encontrarás dos veces, justo debajo de la segunda que encuentres agrega esto, que es la imagen que se mostrará arriba del formulario de comentarios:

<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgg29pEsbksuFiADSZpBQRsVYnrPkHnEOBAEdzM9twjzkaeAYB1jNtOZNvU0Vn7bLx5ZuNY0e9J5njNxqIP20E54ZrURjZTyfgDt4mVXvsxZh2UoR1-fb4hL5MgJs3aBG7asjhVxA-FlJI/'/>

Y listo, tendrás estos emoticonos en tu blog. Estas imágenes son tomadas del mismo Facebook y tienen el contorno ligeramente marcado de blanco, por lo que se recomienda usarlo en blogs con colores claros para que no se note ese pequeño borde alrededor de ellas.
O si lo prefieres puedes cambiar los iconos por los tuyos, sólo busca las URLs de las imágenes del primer código que corresponden a cada juego de caracteres, los he señalado en color verde para que sean más fácil de encontrar.

Que los disfruten

Posted in: Efectos,Iconos,zona de blogger