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! :)

Subscribe via RSS or Email:

Related Posts


11 comments:

SOFTECHNOGEEK said...

For Disqus having emotions option

Anonymous said...

SOFTECHNOGEEK,

I'm sorry but I couldn't quite understand you. What are trying to say?

luahan said...

i follow every step but cannot get the emoticons when i try in comments.... why?

i typed :) for smile... but symbol [:)] comes out

Anonymous said...

sofi,

Can you give me the link to the post where you have emoticons on your blog post?

luahan said...

thanx for your kind help. here is the link
http://www.sofipublications.com/2011/12/cintaku-di-awan-biru-5.html

Anonymous said...

sofi,

I have taken a quick look at your live page source and discovered that you have more than one JavaScript library (jQuery) on your blog and this is causing conflicts. This is the reason why those emoticons are not appearing on your blog.

I think I can help you but I need to have the full copy of your Blogger template. Copy your Blogger template to notepad, save and send it as an attached file to me via Google+. You can find the link to my Google+ account from the sidebar on the right-hand side of this blog.

Anonymous said...

sofi,

Since you're a bit hesitant to send me a copy of your Blogger template, please try the proposed solution that I have posted in my latest post. Let me know if you still have conflicts after this. :)

UNYILSAMPIT said...

tes emot comment :)

Marília Ferreira said...

Funcionou muito bem no meu blog, apesar de ser um template personalizado, procurei muito por um código que realmente funcione. Obrigada :)

Ismail Sosse Alaoui said...

test :)

Anonymous said...

thanks for this..:)

Post a Comment

  • Commenters are encouraged to leave comments via OpenID but if you have problems in leaving one via OpenID, please refer to this excellent guide.
  • Comments that add tremendous value to the blog post will not only get approved but also will be personally tweeted (learn how!) by the blogger behind this blog, giving commenters the opportunity to get even more traffic and gain even more exposure to their sites or blogs.
  • Comments that have links in the bodies of comments will never be approved.
  • Preferably comments should be made in English but comments in other languages are also acceptable.