Hoje irei ensinar aqui um truque muito simples, com Puro CSS3 e Jquery, para colocar “carinhas”, Smiles ou Emoticons, como queiram chamar (rss) nos comentários. Eu as acho muito simpáticas e, apesar de chamadas de “firulas infantis” por muitos, pra mim são carinhos ou expressões que “economizam” muitas palavras quando queremos compartilhar nossas emoções. Só isso!

Irá ficar assim:

Faça login ► Clique na opção “Modelo” depois em “Editar HTML”

Vamos instalar o CSS. Procure por

Código:

]]></b:skin>

e cole o seguinte código ACIMA dela:
Código do hack para para emoticons

Feito isso, procure pela tag no final do documento XML .
Copie o código abaixo e cole ACIMA.

Código:

<script src='http://dl.dropbox.com/u/684300/jquery.cssemoticons.min.js'type='text/javascript'/> <script type='text/javascript'> $(document).ready(function(){ $('.comment-body p').emoticonize({ //delay: 800, //animate: false, //exclude: 'pre, code, .no-emoticons' }); }) </script>

Salve o template.
Copie o endereço abaixo, que são as imagens que editei para esse exemplo e cole em um bloco de notas.

Código:

<img border='0' src='http://2.bp.blogspot.com/_DCJ4PAWLOdE/TLbcdwvITLI/AAAAAAAAE60/9xNKzhbaqbM/s1600/Emoticons.png'/></img>

Volte a página “Editar HTML” , clique na opção “Expandir modelos de widgets” e procure pelo seguinte trecho:

Código:

<data:blogCommentMessage/></p>

Cole EXATAMENTE ABAIXO dele, o endereço das imagens que você copiou em seu bloco de notas.
Visualize e se estiver tudo bem, salve o template.

OBS.: No Internet Explorer que ainda não lê CSS3 os emoticons aparecerão quadradinhos, mas não perdem muito a graça, veja:

Simples e útil. Adorei o tutorial!