• Four Create

 
Aew' povo
Vou ensinar aqui hoje um truque muito simples,para colocar Smiles ou Emoticons, como queiram chamar nos comentários 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,vamos lá:

/*
* 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;
}

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

<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlDwqXl0PAoa4WT8BAYI5fL63yAvBBKs4E2DrmXOmLsHtZri-P7LyqHGHAQjY2e-eUf73ixrOvV25g-FicUrOqAx6ccMVxm-4H61_aSAmWOtqWMwKTVOnCXknIsahAGFN8kFL0Qu7AFcI/s1600/Emoticons.png'/></img>

<data:blogCommentMessage/></p>