Tutorial. Poner emoticonos en blogger.

De EldanYdalmaden - noviembre 12, 2012

Bueno, ya que os enseñé a entrar en EDICIÓN HTML de blogger y a EXPANDIR PLANTILLA DE ARTILUGIOS, así como usar el CONTROL + F para encontrar líneas de comando, ahora estamos preparados para implementar en nuestro blog, unos emoticonos para los comentarios.

Es decir, habrá una serie de emoticonos disponibles para indicar alguna emoción cuando se comente algo, previa elección de cada cual, sabiendo el comando necesario para ese emoticono elegido.

Eso será fácil, saldrá un cuadrito encima de los comentarios que si pinchamos, nos llevará hasta los emoticonos disponibles, miramos su comando, por ejemplo el de la carita que todos conocemos, la sonriente. :) o la triste :(
Así pondremos tal como nos indique la ventana de iconos.

Pero eso ya lo veréis cuando pongais, ahora vamos a enseñar a hacerlo.

Lo dicho, vamos a nuestro PANEL DE CONTROL de blogger.
Si tenemos la interfaz moderna, la cambiamos a la antigua. (Dicho esto en el tutorial anterior)

FOTO 1.

Vamos a DISEÑO.
Pinchamos en EDICIÓN HTML.

FOTO 2.

Cuando hagamos estas cosas debemos DESCARGAR NUESTRA PLANTILLA, para evitar males mayores. Eso está marcado en azul arriba. Hacedlo e irá a vuestra carpeta de DESCARGAS en tus documentos.

Una vez hecho eso, marcamos el cuadrito de EXPANDIR PLANTILLA DE ARTILUGIOS.

Ahora daremos a CONTROL + F y se nos abrirá, según el navegador (chrome es arriba a la derecha, firefox abajo a la izquierda), se nos abrirá una ventanita para escribir lo que ahora os mostraré para buscar las líneas de comando necesarias para insertar lo que debéis copiar y pegar ahí.

FOTO 3.

Bueno, una vez dicho esto, manos a la obra, sin miedo, hemos guardado la plantilla y si pasa algo, la cargamos de nuevo y aquí paz y allí gloria.

Tenemos que buscar en la ventanita que se abrió cuando dimos a CONTROL + F , esta línea de comandos:

</body>

FOTO 4.

Y ahora, una vez encontrado, pegamos esto, juesto encima de ese comando:

<b:if cond='data:blog.pageType == "item"'>
<script src='http://dl.dropbox.com/u/35784805/Mil%20Trucos%20Blogger/emoticonesblogger.js' type='text/javascript'/>
<script type='text/javascript'>
emoticonComentario();
</script>
</b:if>

Vale, ya lo tenemos puesto.

Ahora borramos eso de body de la ventana de arriba y buscamos esta línea:

<div class='post-footer-line post-footer-line-3'/>

Y bajo esta línea, pegamos esto.

<b:if cond='data:blog.pageType == "item"'>
<div class='divspoiler'>
<img onclick='if (this.parentNode.nextSibling.childNodes[0].style.display != '') { this.parentNode.nextSibling.childNodes[0].style.display = ''; } else { this.parentNode.nextSibling.childNodes[0].style.display = 'none';}' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSXyMBFWaHh_vhNoNTo0KWup9R6WsaoGEEj0tYSPI3DikTTW-2dEmPOCOuuDx1moHZDdt9n3qRd4eg8Ro0OQsIqn4zUsWc-y7lrEEHkLSafNO6QJp6lK3wKCru2GcEsgYvP2xivnK3Fm8/s1600/Sin+t%C3%ADtulo-1.png'/>
</div><div><div class='spoiler' style='display: none;'>
<div class='comment-content' id='bc_0_1MC'>
<img src='http://static.mobile9.com/bbcode/smileys/smile.gif'/> :) <img src='http://static.mobile9.com/bbcode/smileys/tongue.gif'/> X( <img src='http://static.mobile9.com/bbcode/smileys/wink.gif'/> :cool: <img src='http://static.mobile9.com/bbcode/smileys/laugh.gif'/> :cry: <img src='http://static.mobile9.com/bbcode/smileys/frown.gif'/> :blaf: <img src='http://static.mobile9.com/bbcode/smileys/thumbup.gif'/> :winky: <img src='http://static.mobile9.com/bbcode/smileys/blush.gif'/> :noo: <img src='http://static.mobile9.com/bbcode/smileys/byebye.gif'/> :twisted: <img src='http://static.mobile9.com/bbcode/smileys/clapping.gif'/>:D <img src='http://static.mobile9.com/bbcode/smileys/wow.gif'/> :oops: <img src='http://static.mobile9.com/bbcode/smileys/help.gif'/> :? <img src='http://static.mobile9.com/bbcode/smileys/devil.gif'/> :F
<img src='http://static.mobile9.com/bbcode/smileys/wub.gif'/> :alaba: <img src='http://static.mobile9.com/bbcode/smileys/cry.gif'/>:lpmqtp: <img src='http://static.mobile9.com/bbcode/smileys/thumbdown.gif'/> :idiot:</div>

</div></div>
</b:if>

GUARDAMOS CAMBIOS Y vamos a nuestro blog a los comentarios a ver si nos sale algo como esto:

FOTO 5.

Damos a MOSTRAR EMOTICONES y se nos abrirá una ventanita con ellos.

FOTO 6.

Entonces veremos qué comando es para cada cuál, por ejemplo, el primero es la carita sonriente :) el de la lengua es XC , el del guiño es :cool: y así todos los que vayáis a usar de los que hay ahí.

Y nada más, espero que os funcione el truco y ya vendrán otros, si queréis.

Viva el Otoño.