Sobre como usar emoticones en Blogger encontraras muchos temas al respecto, la idea es básicamente la misma, el código del emoticon se incluye cuando enviamos un comentario (eso queda almacenado en la base de datos) y una vez se lean, justo antes de que se impriman en la plantilla, se intercepta esa cadena de caracteres y se sustituyen esos códigos por su imagen correspondiente ¿que varia? la forma en que lo implementes.
Puedes ver el ejemplo del tema funcionando aquÃ. Al clickar un emoticon se genera el código correspondiente, solo basta copiarlo y pegarlo en el TEXTAREA (el campo) donde introducimos el comentario.
Para aplicarlo hacemos lo siguiente:
nota
Recuerda respaldar la plantilla antes de hacer cualquier modificación.Nos ubicamos en la etiqueta de cierre </head> y antes de ella colocamos el siguiente código:
<!-- emoticones -->
<script type='text/javascript'>
//<![CDATA[
/* genera el codigo del emoticon */
function AddEmotEditor(sEmoticon)
{
var emotcode = document.getElementById('emotcode');
emotcode.value = sEmoticon;
}
/* reemplaza el codigo del emoticon por la imagen correspondiente */
function PutEmoticon(sCadena)
{
var sEmotArray = new Array();
sEmotArray[0] = '[afro]';
sEmotArray[1] = '[angel]';
sEmotArray[2] = '[angry]';
sEmotArray[3] = '[azn]';
sEmotArray[4] = '[cheesy]';
sEmotArray[5] = '[cool]';
sEmotArray[6] = '[cry]';
sEmotArray[7] = '[embarrassed]';
sEmotArray[8] = '[evil]';
sEmotArray[9] = '[grin]';
sEmotArray[10] = '[huh]';
sEmotArray[11] = '[kiss]';
sEmotArray[12] = '[laugh]';
sEmotArray[13] = '[lipsrsealed]';
sEmotArray[14] = '[police]';
sEmotArray[15] = '[rolleyes]';
sEmotArray[16] = '[sad]';
sEmotArray[17] = '[shocked]';
sEmotArray[18] = '[sleepy]';
sEmotArray[19] = '[smiley]';
sEmotArray[20] = '[tongue]';
sEmotArray[21] = '[undecided]';
sEmotArray[22] = '[wink]';
/* aqui puedes seguir agregando codigos */
var sImg,i,sDir,sExt;
sDir = 'RUTA/';//ejemplo: http://MiDominio/imagenes/
sExt = 'gif';//extencion de las imagenes
for (i=0; i<sEmotArray.length; i++)
{ // eliminamos los corchetes []
sImg = sEmotArray[i].replace(/\]/g,'');
sImg = sImg.replace(/\[/g,'');
sImg = "<img src='" + sDir + sImg + "." + sExt + "' / >";
// hacemos la sustitucion
sCadena = sCadena.replace(sEmotArray[i],sImg);
}
// se imprimen los iconos
document.write(sCadena);
}
//]]>
</script>
Seguido del script anterior colocamos el estilo:
<style>
#emotimg { /* este es el div que contiene las imagenes, los emoticonos */
text-align:center;
margin: 5px 0 5px 0;
}
#emotimg img { /* estilo para los emoticonos */
cursor: pointer;
border:none;
}
#emotcode { /* estilo para el input text donde se genera el code del emoticon*/
background-color:#fff;
border: 1px solid #c1930b;
}
</style>
Como habras notado son dos las funciones a utilizar, la primera "AddEmotEditor" se encarga de agregar el código del emoticon dinámicamente a la caja de texto, la segunda "PutEmoticon" cambia el código una vez leÃdo, por la imagen que corresponda.
Ahora hay que colocar las imágenes antes del formulario.
nota
Recuerda que los emoticonos solo se mostraran si tienes activada la opción "Entrada incrustada a continuación" en el panel --> configuración --> comentarios.Buscamos la siguiente linea dentro de la plantilla:
<a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/>
y justo antes de ella, colocamos lo siguiente:
<!-- emoticones.. --> <a name='emoticones'/><!-- ancla --> <div id='emotimg'> <img onclick='javascript:AddEmotEditor("[afro]");' src='RUTA/afro.gif'/> <img onclick='javascript:AddEmotEditor("[angel]");' src='RUTA/angel.gif'/> <img onclick='javascript:AddEmotEditor("[angry]");' src='RUTA/angry.gif'/> <img onclick='javascript:AddEmotEditor("[azn]");' src='RUTA/azn.gif'/> <img onclick='javascript:AddEmotEditor("[cheesy]");' src='RUTA/cheesy.gif'/> <img onclick='javascript:AddEmotEditor("[cool]");' src='RUTA/cool.gif'/> <img onclick='javascript:AddEmotEditor("[cry]");' src='RUTA/cry.gif'/> <img onclick='javascript:AddEmotEditor("[embarrassed]");' src='RUTA/embarrassed.gif'/> <img onclick='javascript:AddEmotEditor("[evil]");' src='RUTA/evil.gif'/> <img onclick='javascript:AddEmotEditor("[grin]");' src='RUTA/grin.gif'/> <img onclick='javascript:AddEmotEditor("[huh]");' src='RUTA/huh.gif'/> <img onclick='javascript:AddEmotEditor("[kiss]");' src='RUTA/kiss.gif'/> <img onclick='javascript:AddEmotEditor("[laugh]");' src='RUTA/laugh.gif'/> <img onclick='javascript:AddEmotEditor("[lipsrsealed]");' src='RUTA/lipsrsealed.gif'/> <img onclick='javascript:AddEmotEditor("[police]");' src='RUTA/police.gif'/> <img onclick='javascript:AddEmotEditor("[rolleyes]");' src='RUTA/rolleyes.gif'/> <img onclick='javascript:AddEmotEditor("[sad]");' src='RUTA/sad.gif'/> <img onclick='javascript:AddEmotEditor("[shocked]");' src='RUTA/shocked.gif'/> <img onclick='javascript:AddEmotEditor("[sleepy]");' src='RUTA/sleepy.gif'/> <img onclick='javascript:AddEmotEditor("[smiley]");' src='RUTA/smiley.gif'/> <img onclick='javascript:AddEmotEditor("[tongue]");' src='RUTA/tongue.gif'/> <img onclick='javascript:AddEmotEditor("[undecided]");' src='RUTA/undecided.gif'/> <img onclick='javascript:AddEmotEditor("[wink]");' src='RUTA/wink.gif'/> <input id='emotcode' name='emotcode' onclick='this.select()' readonly='readonly' type='text'/> </div>
Debes cambiar RUTA por la dirección donde se encuentran alojadas las imágenes.
Ahora debemos agregar la función que se encarga de sustituir los códigos de los emoticones.
Buscamos este trozo de código:
<b:if cond='data:comment.isDeleted'> <span class='deleted-comment'><data:comment.body/></span <b:else/> <p><data:comment.body/></p> </b:if>
y lo sustituimos por este otro:
<b:if cond='data:comment.isDeleted'> <script type='text/javascript'> PutEmoticon('<span class='deleted-comment'><data:comment.body/></span>'); </script> <b:else/> <script type='text/javascript'> PutEmoticon('<p><data:comment.body/></p>'); </script> </b:if>
El pack de imágenes del ejemplo la puedes descargar de aquà (descargado originalmente del apartado de Smileys de SMF).
no entiendo esta parte sDir = 'RUTA/';//ejemplo: http://MiDominio/imagenes/
ResponderEliminarse supone que es un blogger y no uso host propio. entonces no entiendo esa parte del dominio :S
que uses blogger no te limita, puedes tener las imagenes alojadas en cualquier sitio. El hecho es que las imagenes apuntan a algún sitio y eso debes decirselo al script o nunca las mostrará.
ResponderEliminar