Agregar emoticones de Yahoo! Smiley encima del formulario de comentarios

03 marzo 2010

Agregar emoticones de Yahoo! Smiley encima del formulario de comentarios

    5 comentarios
Si tienes activado el formulario de comentarios debajo de cada post, entonces seria bueno que le dieras oportunidad a tus lectores al comentar de agregar una lista de emoticones o smilies para que aquellos que deseen comentar en vez de colocar un texto para demostrar agrado como el común"Jajaja" coloquen una carita feliz con los distintos codigos que salen al lado de cada imagen y que al publicar el comentario o post, ya que también sirve para tus entradas, el Script lo sustituya por cada imagen correspondiente.

El formulario de los comentarios se vera igual o similar al que puedes observar en la imagen, al lado derecho de este texto.

Para agregar estos emoticones, debes seguir los siguientes pasos.

[1] Inicia sesion en Blogger, luego ve a la pestaña Diseño>Edicion HTML y expandiendo los artilugios, busca el siguiente codigo.

<b:if cond='data:post.embedCommentForm'>
<b:include data='post' name='comment-form'/>

[2] Ahora, entre estas dos lineas, pega el siguiente codigo.

<div style='-moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; width: 369; text-align: left; border: 1px solid #cccccc; padding: 5px; background: #eeeddf; height:86'>
<b>
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/21.gif' width='18'/> :))
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/71.gif' width='18'/> ;))
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/5.gif' width='18'/> ;;)
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/4.gif' width='18'/> :D
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/3.gif' width='18'/> ;)
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/10.gif' width='18'/> :p
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/20.gif' width='22'/> :((
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/1.gif' width='18'/> :)
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/2.gif' width='18'/> :(
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/8.gif' width='18'/> :X
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/12.gif' width='18'/> =((
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/13.gif' width='18'/> :-o
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/7.gif' width='20'/> :-/
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/11.gif' width='18'/> :-*
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/22.gif' width='18'/> :|
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/35.gif' width='24'/> 8-}
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/100.gif' width='31'/> :)]
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/102.gif' width='44'/> ~x(
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/104.gif' width='30'/> :-t
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/66.gif' width='18'/> b-(
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/62.gif' width='18'/> :-L
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/14.gif' width='34'/> x(
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/24.gif' width='30'/> =))
</b>
</div>


[3] Ahora, busca la etiqueta </body> y justo antes de ella, pega el siguiente codigo.

<script src='http://sites.google.com/site/archivosfrikibloggeo/friki-bloggeo/smiley.js' type='text/javascript'/><noscript><a href="http://www.frikibloggeo.com.ar" target="_blank"><span style="font-size: x-small;">Agregar Emoticones</span></a></noscript>

[4] Finalmente, guardas la plantilla.

La linea roja es el script que hace que se remplace el texto por la imagen, pero el archivo .js esta cargado en la pagina de Google Sites de Friki Bloggeo, si deseas subir el script a tu propio servidor puedes decargarte el ZIP de archivo, subirlo y sustituir esa dirección por la tuya.

Enlaces para compartir en tu blog o pagina web.




Widget por Friki Bloggeo


5 comentarios :

Suscribirse a: Enviar comentarios ( Atom )