Emoções Compartilhadas – Smiles (Emoticons) Nos Comentários Blogger (CSS3/Jquery)

 
Olá gente querida ♥
Como estou bem alegrinha com a resposta a quimioterapia da Lyra, e agradecida a todos pelas orações e mensagens de conforto, vou 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 (e digitação kkk) quando queremos compartilhar nossas emoções. Só isso!  Vou ensinar como eu coloquei aqui no meu bloguinho, que ficou assim:

…

…

Pode parecer muito comprido, mas é muito simples. Só copiar e colar.

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

Vamos instalar o CSS. Procure pela tal ]]></b:skin> e cole o seguinte código ANTES/ACIMA dela.

/*
* jQuery CSSEmoticons plugin 0.2.8
*
* Copyright (c) 2010 Steve Schwartz (JangoSteve)
*
* Dual licensed under the MIT and GPL licenses:
*   http://www.opensource.org/licenses/mit-license.php
*   http://www.gnu.org/licenses/gpl.html
*
* Date: Sun Sep 20 10:00:00 2010 -0500
*/
/* Basic styles for emoticons */
span.css-emoticon {
  font-family: "Trebuchet MS"; /* seems to give the best and most consistent emoticon appearance */
  font-size: 0.65em;
  font-weight: bold;
  color: #000000;
  display: inline-block;
  overflow: hidden;
  vertical-align: middle;
  transform: rotate(90deg);
  -webkit-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  -o-transform: rotate(90deg);
  width: 1.54em; /* note that this is a multiple of this span's font-size, not containing text font-size */
  height: 1.54em; /* so, relative to containing text, width and height are 0.9 x 1.6 = 1.44em */
  text-align: center;
  padding: 0;
  line-height: 1.34em;
  -moz-border-radius: 1.54em;
  -webkit-border-radius: 1.54em;
  border-radius: 1.54em;
  -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);
  border: 1px solid rgba(0,0,0,0.25);
  background-color: #ffcc00;
  background-image: -webkit-gradient(
    linear,
    right top,
    left 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 right,
    rgb(255,204,0) 41%,
    rgb(255,221,85) 56%,
    rgb(255,238,170) 100%
  );
  -webkit-transition-property:color, background, transform; 
  -webkit-transition-duration: 1s, 1s; 
  -webkit-transition-timing-function: linear, ease-in;
}
/* Styles for two-character emoticons that need more letter-spacing for proportionality */
span.css-emoticon.spaced-emoticon {
  padding-left: 0.2em;
  width: 1.34em;
  letter-spacing: 0.2em;
}
/* This is a dirty dirty hack, because webkit doesn't properly do the padding+width=total-width as it should
   I think the width of the border may be throwing things off, because it's more noticable for small icons */
@media screen and (-webkit-min-device-pixel-ratio:0) {
  span.css-emoticon.spaced-emoticon {
    width: 1.4em;
  }
}
/* Styles for emoticons that need to have smaller characters to fit inside the circle */
span.css-emoticon.small-emoticon {
  font-size: 0.55em;
  width: 1.82em;
  height: 1.82em;
  line-height: 1.72em;
  -moz-border-radius: 1.82em;
  -webkit-border-radius: 1.82em;
  border-radius: 1.82em;
}
span.css-emoticon.small-emoticon.spaced-emoticon {
  padding-left: 0;
  width: 1.82em;
  letter-spacing: 0.1em;
}
/* Styles for additional colors */
span.css-emoticon.red-emoticon {
  background-color: #eb0542;
  background-image: -webkit-gradient(
    linear,
    right top,
    left 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 right,
    rgb(235,5,66) 41%,
    rgb(235,38,90) 56%,
    rgb(250,55,110) 100%
  );
}
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 código 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 endereço abaixo, que são as imagens que eu editei para esse exemplo  e cole em um bloco de notas.

<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1ut_aB1t7js2a2aquwpeh6-WNkIl1AgMDqWKZnYWGY0f1tm7VYYSx5qbSlyerYPb_TRcZvLzbMnrdtCOWvTZPw8RaK3pmaddL5W3KzT22l6dEvH-f31E_4W60xTfQiMUWED78Qyym3Aw/s1600/Emoticons.png'/></img>

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

<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.

Prontinho. Vai ficar igual ao meu!

…

…

Detalhes importantes:
1 - No Internet Explorer (o IEca) que ainda não lê CSS3 (tadinho) os emoticons aparecerão quadradinhos, mas não perdem (muito) a graça, veja:

…

…

2- Aconselho que você salve a imagem dos emoticons e hospede no seu próprio blog, através da caixa de postagens como já ensinei AQUI

…

…

3- O mesmo conselho se aplica ao JQuery (script), que você deve hospedar  em seu site preferido (eu uso Dropbox) e pode baixar AQUI


Esse truque foi apresentado por Alfa Jango  (em inglês) e tem uma excelente página com demonstrações de todos os tipos de Emoticons possíveis de inserir. VEJA DEMO
Eu li e apliquei através do  PIZCOS BLOG (em espanhol)  e daí adaptei para vocês.
Espero que gostem!
Beijo da Mama♥