Pure CSS-based Emoticons for Blogger! Works with comments too!

I was looking for a simple way or two that would enable me to turn dull-looking text-based emoticons into cool, ‘animated’ (kind of!) emoticons on my other blogs when I stumbled upon these marvelous jQuery-based scripts at github.

The scripts were originally created with WordPress in mind but after I made a few changes, bloggers that are using Blogger can now use them on their blogs and the changes that I have made would allow you to see some nice looking emoticons on your blog posts and comments too. The jQuery-based scripts are pretty cool since they are extremely fast and lightweight! This particular Blogger hack uses some common CSS3 properties to change text-based emoticons to something nice for a change. In another word, the new emoticons are pure CSS-based emoticons!

How do those pure CSS-based emoticons look like?

If you are not satisfied with the above screenshots, you may head over to my other blog and see those pure CSS-based emoticons for Blogger live.

How to turn text-based emoticons on your Blogger-powered blog (blog posts and comments) into pure CSS-based emoticons

Copy this JavaScript library (jQuery) called jquery-1.4.2.min.js, save it as a JavaScript file and host it somewhere reliable. Do the same thing for this jQuery plug-in called jquery.cssemoticons.min.js.

If you’re eager to see those pure CSS-based emoticons or you have no place to host those two JavaScript files mentioned earlier, just use the following ready-made JavaScript files and place them right BEFORE your HTML </head> tag in your Blogger template.

<script src='http://yourjavascript.com/11113125224/jquery-1.4.2.min.js' type='text/javascript'/>

<script src='http://yourjavascript.com/61721415211/cssemoticons-min.js' type='text/javascript'/>

Copy the following JavaScript code snippet and place it right after the above two JavaScript files. It is also must be placed right BEFORE your HTML </head> tag.

<script type='text/javascript'>
$(document).ready(function(){
$(&#39;.post-body, .comments&#39;).emoticonize({
//delay: 500,
//animate: true,
//exclude: &#39;pre, code, .no-emoticons&#39;
});
})
</script>

Now look for ]]></b:skin> in your Blogger template. Once found, copy the following block of CSS rules and place it right BEFORE your ]]></b:skin> tag.

/*
* jQuery CSSEmoticons plugin 0.2.9
*
* 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 Oct 22 1: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;
}

span.css-emoticon.nintendo-controller {
font-size: .8em;
height: 1.2em;
line-height: 1em;
width: 2.7em;
vertical-align: bottom;
border-radius: 0;
-webkit-border-radius: 0;
-moz-border-radius: 0;
background: -webkit-gradient(
linear,
left bottom,
left top,
color-stop(0.09, rgb(116,121,140)),
color-stop(0.55, rgb(165,170,189))
);
background: -moz-linear-gradient(
center bottom,
rgb(116,121,140) 9%,
rgb(165,170,189) 55%
);
}

Yeah, yeah… I know what you are thinking. It’s a huge block of CSS rules alright! If you are not comfortable with placing such huge block of CSS rules in your Blogger template, you can always save the whole block as an external CSS style sheet. If that is your decision, then host it somewhere reliable but don’t forget to place your HTML <link> tag anywhere WITHIN your <head> and </head> tags. It should probably look something like the one shown down below.

<link href="URL to your external CSS style sheet" rel="stylesheet" type="text/css" />

That’s it! You’re all good to go! Now go and save your Blogger template. Enjoy your new pure CSS-based emoticons! :)