Posts can become dull and boring when no emotion comes through words. After all, blogs are meant to be a ‘personal’ medium, which goes from people to people. What better way to portray emotions than use emoticons and smilies? Blogger itself doesn’t give us a way of doing such trivial things, which is why this is another little script which I ported over from the old Blogger to the new one. It uses simple Regular Expressions to replace the text version of the emoticons to their pictured cousins!
There is nothing much for you to do here actually. You just need to include this one line in your <head> section:
<script src='http://aditya.vm.googlepages.com/addSmiley.js' type='text/javascript'></script>⌘
And you’re done! :) The script assumes the content of your post is housed in an element called ‘post-body’. If it’s different, then just add one more line under that line:
postBodyClass = '';⌘
The script will be called once the page finishes loading, so that it doesn’t hamper with the page load times! The emoticons are housed at my Google Pages account, which should be able to handle the load pretty well. They’re tiny cute icons after all! So enjoy your emoticonified posts!
Major Update: Seeing as how people wanted adding in more classes (or classes that I wasn’t offering by default), I have reworked the script (quite a bit) to fit in probably all kinds of situations. But, in doing so, it is a little more complicated to implement if you want to customise it ‘beyond’ my default settings.⌘
Everything is handled within arrays now. I have pre-programmed the function to add smilies in classes of ‘post-body’, ‘entry-content’ (as asked by Stephen) and ‘comment-body’. These three should suffice ‘most’ cases in Blogger. However, if you don’t fall under any of these, you can make a manual function call at the end of the posts widget in your template. Yes, you ‘will’ have to get your hands dirty for this. So, supposed your template code for your posts look like this:
<b:section id='Blogposts'>
<b:widget id='Blog1' locked='false' title='Blog Posts' type='Blog'/>
</b:section>Your function call for ‘addSmiley()’ will come after this. Now, within the ‘()’, list out all the entry containers you want to add your emoticons to. So, if you want to add smilies to say ‘post-author’ and ‘post-notes’ as well, your code now becomes:
<b:section id='Blogposts'>
<b:widget id='Blog1' locked='false' title='Blog Posts' type='Blog'/>
</b:section>
<script language="javascript">
addSmiley('post-author', 'post-notes');
</script>
And this comes ‘after’ the </b:section> line above. Followed? Good! I’ll restate that this is ‘only’ if your emoticonizing content does not already fall under the classes of ‘post-body’,’comment-body’ and ‘entry-content’.
Another update: Deepak, has come up with a userscript that makes adding emoticons and other basic rich editing features easier to add in your comments made in Blogger. Go catch it at Blogger Hacked
Update: Ramani has listed out the CSS required if you see borders around your emoticons or they appear to squashed up. Also, I had forgotten to list out which emoticons are supported. The general ones are as follows:
:) or :-):( or :-(
:P or :-P
:D or :-D
:$ or :-$
;) or ;-)
Hope this helps! :)