SERVICIOS - DISEÑO - FREEBIES - MEJORA TU BLOG -

16 abr. 2014

Pon emoticonos en los comentarios de tu blog

¿Qué tal chicas?
Yo cada día tengo mas mails para contestar y mas plantillas que revisar, así que cada vez parece que el tiempo y el blog se me van comiendo a cachos ajajajaja.

Tengo alguna que otra batalla con la organización y llegar con los posts..aiss...

Ahora voy con un tutorial que me han preguntado algunas lectoras, les he contestado vía mail para ayudarlas al momento, pero seguro que hay alguna que quiere saber esto pero no se atreve a pedirlo, así que ahí va.
Os explicaré las dos formas que conozco de hacerlo.
Emoticonos en los comentarios.


De forma típica:
Primero de todo, como siempre, hacemos una copia de seguridad de nuestra plantilla.
Luego vamos a Diseño/Editar HTML, expandimos todos los artilugios y pegamos el siguiente código encima de ]]></b:skin>.


/* Caritas en comments
----------------------------------------------- */
img.bhacksmly {
height: auto !important;
vertical-align: middle !important;
width: auto !important;
border:0px !important;
}

Ahora justo encima de </body> pegamos el código siguiente:

<script src="https://dl.dropboxusercontent.com/u/52353526/yahoo-smileys-reduc.js" type="text/javascript">

Bien bien, vamos bien, ahora buscad este codigo en vuestra plantilla:
<div class='post-footer-line post-footer-line-3'>
Y fijaos que un pelín más a bajo encontramos esto: </b:includable>

Bien pues justo encima de ese </b:includable> pegáis lo siguiente:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
   <div class='pcgblogysmile' id='ysmile' style='width:600px; text-align:center; border:2px solid #000000; background: #ebebeb; padding:10px; color:#000000; font-weight:normal;'>
     <img class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/1.gif'/> :)   
     <img class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/2.gif'/> :(
     <img class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/3.gif'/> ;)
     <img class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/10.gif'/> :P
     <img class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/4.gif'/> :D
     <img class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/7.gif'/> :/
     <img class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/8.gif'/> :x
     <img class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/11.gif'/> :*
     <img class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/13.gif'/> :O
     <img class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/17.gif'/> :S        
     <img class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/22.gif'/> :|
     <img class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/16.gif'/> B)
     <img class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/45.gif'/> :w
     <img class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/31.gif'/> :a
     <img class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/21.gif'/> :))
     <img class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/20.gif'/> :((   
     <img class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/25.gif'/> O:)
     <img class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/19.gif'/> 7:)        
     <img class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/47.gif'/> 7:P             
     <img class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/14.gif'/> X(   
     <img class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/37.gif'/> (:|   
     <img class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/24.gif'/> =))
     <img class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/28.gif'/> I-)   
     <img class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/36.gif'/> 2:P
     <img class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/41.gif'/> =DD
     <img class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/109.gif'/> X_X
     <img class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/110.gif'/> :!!
     <img class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/112.gif'/> :q
     <img class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/114.gif'/> ^_^
     <img class='bhacksmly' src='http://l.yimg.com/a/i/us/msg/emoticons/pirate.gif'/> :ar!
    </div>
</b:if>

PUNTO 1
Si no os gustan estos emoticonos, buscaos unos que os gusten por Google Imágenes, os los descargáis en vuestro ordenador, los subís a vuestro blog siguiendo el tutorial que os dejé de Tu blog como Host de imágenes dentro del tutorial de cómo cambiar el fondo de tu blog.
Apuntáis la dirección de los emoticonos subidos a vuestros blogs y sustituís la URL del emoticon que queráis cambiar.

<img class='bhacksmly' src='http://l.yimg.com/a/i/us/msg/emoticons/pirate.gif'/> :ar!
Después de src= toda esa URL es la dirección donde está el dibujito. Para que blogguer vaya a buscarla y así la vemos en el blog.

:ar!--> esto es la combinación de teclas que tenemos que escribir para que aparezca el dibujito. Así sabéis las dos partes que componen este código por si queréis cambiaros las imágenes y la combinación de teclas que queréis usar.

