Smiley emoticons to Blogger, and getElementsByClassName

This small script changes textual smileys into graphical emoticons in post texts and comments in a Blogspot blog. Before trying to apply this, you should know your way around in html and customizing your blog.

getElementsByClassName  

Go to Design -> Edit HTML. Insert this code before </head>-tag:

Data provided by Pastebin.com - Download Raw

This function does not exist on some older browsers, so if it doesn't, we define it here. This getElementsByClassName will be used by many other script snippets, too, so it is useful to add, even if you don't add the actual smiley codes, which we do next.

Smileys/emoticons script and css

In html editing, add this code before </body>-tag:

Data provided by Pastebin.com - Download Raw

You should upload decent smilies for example to your Picasa albums, and change the smilies' urls accordingly. These smilies are just for demonstration. You can use them to test the script. Smilies, now 6 of them, can be added or removed by modifying the code, the code should be self explanatory. See also Smileys test post.

And finally go to Template designer, Advanced, Add CSS, and copy this css definition there:

img.emoticon { 
border: 0; padding: 0; margin: 0; 
-moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none;
}

You may also add the css directly to html instead of using Template designer, if you know what you are doing.

There you go. Now find your favorite smileys and upload them to web, and change the script's img urls. :)