como cambiar los emojis de paginawebgratis


Cómo cambiar los emojis

A través de código CSS

La verdad es que desconozco quien fue la persona que dio lugar a la idea de reemplazar los emoticonos por defecto de paginawebgratis. Lo mencionaría dando sus creditos, pero hace mucho que guardé los códigos y si no me equivoco, los había copiado de Oscar Muñoz, creador de iGuey.es.tl y tampoco estoy seguro que sea el autor original, en fin. Gracias a los selectores de atributos en CSS es posible cambiar estos antiguos emoticonos por lo que queramos.

Entendiendo el código

Para hacerlo tu mismo, es importante que aprendas a modificar y entender la estructura del código. Primeramente debemos conocer las direcciones URL de cada emoji de paginawebgratis las cuales son:

//theme.webme.com/smiles/wink.gif
//theme.webme.com/smiles/smiley.gif
//theme.webme.com/smiles/cheesy.gif
//theme.webme.com/smiles/angry.gif
//theme.webme.com/smiles/sad.gif
//theme.webme.com/smiles/shocked.gif
//theme.webme.com/smiles/cool.gif
//theme.webme.com/smiles/huh.gif
//theme.webme.com/smiles/rolleyes.gif
//theme.webme.com/smiles/tongue.gif
//theme.webme.com/smiles/undecided.gif
//theme.webme.com/smiles/cry.gif

El código que lavará los rostros (?)

A continuación el código CSS que deberás duplicarás por cada uno de los emoticonos. En el mismo podrás observar que el CSS está obligando al HTML que cambie la URL del emoji default (wink.gif), por la URL de la imagen o emoticon que colocarás (background-image). Lo mismo deberás hacer para los 12 emojis.


img[src="//theme.webme.com/smiles/wink.gif"] 
{ 
background-image:url(URL DE TU EMOTICON);
background-repeat:no-repeat;
height:0px;
width:0px;
padding-left:25px;
padding-top:20px;
}

Deberás pegar y guardar el código en tu web en: Diseño → Configuración Avanzada → CSS - Code sin Style tags


Limitación

Se reemplazan las imágenes de los 12 gif de paginawebgratis. No hay más. No podrás añadir emoticonos extras.

Supongo que esto es todo, si tienes alguna inquietud, comenta en éste post. Si te gustó, no olvides de darle like. Hasta la próxima



Posted by Gabriel Navarro | Tutorial | Imágenes, cortesía de: Gabriel Navarro


comments powered by Disqus