Este tutorial lo he encontrado en una tierra para chicas, y en chorrocientosmil sitios más, ya se sabe, tutoriales everywhere.
Pero ahora os dejare mi manera de hacerlo, un poco..a la remanguillé pero muy útil también

Emoticonos en Comentarios, igual que los míos
Ahora os explico mi manera rudimentaria de hacerlo. No me gustaba que se viera el recuadro con los emoticonos, así que lo escondí y una cosa me llevó a la otra y hasta puse iconos míos, totalmente personalizados.

Si os decantáis por esta manera, tendréis que copiar o memorizar las combinaciones de teclas con los dibujitos, para saber que poner para que salga tal o cual emoticono. Para saberlo tendréis que copiar y pegar en el navegador cada URL del código para ver cada emoticono. Es un latazo pero bueno...es que es algo hecho por mi no pensaba que le interesara usar a alguien más ajajajaj.

Hacéis copia de seguridad, como siempre. Vamos a Diseño y editar HTML.
Buscamos este código:
<div class='footer-cap-bottom cap-bottom'>

Veremos que debajo tiene mas código, bajamos hasta que encontremos esto:
<!-- content -->
          </div>
        </div>
        <div class='content-cap-bottom cap-bottom'>
          <div class='cap-left'/>
          <div class='cap-right'/>
        </div>
      </div>
    </div>
    <script type='text/javascript'>
      window.setTimeout(function() {
        document.body.className = document.body.className.replace(&#39;loading&#39;, &#39;&#39;);
    </script>              

Bien, después de este último </script> pegamos todo este tocho sin miedo:

 <script type='text/javascript'>
      //<![CDATA[
      function replaceText(){if(!document.getElementById){return;}
                             bodyText = document.getElementById("comment-holder");
                             theText = bodyText.innerHTML;
                             theText = theText.replace(/\[img\].*?'.*?\[\/img\]/gi, "");
                             theText = theText.replace(/\[youtube\].*?'.*?\[\/youtube\]/gi, "");
                             theText = theText.replace(/\[img\]/gi, "<div style='clear:both'></div><img style='float:left;margin: 3px 0px 5px;border:1px solid #DDD;max-width:98%;background:#FFF;padding:4px' src='");
                             theText = theText.replace(/\[\/img\]/gi, "'/><div style='clear:both'></div>");
                             theText = theText.replace(/\[youtube\]http:\/\/youtu.be/gi, "<p style='margin: 5px 0px'><iframe width='480' height='355' src='http://www.youtube.com/embed");
                             theText = theText.replace(/\[youtube\]http:\/\/www.youtube.com\/watch\?v=/gi, "<p style='margin: 5px 0px'><iframe width='480' height='355' src='http://www.youtube.com/embed/");
                             theText = theText.replace(/&amp;feature=/gi, "?rel=0' '");
                             theText = theText.replace(/\[\/youtube\]/gi, "?rel=0' frameborder='0' allowfullscreen></iframe></p>");
                             theText = theText.replace(/:\)\)/gi, "<img style='max-height:24px' src='https://lh3.googleusercontent.com/-duNoMAb1RS4/T2WEWrOfR8I/AAAAAAAACZ0/ObgHf-PmTuE/s36/03.gif'/>");
                             theText = theText.replace(/:\(\(/gi, "<img style='max-height:24px' src='https://lh6.googleusercontent.com/-LIr-ZdDp2xI/T2WEYDacVnI/AAAAAAAACaY/W7MF5qKO2sE/s47/06.gif'/>");
                             theText = theText.replace(/:\)/gi, "<img style='max-height:24px' src='https://lh6.googleusercontent.com/-Q5lMkgcmVR4/T2WEWkNi3MI/AAAAAAAACZ4/7VBYeVbx7kA/s36/01.gif'/>");
                             theText = theText.replace(/:cool\:/gi, "<img style='max-height:24px' src='https://lh3.googleusercontent.com/-mCsZPeixHvA/T2WEWivv9FI/AAAAAAAACZw/64ZGRgdlDeg/s36/02.gif'/>");
                             theText = theText.replace(/=\)\)/gi, "<img style='max-height:24px' src='https://lh5.googleusercontent.com/-u__sc3DgZ2c/T2d0_lDLueI/AAAAAAAACkw/YbeuRNde61Q/s36/03a.gif'/>");
                             theText = theText.replace(/:\(/gi, "<img style='max-height:24px' src='https://lh5.googleusercontent.com/-EwonQGBTYwo/T2WEXeVq3oI/AAAAAAAACZ8/4ixt2ZVlqrI/s36/04.gif'/>");
                             theText = theText.replace(/:-\(/gi, "<img style='max-height:24px' src='https://lh3.googleusercontent.com/-fMtAZDakmBI/T2WEXswr5BI/AAAAAAAACaA/83R1X_PumTk/s36/05.gif'/>");
                             theText = theText.replace(/:d/gi, "<img style='max-height:24px' src='https://lh3.googleusercontent.com/-Em3lvBgvYlI/T2WElbV0BaI/AAAAAAAACdI/ApynphQdka8/s36/7.gif'/>");
                             theText = theText.replace(/:-d/gi, "<img style='max-height:24px' src='https://lh4.googleusercontent.com/-0R7-2DC1klM/T2WEmMQajfI/AAAAAAAACdM/-4JFCeC6QD8/s36/8.gif'/>");
                             theText = theText.replace(/@-\)/gi, "<img style='max-height:24px' src='https://lh5.googleusercontent.com/-PE2GWBseiGk/T2acYH_uNRI/AAAAAAAAChg/HloTeaRIdyQ/s36/09.gif'/>");
                             theText = theText.replace(/:p/gi, "<img style='max-height:24px' src='https://lh5.googleusercontent.com/-nkyzLkHUPg8/T2WEYdFqFxI/AAAAAAAACaQ/Mu1yPq91yuc/s36/10.gif'/>");
                             theText = theText.replace(/:o/gi, "<img style='max-height:24px' src='https://lh6.googleusercontent.com/-0-zgLVgK2Cg/T2WEY10FXuI/AAAAAAAACag/dyKQ5pPUIGQ/s36/11.gif'/>");
                             theText = theText.replace(/:&gt;\)/gi, "<img style='max-height:24px' src='https://lh3.googleusercontent.com/-xbWqvOWJNE0/T2WEZM-VLTI/AAAAAAAACak/8dLATIlXRDk/s36/12.gif'/>");
                             theText = theText.replace(/\(o\)/gi, "<img style='max-height:24px' src='https://lh4.googleusercontent.com/-cguZVxYzR3o/T2WEZSgFvUI/AAAAAAAACas/nDJgr6YcuaI/s36/13.gif'/>");
                             theText = theText.replace(/\[-\(/gi, "<img style='max-height:24px' src='https://lh5.googleusercontent.com/-VKGWq-wPGUw/T2WEaEQLA9I/AAAAAAAACa4/ZDnLP29mlgk/s36/14.gif'/>");
                             theText = theText.replace(/:-\?/gi, "<img style='max-height:24px' src='https://lh6.googleusercontent.com/-hIVRIc7IAJw/T2WEaO5ASUI/AAAAAAAACaw/FLmCvzeMSbc/s36/15.gif'/>");
                             theText = theText.replace(/\(p\)/gi, "<img style='max-height:24px' src='https://lh4.googleusercontent.com/-hk3q3tP-0Pg/T2WEcRONc5I/AAAAAAAACbY/bJ00rge5Mq8/s36/16.gif'/>");
                             theText = theText.replace(/:-s/gi, "<img style='max-height:24px' src='https://lh5.googleusercontent.com/-cysJNcXxT-Q/T2WEcxVM5dI/AAAAAAAACbU/Mvuc437f1ZI/s36/17.gif'/>");
                             theText = theText.replace(/\(m\)/gi, "<img style='max-height:24px' src='https://lh6.googleusercontent.com/-H20tIsy7Hvw/T2WEbDW0R7I/AAAAAAAACbE/DymXsZOmO3s/s36/18.gif'/>");
                             theText = theText.replace(/8-\)/gi, "<img style='max-height:24px' src='https://lh4.googleusercontent.com/-IvNFZtzJJYI/T2WEcDj-0NI/AAAAAAAACbM/kiqtHbdkarQ/s36/19.gif'/>");
                             theText = theText.replace(/:-t/gi, "<img style='max-height:24px' src='https://lh5.googleusercontent.com/-XCXdaCYaOGE/T2WEcmd15EI/AAAAAAAACbQ/Z5UyZCuX4Xo/s36/20.gif'/>");
                             theText = theText.replace(/:-b/gi, "<img style='max-height:24px' src='https://lh4.googleusercontent.com/-g6V0tBD1vwk/T2WEdRGJfWI/AAAAAAAACbo/P8P_SGEdhzI/s36/21.gif'/>");
                             theText = theText.replace(/b-\(/gi, "<img style='max-height:24px' src='https://lh6.googleusercontent.com/-ErUGB8ea0H4/T2WEdm5-ZSI/AAAAAAAACbs/245Hxnaa82g/s35/22.gif'/>");
                             theText = theText.replace(/:-#/gi, "<img style='max-height:24px' src='https://lh6.googleusercontent.com/-p-5AT-amLik/T2WEi_MJDqI/AAAAAAAACco/5J-MqivSQw4/s36/23.gif'/>");
                             theText = theText.replace(/=p~/gi, "<img style='max-height:24px' src='https://lh3.googleusercontent.com/-H8izCFTaHFE/T2b39mmu2NI/AAAAAAAACkM/k4bDdFe301U/s36/24.gif'/>");
                             theText = theText.replace(/:-\$/gi, "<img style='max-height:24px' src='https://lh5.googleusercontent.com/-LZn6dX8GslQ/T2W30lpp_kI/AAAAAAAAChA/Rym2Ql5H-jU/s36/25.gif'/>");
                             theText = theText.replace(/\(b\)/gi, "<img style='max-height:24px' src='https://lh5.googleusercontent.com/-k6r8YBUhxVk/T2WEgBtjFtI/AAAAAAAACcE/U5U5uPCpxq8/s36/26.gif'/>");
                             theText = theText.replace(/\(f\)/gi, "<img style='max-height:24px' src='https://lh5.googleusercontent.com/-pj6fMvZXTyc/T2WEga9-gjI/AAAAAAAACcM/kVpUCa7uqpw/s36/27.gif'/>");
                             theText = theText.replace(/x-\)/gi, "<img style='max-height:24px' src='https://lh3.googleusercontent.com/-zI2UJmwerDM/T2WEhSRkuTI/AAAAAAAACcc/Gr3xFDrZF3Y/s36/28.gif'/>");
                             theText = theText.replace(/\(k\)/gi, "<img style='max-height:24px' src='https://lh3.googleusercontent.com/-ilBYLLWFQJQ/T2WEiJXJ7LI/AAAAAAAACcY/bXpkIPuVUto/s36/29.gif'/>");
                             theText = theText.replace(/\(h\)/gi, "<img style='max-height:24px' src='https://lh5.googleusercontent.com/-_NHYkuf5bZg/T2WEjOhTIxI/AAAAAAAACcg/76qRE27R_ig/s36/30.gif'/>");
                             theText = theText.replace(/\(c\)/gi, "<img style='max-height:24px' src='https://lh6.googleusercontent.com/-O6m44_Z-8AA/T2WEjLRImnI/AAAAAAAACck/c_jh643HU6o/s36/31.gif'/>");
                             theText = theText.replace(/cheer/gi, "<img style='max-height:24px' src='https://lh5.googleusercontent.com/-9TYEg93ImUM/T2WEjvuhxTI/AAAAAAAACc0/KQRBXuuV_Yg/s36/32.gif'/>");
                             theText = theText.replace(/:k/gi, "<img style='max-height:40px' src='http://imageshack.com/a/img189/3402/4od.gif'/>");    
                             theText = theText.replace(/:Z/gi, "<img style='max-height:40px' src='http://imageshack.com/a/img823/7697/h736.gif'/>");
                             theText = theText.replace(/:N/gi, "<img style='max-height:40px' src='http://imageshack.com/a/img854/8462/c2hb.gif'/>");    
                             theText = theText.replace(/:shy/gi, "<img style='max-height:40px' src='http://imageshack.com/a/img809/7000/qd6g.gif'/>");
                             theText = theText.replace(/:M/gi, "<img style='max-height:40px' src='http://imageshack.com/a/img189/3402/4od.gif'/>");
                             theText = theText.replace(/:G/gi, "<img style='max-height:40px' src='http://imageshack.com/a/img843/1734/x4os.gif'/>");
                             theText = theText.replace(/:lol/gi, "<img style='max-height:40px' src='http://imageshack.com/a/img842/7065/7i9.gif'/>");
                             theText = theText.replace(/:mhua/gi, "<img style='max-height:40px' src='http://imageshack.com/a/img843/9479/gm8d.gif'/>");
                             theText = theText.replace(/:Ui/gi, "<img style='max-height:40px' src='http://imageshack.com/a/img196/4001/b0t.gif'/>");
                             theText = theText.replace(/:m/gi, "<img style='max-height:40px' src='http://imageshack.com/a/img14/5730/u86.gif'/>");
                             bodyText.innerHTML = theText;
                            }replaceText();
      //]]>
    </script>


Guardamos la plantilla, ya está todo implementado.
Ahora una aclaración importante.

Cada línea de estas:
theText = theText.replace(/:k/gi, "<img style='max-height:40px' src='http://imageshack.com/a/img189/3402/4od.gif'/>");
Es para un dibujito.

Esta parte /:k/gi, es la combinación de teclas para que saga el dibujito, en este caso para que saliera deberíamos escribir :k las / son como separadores y el gi, es más código. Solo os interesa lo que está después del paréntesis ( y antes del gi, para modificar a vuestro gusto las teclas para que salga el emoticon.)

El emoticón es la url que aparece después de src= y lo que dice style='max-height:40px' son las medidas que tiene el dibujito, para que no se vea mal.

Para cambiar los emoticonos, podéis hacerlo exactamente igual que en el Punto 1 que he explicado más arriba.

Este tutorial puede parecer un pelín complicado, si tenéis dudas preguntad. Si seguís al pie de la letra lo que os digo os debería salir y como siempre, como habéis hecho copia de seguridad de la plantilla, si no os aparece algún código, ¡ponedlo vosotras sin miedo!

Muah! Nos vemos el viernes ^^

10 comentarios:

  1. Muchas gracias por el tuto pero yo soy de las que nome atrevo a tocar el html... :-(
    Felices pascuas!!! Besitos

    ResponderEliminar
  2. Muchas gracias por el tutorial!!
    Un saludo

    ResponderEliminar
  3. Vaya currada de tutorial nos muestras, yo digo como Sofie, que me da miedo tocar según que cosas por meter la pata. Y mira que me encantan los emoticonos pero chica el tutorial es demasiado complicado para mi.
    Un besote Lireth :D

    ResponderEliminar
    Respuestas
    1. Jajajajajaja por más que lo intento es que no doy una jajajaja.
      Un besote Lireth :)

      Eliminar
  4. Oh mi Dios, sudé cuando le di Guardar plantilla jajajajjajajaaj
    Pero resultooooooooo , I Loved
    Lo único que no veo es un emoticon tirando picos, haré uno aquí a ver si te sale jajajja :*

    Muchísimas gracias :D

    ResponderEliminar
  5. Gracias a ti he aprendido a editar el html.
    Voy a poner este para los emoticones en los comentarios!
    mil gracias!
    :)

    ResponderEliminar
  6. y si no me paarece <div class='post-footer-line post-footer-line 3, solo la 1 y la 2, que hago. :*

    ResponderEliminar
  7. GRAAAAAAAAAACIAS, AHORA MIS COMENTARIOS SE VEN CHULOS, CHULOS :)

    ResponderEliminar