¿Los artículos de tu blog publicados aquí? ¡Propón tu blog!

INICIO › 
BLOG

Pon emoticonos en los comentarios de tu blog

Publicado el 16 abril 2014 por Lireth
¿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 1Si 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(/:>\)/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 ^^
¡Gracias por suscribirte! Muchos besos. ❀Lireth❀