span.css-emoticon.pink-emoticon { background-color: #ff8fd4; background-image: -webkit-gradient( linear, right top, left top, color-stop(0.41, rgb(255,143,212)), color-stop(0.56, rgb(255,153,216)), color-stop(1, rgb(255,173,225)) ); background-image: -moz-linear-gradient( center right, rgb(255,143,212) 41%, rgb(255,153,216) 56%, rgb(255,173,225) 100% ); } /* styles for emoticons that need no rotation, like O_o */ span.css-emoticon.no-rotate { transform: rotate(0deg); -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); -moz-box-shadow: 1px 1px 2px rgba(0,0,0,0.5); -webkit-box-shadow: 1px 1px 2px rgba(0,0,0,0.5); box-shadow: 1px 1px 2px rgba(0,0,0,0.5); font-size: 0.45em; width: 2.2em; height: 2.2em; line-height: 1.9em; -moz-border-radius: 2.2em; -webkit-border-radius: 2.2em; border-radius: 2.2em; background-image: -webkit-gradient( linear, right bottom, right top, color-stop(0.41, rgb(255,204,0)), color-stop(0.56, rgb(255,221,85)), color-stop(1, rgb(255,238,170)) ); background-image: -moz-linear-gradient( center bottom, rgb(255,204,0) 41%, rgb(255,221,85) 56%, rgb(255,238,170) 100% ); } span.css-emoticon.no-rotate.red-emoticon { background-image: -webkit-gradient( linear, right bottom, right top, color-stop(0.41, rgb(235,5,66)), color-stop(0.56, rgb(235,38,90)), color-stop(1, rgb(250,55,110)) ); background-image: -moz-linear-gradient( center bottom, rgb(235,5,66) 41%, rgb(235,38,90) 56%, rgb(250,55,110) 100% ); } span.css-emoticon.no-rotate.pink-emoticon { background-image: -webkit-gradient( linear, right bottom, right top, color-stop(0.41, rgb(255,143,212)), color-stop(0.56, rgb(255,153,216)), color-stop(1, rgb(255,173,225)) ); background-image: -moz-linear-gradient( center bottom, rgb(255,143,212) 41%, rgb(255,153,216) 56%, rgb(255,173,225) 100% ); } /* Styles for emoticons that need to be rotated counter-clockwise, like <3 */ span.css-emoticon.counter-rotated { transform: rotate(-90deg); -webkit-transform: rotate(-90deg); -moz-transform: rotate(-90deg); -o-transform: rotate(-90deg); -moz-box-shadow: -1px 1px 2px rgba(0,0,0,0.5); -webkit-box-shadow: -1px 1px 2px rgba(0,0,0,0.5); box-shadow: -1px 1px 2px rgba(0,0,0,0.5); background-image: -webkit-gradient( linear, left top, right top, color-stop(0.41, rgb(255,204,0)), color-stop(0.56, rgb(255,221,85)), color-stop(1, rgb(255,238,170)) ); background-image: -moz-linear-gradient( center left, rgb(255,204,0) 41%, rgb(255,221,85) 56%, rgb(255,238,170) 100% ); } span.css-emoticon.counter-rotated.red-emoticon { background-image: -webkit-gradient( linear, left top, right top, color-stop(0.41, rgb(235,5,66)), color-stop(0.56, rgb(235,38,90)), color-stop(1, rgb(250,55,110)) ); background-image: -moz-linear-gradient( center left, rgb(235,5,66) 41%, rgb(235,38,90) 56%, rgb(250,55,110) 100% ); } span.css-emoticon.counter-rotated.pink-emoticon { background-image: -webkit-gradient( linear, left top, right top, color-stop(0.41, rgb(255,143,212)), color-stop(0.56, rgb(255,153,216)), color-stop(1, rgb(255,173,225)) ); background-image: -moz-linear-gradient( center left, rgb(255,143,212) 41%, rgb(255,153,216) 56%, rgb(255,173,225) 100% ); } /* Styles for animated states */ span.css-emoticon.un-transformed-emoticon, span.css-emoticon.animated-emoticon:hover { /* font-size: inherit; font-weight: inherit; vertical-align: inherit; line-height: inherit; font-family: inherit; */ letter-spacing: inherit; color: inherit; overflow: visible; transform: rotate(0deg); -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); background: none; background-image: none; box-shadow: none; -moz-box-shadow: none; -webkit-box-shadow: none; border-color: transparent; }Feito isso, procure pela tag </body> no final do documento XML .Copie o codigo abaixo e cole ANTES / ACIMA de </body><script src='http://dl.dropbox.com/u/684300/jquery.cssemoticons.min.js' type='text/javascript'/> <script type='text/javascript'> $(document).ready(function(){ $(&#39;.comment-body p&#39;).emoticonize({ //delay: 800, //animate: false, //exclude: &#39;pre, code, .no-emoticons&#39; }); }) </script>Salve o template. Copie o endereco abaixo, que sao as imagens que eu editei para esse exemplo e cole em um bloco de notas.<img border='0' src='http://2.bp.blogspot.com/_DCJ4PAWLOdE/TLbcdwvITLI/AAAAAAAAE60/9xNKzhbaqbM/s1600/Emoticons.png'/></img>Volte a pagina Editar HTML , clique na opcao Expandir modelos de widgets e procure pelo seguinte trecho: <data:blogCommentMessage/></p>Cole EXATAMENTE ABAIXO dele, o endereco das imagens que voce copiou em seu bloco de notas.Visualize e se estiver tudo bem, salve o template.......Detalhes importantes:1 - No Internet Explorer (o IEca) que ainda nao le CSS3 (tadinho) os emoticons aparecerao quadradinhos, mas nao perdem (muito) a graca, veja:... ...2- Aconselho que voce salve a imagem dos emoticons e hospede no seu proprio blog, atraves da caixa de postagens como ja ensinei AQUI... ...3- O mesmo conselho se aplica ao JQuery (script), que voce deve hospedar em seu site preferido (eu uso Dropbox) e pode baixar AQUIEsse truque foi apresentado por Alfa