Use Smileys or Emoticons in Blogger Blogspot or any other site

The Internet is made of computers and porn. But wherever humans with emotions get involved, emoticons and smileys abound. Which is why we’ll be looking at adding emoticons where no smiley has gone before. Wink I dont know

There was a time, long ago, before the great content / presentation layer schism, when pages consisted solely of HTML. And even then, in those apocryphal times, people still felt the need to adorn their web creations with smileys. Silly So, if you have a purely HTML page, this is what you do.

A. Simple HTML

Follow the tutorials in Sources 1-3, or follow the one here. This one has only a handful of smileys substitution, but those are the most commonly used:

1. In the HTML source code of your page, enter the following code right on top of the </head> element:

function replaceText() {
// no support
if(!document.getElementById) {
return;
}

bodyText = document.getElementById("body");
theText = bodyText.innerHTML;

// replace
theText = theText.replace(/;\)/g,'<img src="http://photos1.blogger.com/blogger/7678/802/1600/wink.gif" alt=";)" />');
theText = theText.replace(/;-\)/g,'<img src="http://photos1.blogger.com/blogger/7678/802/1600/wink.gif" alt=";-)" />');
theText = theText.replace(/:D/g,'<img src="http://photos1.blogger.com/blogger/7678/802/1600/biggrin.gif" alt=":D" />');
theText = theText.replace(/:-D/g,'<img src="http://photos1.blogger.com/blogger/7678/802/1600/biggrin.gif" alt=":-D" />');
theText = theText.replace(/B\)/g,'<img src="http://photos1.blogger.com/blogger/7678/802/1600/cool.gif" alt="B)" />');
theText = theText.replace(/B-\)/g,'<img src="http://photos1.blogger.com/blogger/7678/802/1600/cool.gif" alt="B-)" />');
theText = theText.replace(/:x/g,'<img src="http://photos1.blogger.com/blogger/7678/802/1600/mad.gif" alt=":x" />');
theText = theText.replace(/:X/g,'<img src="http://photos1.blogger.com/blogger/7678/802/1600/mad.gif" alt=":X" />');
theText = theText.replace(/:-x/g,'<img src="http://photos1.blogger.com/blogger/7678/802/1600/mad.gif" alt=":-x" />');
theText = theText.replace(/:-X/g,'<img src="http://photos1.blogger.com/blogger/7678/802/1600/mad.gif" alt=":-X" />');
theText = theText.replace(/:-\(/g,'<img src="http://photos1.blogger.com/blogger/7678/802/1600/sad.gif" alt=":-(" />');
theText = theText.replace(/:\(/g,'<img src="http://photos1.blogger.com/blogger/7678/802/1600/sad.gif" alt=":(" />');
theText = theText.replace(/:o/g,'<img src="http://photos1.blogger.com/blogger/7678/802/1600/ohmy.gif" alt=":o" />');
theText = theText.replace(/:O/g,'<img src="http://photos1.blogger.com/blogger/7678/802/1600/ohmy.gif" alt=":O" />');
theText = theText.replace(/:-o/g,'<img src="http://photos1.blogger.com/blogger/7678/802/1600/ohmy.gif" alt=":-o" />');
theText = theText.replace(/:-O/g,'<img src="http://photos1.blogger.com/blogger/7678/802/1600/ohmy.gif" alt=":-O" />');
theText = theText.replace(/:p/g,'<img src="http://photos1.blogger.com/blogger/7678/802/1600/tongue.gif" alt=":p" />');
theText = theText.replace(/:-p/g,'<img src="http://photos1.blogger.com/blogger/7678/802/1600/tongue.gif" alt=":-p" />');
theText = theText.replace(/:-P/g,'<img src="http://photos1.blogger.com/blogger/7678/802/1600/tongue.gif" alt=":-P" />');
theText = theText.replace(/:P/g,'<img src="http://photos1.blogger.com/blogger/7678/802/1600/tongue.gif" alt=":P" />');
theText = theText.replace(/:-\)/g,'<img src="http://photos1.blogger.com/blogger/7678/802/1600/smile.gif" alt=":-)" />');
theText = theText.replace(/:\)/g,'<img src="http://photos1.blogger.com/blogger/7678/802/1600/smile.gif" alt=":)" />');

bodyText.innerHTML = theText;
}

-->
</script>

<!--End BloggerEmoticons—>

2. Modify the <body> tag to look like the following (if there are other modifiers in the <body> tag already, leave them there):

<body id="body" onload="replaceText();">

3. That’s it. You’re done. Congratulations!

B. Blogger Editor

I do not usually use the Blogger Editor, I find it cumbersome and underpowered. However, sometimes I do, and there are those who use it regularly. And they would also like an easier, automated way to use smileys. One way is to make the substitutions yourself, directly, using the following codes:

:)
happy
<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/1.gif" width="18" height="18" border="0">

:(
sad

<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/2.gif" width="18" height="18" border="0">

;)
winking

<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/3.gif" width="18" height="18" border="0">

:D
big grin

<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/4.gif" width="18" height="18" border="0">

;;)
batting eyelashes

<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/5.gif" width="18" height="18" border="0">

>:D<
big hug

<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/6.gif" width="18" height="18" border="0">

:-/
confused

<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/7.gif" width="18" height="18" border="0">

:x
love struck

<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/8.gif" width="18" height="18" border="0">

:">
blushing

<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/9.gif" width="18" height="18" border="0">

:P
tongue

<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/10.gif" width="18" height="18" border="0">

:-*
kiss

<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/11.gif" width="18" height="18" border="0">

=((
broken heart

<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/12.gif" width="18" height="18" border="0">

:-O
surprise

<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/13.gif" width="18" height="18" border="0">

X(
angry

<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/14.gif" width="18" height="18" border="0">

:>
smug

<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/15.gif" width="18" height="18" border="0">

B-)
cool

<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/16.gif" width="18" height="18" border="0">

:-S
worried

<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/17.gif" width="18" height="18" border="0">

#:-S
whew!

<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/18.gif" width="34" height="18" border="0">

>:)
devil

<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/19.gif" width="18" height="18" border="0">

:((
crying

<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/20.gif" width="22" height="18" border="0">

:))
laughing

<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/21.gif" width="18" height="18" border="0">

:
straight face

<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/22.gif" width="18" height="18" border="0">

/:)
raised eyebrow

<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/23.gif" width="18" height="18" border="0">

=))
rolling on the floor

<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/24.gif" width="30" height="18" border="0">

O:-)
angel

<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/25.gif" width="30" height="18" border="0">

:-B
nerd

<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/26.gif" width="24" height="18" border="0">

=;
talk to the hand

<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/27.gif" width="18" height="18" border="0">

Yahoo hidden emoticons

:o3
puppy dog eyes - New!

<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/108.gif" width="31" height="18" border="0">

:-??
I don't know

<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/106.gif" width="40" height="18" border="0">

%-(
not listening

<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/107.gif" width="52" height="18" border="0">

:@)
pig

<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/49.gif" width="18" height="18" border="0">

3:-O
cow

<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/50.gif" width="18" height="18" border="0">

:()
monkey

<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/51.gif" width="21" height="18" border="0">

~:>
chicken

<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/52.gif" width="18" height="18" border="0">

@};-
rose

<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/53.gif" width="18" height="18" border="0">

%%-
good luck

<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/54.gif" width="18" height="18" border="0">

**==
flag

<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/55.gif" width="25" height="18" border="0">

(~~)
pumpkin

<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/56.gif" width="17" height="18" border="0">

~O)
coffee

<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/57.gif" width="18" height="18" border="0">

*-:)
idea

<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/58.gif" width="30" height="18" border="0">

8-X
skull

<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/59.gif" width="18" height="18" border="0">

=:)
bug

<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/60.gif" width="20" height="18" border="0">

>-)
alien

<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/61.gif" width="18" height="18" border="0">

:-L
frustrated

<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/62.gif" width="18" height="18" border="0">

[-O<
praying

<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/63.gif" width="18" height="18" border="0">

$-)
money eyes

<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/64.gif" width="18" height="18" border="0">

:-"
whistling

<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/65.gif" width="22" height="18" border="0">

b-(
feeling beat up

<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/66.gif" width="18" height="18" border="0">

:)>-
peace sign

<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/67.gif" width="22" height="18" border="0">

[-X
shame on you

<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/68.gif" width="22" height="18" border="0">

\:D/
dancing

<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/69.gif" width="26" height="18" border="0">

>:/
bring it on

<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/70.gif" width="23" height="18" border="0">

;))
hee hee

<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/71.gif" width="18" height="18" border="0">

:-@
chatterbox

<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/76.gif" width="36" height="18" border="0">

^:)^
not worthy

<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/77.gif" width="32" height="18" border="0">

:-j
oh go on

<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/78.gif" width="26" height="18" border="0">

(*)
star

<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/79.gif" width="18" height="18" border="0">

o->
hiro

<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/72.gif" width="18" height="18" border="0">

o=>
billy

<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/73.gif" width="18" height="18" border="0">

o-+
april

<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/74.gif" width="18" height="18" border="0">

(%)
yin yang

<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/75.gif" width="18" height="18" border="0">

OK ok, you might just say, but isn’t there a way to make these substitutions automatically? Of course there is! However, this first hack is rather complicated (4). You need to be using only Firefox AND modify the template as follows:

Download and install Firefox, if you don’t already have it.
In Firefox, install greasemonkey, then this script:
From your Dashboard, go to Layout –> Edit HTML and find (Ctrl+F) this code: ]]></b:skin> and paste following codes above it:
img.emoticon { padding: 0; margin: 0; border: 0; }
Click Save Template and you’re done! Your new Blogger editor should look like this:

A slightly better version of this hack (as it browser independent) is provided by bloggerfocus (5):

1. As in number 3) above, go to Dashboard –> Layout –> Edit HTML and search (Ctrl+F) this code ]]></b:skin>

2. Copy and paste the following underneath:

<script src='http://scrapur.com/index/wp-content/uploads/2008/02/smile.js' type='text/javascript'/>

capture of b:skin scrapur script underneath

3. Consider pasting the code from the smile.js script in a file you can host yourself; this way, you would not be using scrapur’s bandwidth and if he ever changes his stuff, yours would still work:

function addSmiley(){
var postBodyClass = (postBodyClass) ? postBodyClass : 'post-body';
var d = document.getElementsByClassName(postBodyClass);
for(var i=0;i<d.length;i++){
        d[i].innerHTML = d[i].innerHTML.replace(/\s:-*\)/g, ' <img src="http://www.geocities.com/kendhin_x/blog/smile/yahoo_smiley.gif" style="border:0; margin:0; padding:0;" id="new" /> ');
        d[i].innerHTML = d[i].innerHTML.replace(/\s;-*\)/g, ' <img src="http://www.geocities.com/kendhin_x/blog/smile/yahoo_wink.gif" style="border:0; margin:0; padding:0;" id="new" /> ');
        d[i].innerHTML = d[i].innerHTML.replace(/\s:-*\$/g, ' <img src="http://www.geocities.com/kendhin_x/blog/smile/yahoo_blush.gif" style="border:0; margin:0; padding:0;" id="new" /> ');
        d[i].innerHTML = d[i].innerHTML.replace(/\s:-*\(/g, ' <img src="http://www.geocities.com/kendhin_x/blog/smile/yahoo_sad.gif" style="border:0; margin:0; padding:0;" id="new" /> ');
        d[i].innerHTML = d[i].innerHTML.replace(/\s:-*D/g, ' <img src="http://www.geocities.com/kendhin_x/blog/smile/yahoo_bigsmile.gif" style="border:0; margin:0; padding:0;" id="new" /> ');
        d[i].innerHTML = d[i].innerHTML.replace(/\s:-*p/g, '<img src="http://www.geocities.com/kendhin_x/blog/smile/yahoo_tongue.gif" style="border:0; margin:0; padding:0;" id="new" /> ');
        d[i].innerHTML = d[i].innerHTML.replace(/\s:-*k/g, ' <img src="http://www.geocities.com/kendhin_x/blog/smile/yahoo_kiss.gif" style="border:0; margin:0; padding:0;" id="new" /> ');
        d[i].innerHTML = d[i].innerHTML.replace(/\s:-*\@/g, ' <img src="http://www.geocities.com/kendhin_x/blog/smile/yahoo_angry.gif" style="border:0; margin:0; padding:0;" id="new" /> ');
        d[i].innerHTML = d[i].innerHTML.replace(/\s:-*\#/g, ' <img src="http://www.geocities.com/kendhin_x/blog/smile/yahoo_witsend.gif" style="border:0; margin:0; padding:0;" id="new" /> ');
        d[i].innerHTML = d[i].innerHTML.replace(/\s:-*x/g, ' <img src="http://www.geocities.com/kendhin_x/blog/smile/yahoo_shhhh.gif" style="border:0; margin:0; padding:0;" id="new" /> ');
        d[i].innerHTML = d[i].innerHTML.replace(/\s:-*o/g, ' <img src="http://www.geocities.com/kendhin_x/blog/smile/yahoo_ooooh.gif" style="border:0; margin:0; padding:0;" id="new" /> ');
        d[i].innerHTML = d[i].innerHTML.replace(/\s:-*~/g, ' <img src="http://www.geocities.com/kendhin_x/blog/smile/yahoo_party.gif" style="border:0; margin:0; padding:0;" id="new" /> ');
        d[i].innerHTML = d[i].innerHTML.replace(/\s:-*L/g, ' <img src="http://www.geocities.com/kendhin_x/blog/smile/yahoo_love.gif" style="border:0; margin:0; padding:0;" id="new" /> ');
        d[i].innerHTML = d[i].innerHTML.replace(/\s:-*s/g, ' <img src="http://www.geocities.com/kendhin_x/blog/smile/yahoo_sleep.gif" style="border:0; margin:0; padding:0;" id="new" /> ');
        d[i].innerHTML = d[i].innerHTML.replace(/\s:-*y/g, ' <img src="http://www.geocities.com/kendhin_x/blog/smile/yahoo_pray.gif" style="border:0; margin:0; padding:0;" id="new" /> ');
        d[i].innerHTML = d[i].innerHTML.replace(/\s:-*t/g, ' <img src="http://www.geocities.com/kendhin_x/blog/smile/yahoo_think.gif" style="border:0; margin:0; padding:0;" id="new" /> ');
        d[i].innerHTML = d[i].innerHTML.replace(/\s:-*O/g, ' <img src="http://www.geocities.com/kendhin_x/blog/smile/yahoo_laughloud.gif" style="border:0; margin:0; padding:0;" id="new" /> ');
        d[i].innerHTML = d[i].innerHTML.replace(/\s:-*r/g, ' <img src="http://www.geocities.com/kendhin_x/blog/smile/yahoo_rotfl.gif" style="border:0; margin:0; padding:0;" id="new" /> ');
        d[i].innerHTML = d[i].innerHTML.replace(/\s:-*v/g, ' <img src="http://www.geocities.com/kendhin_x/blog/smile/yahoo_devil.gif" style="border:0; margin:0; padding:0;" id="new" /> ');
        d[i].innerHTML = d[i].innerHTML.replace(/\s:-*d/g, ' <img src="http://www.geocities.com/kendhin_x/blog/smile/yahoo_daydream.gif" style="border:0; margin:0; padding:0;" id="new" /> ');
        d[i].innerHTML = d[i].innerHTML.replace(/\s:-*f/g, ' <img src="http://www.geocities.com/kendhin_x/blog/smile/yahoo_sweating.gif" style="border:0; margin:0; padding:0;" id="new" /> ');
        d[i].innerHTML = d[i].innerHTML.replace(/\s:-*c/g, ' <img src="http://www.geocities.com/kendhin_x/blog/smile/yahoo_cry.gif" style="border:0; margin:0; padding:0;" id="new" /> ');
        d[i].innerHTML = d[i].innerHTML.replace(/\s:-*z/g, ' <img src="http://www.geocities.com/kendhin_x/blog/smile/senang.gif" style="border:0; margin:0; padding:0;" id="new" /> ');

}

var d = document.getElementsByClassName('comment-body');
for(var i=0;i<d.length;i++){
        d[i].innerHTML = d[i].innerHTML.replace(/\s:-*\)/g, ' <img src="http://www.geocities.com/kendhin_x/blog/smile/yahoo_smiley.gif" style="border:0; margin:0; padding:0;" id="new" /> ');
        d[i].innerHTML = d[i].innerHTML.replace(/\s;-*\)/g, ' <img src="http://www.geocities.com/kendhin_x/blog/smile/yahoo_wink.gif" style="border:0; margin:0; padding:0;" id="new" /> ');
        d[i].innerHTML = d[i].innerHTML.replace(/\s:-*\$/g, ' <img src="http://www.geocities.com/kendhin_x/blog/smile/yahoo_blush.gif" style="border:0; margin:0; padding:0;" id="new" /> ');
        d[i].innerHTML = d[i].innerHTML.replace(/\s:-*\(/g, ' <img src="http://www.geocities.com/kendhin_x/blog/smile/yahoo_sad.gif" style="border:0; margin:0; padding:0;" id="new" /> ');
        d[i].innerHTML = d[i].innerHTML.replace(/\s:-*D/g, ' <img src="http://www.geocities.com/kendhin_x/blog/smile/yahoo_bigsmile.gif" style="border:0; margin:0; padding:0;" id="new" /> ');
        d[i].innerHTML = d[i].innerHTML.replace(/\s:-*p/g, '<img src="http://www.geocities.com/kendhin_x/blog/smile/yahoo_tongue.gif" style="border:0; margin:0; padding:0;" id="new" /> ');
        d[i].innerHTML = d[i].innerHTML.replace(/\s:-*k/g, ' <img src="http://www.geocities.com/kendhin_x/blog/smile/yahoo_kiss.gif" style="border:0; margin:0; padding:0;" id="new" /> ');
        d[i].innerHTML = d[i].innerHTML.replace(/\s:-*\@/g, ' <img src="http://www.geocities.com/kendhin_x/blog/smile/yahoo_angry.gif" style="border:0; margin:0; padding:0;" id="new" /> ');
        d[i].innerHTML = d[i].innerHTML.replace(/\s:-*\#/g, ' <img src="http://www.geocities.com/kendhin_x/blog/smile/yahoo_witsend.gif" style="border:0; margin:0; padding:0;" id="new" /> ');
        d[i].innerHTML = d[i].innerHTML.replace(/\s:-*x/g, ' <img src="http://www.geocities.com/kendhin_x/blog/smile/yahoo_shhhh.gif" style="border:0; margin:0; padding:0;" id="new" /> ');
        d[i].innerHTML = d[i].innerHTML.replace(/\s:-*o/g, ' <img src="http://www.geocities.com/kendhin_x/blog/smile/yahoo_ooooh.gif" style="border:0; margin:0; padding:0;" id="new" /> ');
        d[i].innerHTML = d[i].innerHTML.replace(/\s:-*~/g, ' <img src="http://www.geocities.com/kendhin_x/blog/smile/yahoo_party.gif" style="border:0; margin:0; padding:0;" id="new" /> ');
        d[i].innerHTML = d[i].innerHTML.replace(/\s:-*L/g, ' <img src="http://www.geocities.com/kendhin_x/blog/smile/yahoo_love.gif" style="border:0; margin:0; padding:0;" id="new" /> ');
        d[i].innerHTML = d[i].innerHTML.replace(/\s:-*s/g, ' <img src="http://www.geocities.com/kendhin_x/blog/smile/yahoo_sleep.gif" style="border:0; margin:0; padding:0;" id="new" /> ');
        d[i].innerHTML = d[i].innerHTML.replace(/\s:-*y/g, ' <img src="http://www.geocities.com/kendhin_x/blog/smile/yahoo_pray.gif" style="border:0; margin:0; padding:0;" id="new" /> ');
        d[i].innerHTML = d[i].innerHTML.replace(/\s:-*t/g, ' <img src="http://www.geocities.com/kendhin_x/blog/smile/yahoo_think.gif" style="border:0; margin:0; padding:0;" id="new" /> ');
        d[i].innerHTML = d[i].innerHTML.replace(/\s:-*O/g, ' <img src="http://www.geocities.com/kendhin_x/blog/smile/yahoo_laughloud.gif" style="border:0; margin:0; padding:0;" id="new" /> ');
        d[i].innerHTML = d[i].innerHTML.replace(/\s:-*r/g, ' <img src="http://www.geocities.com/kendhin_x/blog/smile/yahoo_rotfl.gif" style="border:0; margin:0; padding:0;" id="new" /> ');
        d[i].innerHTML = d[i].innerHTML.replace(/\s:-*v/g, ' <img src="http://www.geocities.com/kendhin_x/blog/smile/yahoo_devil.gif" style="border:0; margin:0; padding:0;" id="new" /> ');
        d[i].innerHTML = d[i].innerHTML.replace(/\s:-*d/g, ' <img src="http://www.geocities.com/kendhin_x/blog/smile/yahoo_daydream.gif" style="border:0; margin:0; padding:0;" id="new" /> ');
        d[i].innerHTML = d[i].innerHTML.replace(/\s:-*f/g, ' <img src="http://www.geocities.com/kendhin_x/blog/smile/yahoo_sweating.gif" style="border:0; margin:0; padding:0;" id="new" /> ');
        d[i].innerHTML = d[i].innerHTML.replace(/\s:-*c/g, ' <img src="http://www.geocities.com/kendhin_x/blog/smile/yahoo_cry.gif" style="border:0; margin:0; padding:0;" id="new" /> ');
        d[i].innerHTML = d[i].innerHTML.replace(/\s:-*z/g, ' <img src="http://www.geocities.com/kendhin_x/blog/smile/senang.gif" style="border:0; margin:0; padding:0;" id="new" /> ');

}

var d = document.getElementsByClassName('comment-body-author');
for(var i=0;i<d.length;i++){
        d[i].innerHTML = d[i].innerHTML.replace(/\s:-*\)/g, ' <img src="http://www.geocities.com/kendhin_x/blog/smile/yahoo_smiley.gif" style="border:0; margin:0; padding:0;" id="new" /> ');
        d[i].innerHTML = d[i].innerHTML.replace(/\s;-*\)/g, ' <img src="http://www.geocities.com/kendhin_x/blog/smile/yahoo_wink.gif" style="border:0; margin:0; padding:0;" id="new" /> ');
        d[i].innerHTML = d[i].innerHTML.replace(/\s:-*\$/g, ' <img src="http://www.geocities.com/kendhin_x/blog/smile/yahoo_blush.gif" style="border:0; margin:0; padding:0;" id="new" /> ');
        d[i].innerHTML = d[i].innerHTML.replace(/\s:-*\(/g, ' <img src="http://www.geocities.com/kendhin_x/blog/smile/yahoo_sad.gif" style="border:0; margin:0; padding:0;" id="new" /> ');
        d[i].innerHTML = d[i].innerHTML.replace(/\s:-*D/g, ' <img src="http://www.geocities.com/kendhin_x/blog/smile/yahoo_bigsmile.gif" style="border:0; margin:0; padding:0;" id="new" /> ');
        d[i].innerHTML = d[i].innerHTML.replace(/\s:-*p/g, '<img src="http://www.geocities.com/kendhin_x/blog/smile/yahoo_tongue.gif" style="border:0; margin:0; padding:0;" id="new" /> ');
        d[i].innerHTML = d[i].innerHTML.replace(/\s:-*k/g, ' <img src="http://www.geocities.com/kendhin_x/blog/smile/yahoo_kiss.gif" style="border:0; margin:0; padding:0;" id="new" /> ');
        d[i].innerHTML = d[i].innerHTML.replace(/\s:-*\@/g, ' <img src="http://www.geocities.com/kendhin_x/blog/smile/yahoo_angry.gif" style="border:0; margin:0; padding:0;" id="new" /> ');
        d[i].innerHTML = d[i].innerHTML.replace(/\s:-*\#/g, ' <img src="http://www.geocities.com/kendhin_x/blog/smile/yahoo_witsend.gif" style="border:0; margin:0; padding:0;" id="new" /> ');
        d[i].innerHTML = d[i].innerHTML.replace(/\s:-*x/g, ' <img src="http://www.geocities.com/kendhin_x/blog/smile/yahoo_shhhh.gif" style="border:0; margin:0; padding:0;" id="new" /> ');
        d[i].innerHTML = d[i].innerHTML.replace(/\s:-*o/g, ' <img src="http://www.geocities.com/kendhin_x/blog/smile/yahoo_ooooh.gif" style="border:0; margin:0; padding:0;" id="new" /> ');
        d[i].innerHTML = d[i].innerHTML.replace(/\s:-*~/g, ' <img src="http://www.geocities.com/kendhin_x/blog/smile/yahoo_party.gif" style="border:0; margin:0; padding:0;" id="new" /> ');
        d[i].innerHTML = d[i].innerHTML.replace(/\s:-*L/g, ' <img src="http://www.geocities.com/kendhin_x/blog/smile/yahoo_love.gif" style="border:0; margin:0; padding:0;" id="new" /> ');
        d[i].innerHTML = d[i].innerHTML.replace(/\s:-*s/g, ' <img src="http://www.geocities.com/kendhin_x/blog/smile/yahoo_sleep.gif" style="border:0; margin:0; padding:0;" id="new" /> ');
        d[i].innerHTML = d[i].innerHTML.replace(/\s:-*y/g, ' <img src="http://www.geocities.com/kendhin_x/blog/smile/yahoo_pray.gif" style="border:0; margin:0; padding:0;" id="new" /> ');
        d[i].innerHTML = d[i].innerHTML.replace(/\s:-*t/g, ' <img src="http://www.geocities.com/kendhin_x/blog/smile/yahoo_think.gif" style="border:0; margin:0; padding:0;" id="new" /> ');
        d[i].innerHTML = d[i].innerHTML.replace(/\s:-*O/g, ' <img src="http://www.geocities.com/kendhin_x/blog/smile/yahoo_laughloud.gif" style="border:0; margin:0; padding:0;" id="new" /> ');
        d[i].innerHTML = d[i].innerHTML.replace(/\s:-*r/g, ' <img src="http://www.geocities.com/kendhin_x/blog/smile/yahoo_rotfl.gif" style="border:0; margin:0; padding:0;" id="new" /> ');
        d[i].innerHTML = d[i].innerHTML.replace(/\s:-*v/g, ' <img src="http://www.geocities.com/kendhin_x/blog/smile/yahoo_devil.gif" style="border:0; margin:0; padding:0;" id="new" /> ');
        d[i].innerHTML = d[i].innerHTML.replace(/\s:-*d/g, ' <img src="http://www.geocities.com/kendhin_x/blog/smile/yahoo_daydream.gif" style="border:0; margin:0; padding:0;" id="new" /> ');
        d[i].innerHTML = d[i].innerHTML.replace(/\s:-*f/g, ' <img src="http://www.geocities.com/kendhin_x/blog/smile/yahoo_sweating.gif" style="border:0; margin:0; padding:0;" id="new" /> ');
        d[i].innerHTML = d[i].innerHTML.replace(/\s:-*c/g, ' <img src="http://www.geocities.com/kendhin_x/blog/smile/yahoo_cry.gif" style="border:0; margin:0; padding:0;" id="new" /> ');
        d[i].innerHTML = d[i].innerHTML.replace(/\s:-*z/g, ' <img src="http://www.geocities.com/kendhin_x/blog/smile/senang.gif" style="border:0; margin:0; padding:0;" id="new" /> ');
}

var d = document.getElementsByClassName('widget-content');
for(var i=0;i<d.length;i++){
        d[i].innerHTML = d[i].innerHTML.replace(/\s:-*\)/g, ' <img src="http://www.geocities.com/kendhin_x/blog/smile/yahoo_smiley.gif" style="border:0; margin:0; padding:0;" id="new" /> ');
        d[i].innerHTML = d[i].innerHTML.replace(/\s;-*\)/g, ' <img src="http://www.geocities.com/kendhin_x/blog/smile/yahoo_wink.gif" style="border:0; margin:0; padding:0;" id="new" /> ');
        d[i].innerHTML = d[i].innerHTML.replace(/\s:-*\$/g, ' <img src="http://www.geocities.com/kendhin_x/blog/smile/yahoo_blush.gif" style="border:0; margin:0; padding:0;" id="new" /> ');
        d[i].innerHTML = d[i].innerHTML.replace(/\s:-*\(/g, ' <img src="http://www.geocities.com/kendhin_x/blog/smile/yahoo_sad.gif" style="border:0; margin:0; padding:0;" id="new" /> ');
        d[i].innerHTML = d[i].innerHTML.replace(/\s:-*D/g, ' <img src="http://www.geocities.com/kendhin_x/blog/smile/yahoo_bigsmile.gif" style="border:0; margin:0; padding:0;" id="new" /> ');
        d[i].innerHTML = d[i].innerHTML.replace(/\s:-*p/g, '<img src="http://www.geocities.com/kendhin_x/blog/smile/yahoo_tongue.gif" style="border:0; margin:0; padding:0;" id="new" /> ');
        d[i].innerHTML = d[i].innerHTML.replace(/\s:-*k/g, ' <img src="http://www.geocities.com/kendhin_x/blog/smile/yahoo_kiss.gif" style="border:0; margin:0; padding:0;" id="new" /> ');
        d[i].innerHTML = d[i].innerHTML.replace(/\s:-*\@/g, ' <img src="http://www.geocities.com/kendhin_x/blog/smile/yahoo_angry.gif" style="border:0; margin:0; padding:0;" id="new" /> ');
        d[i].innerHTML = d[i].innerHTML.replace(/\s:-*\#/g, ' <img src="http://www.geocities.com/kendhin_x/blog/smile/yahoo_witsend.gif" style="border:0; margin:0; padding:0;" id="new" /> ');
        d[i].innerHTML = d[i].innerHTML.replace(/\s:-*x/g, ' <img src="http://www.geocities.com/kendhin_x/blog/smile/yahoo_shhhh.gif" style="border:0; margin:0; padding:0;" id="new" /> ');
        d[i].innerHTML = d[i].innerHTML.replace(/\s:-*o/g, ' <img src="http://www.geocities.com/kendhin_x/blog/smile/yahoo_ooooh.gif" style="border:0; margin:0; padding:0;" id="new" /> ');
        d[i].innerHTML = d[i].innerHTML.replace(/\s:-*~/g, ' <img src="http://www.geocities.com/kendhin_x/blog/smile/yahoo_party.gif" style="border:0; margin:0; padding:0;" id="new" /> ');
        d[i].innerHTML = d[i].innerHTML.replace(/\s:-*L/g, ' <img src="http://www.geocities.com/kendhin_x/blog/smile/yahoo_love.gif" style="border:0; margin:0; padding:0;" id="new" /> ');
        d[i].innerHTML = d[i].innerHTML.replace(/\s:-*s/g, ' <img src="http://www.geocities.com/kendhin_x/blog/smile/yahoo_sleep.gif" style="border:0; margin:0; padding:0;" id="new" /> ');
        d[i].innerHTML = d[i].innerHTML.replace(/\s:-*y/g, ' <img src="http://www.geocities.com/kendhin_x/blog/smile/yahoo_pray.gif" style="border:0; margin:0; padding:0;" id="new" /> ');
        d[i].innerHTML = d[i].innerHTML.replace(/\s:-*t/g, ' <img src="http://www.geocities.com/kendhin_x/blog/smile/yahoo_think.gif" style="border:0; margin:0; padding:0;" id="new" /> ');
        d[i].innerHTML = d[i].innerHTML.replace(/\s:-*O/g, ' <img src="http://www.geocities.com/kendhin_x/blog/smile/yahoo_laughloud.gif" style="border:0; margin:0; padding:0;" id="new" /> ');
        d[i].innerHTML = d[i].innerHTML.replace(/\s:-*r/g, ' <img src="http://www.geocities.com/kendhin_x/blog/smile/yahoo_rotfl.gif" style="border:0; margin:0; padding:0;" id="new" /> ');
        d[i].innerHTML = d[i].innerHTML.replace(/\s:-*v/g, ' <img src="http://www.geocities.com/kendhin_x/blog/smile/yahoo_devil.gif" style="border:0; margin:0; padding:0;" id="new" /> ');
        d[i].innerHTML = d[i].innerHTML.replace(/\s:-*d/g, ' <img src="http://www.geocities.com/kendhin_x/blog/smile/yahoo_daydream.gif" style="border:0; margin:0; padding:0;" id="new" /> ');
        d[i].innerHTML = d[i].innerHTML.replace(/\s:-*f/g, ' <img src="http://www.geocities.com/kendhin_x/blog/smile/yahoo_sweating.gif" style="border:0; margin:0; padding:0;" id="new" /> ');
        d[i].innerHTML = d[i].innerHTML.replace(/\s:-*c/g, ' <img src="http://www.geocities.com/kendhin_x/blog/smile/yahoo_cry.gif" style="border:0; margin:0; padding:0;" id="new" /> ');
        d[i].innerHTML = d[i].innerHTML.replace(/\s:-*z/g, ' <img src="http://www.geocities.com/kendhin_x/blog/smile/senang.gif" style="border:0; margin:0; padding:0;" id="new" /> ');
}
}

addLoadEvent(addSmiley);

4. Use the following keywords below to display your preferred smiley/emoticon on your blog post. In order to add a smiley/emoticon to your blog post, press the SPACE key first followed by the shortcut that represents the smiley you want.

–> –> :p –>:D –> :$ –> ;) –> :@ –> :# –> :k –> :x –> :o –> :O –> :L –> :r –> :s –> :y –> :~ –> :v –> :f –> :d –> :c –> :z –>

C. Blogger Only

If you’ve gone through all this mumbo-jumbo. You’re probably tired. Get some sleep or take a break and run around your building. Or grab your bottom, jump around and sing a happy tune. Done? Party

Alright, cuz this may be the best hack yet. I found it on kimyboy’s blog, but I don’t remember the URL (I’ll add it later). I have yet to test it, so I’m not sure it works. The following part should go in your <head>. Literally.

<script type='text/javascript'>
//<![CDATA[
document.getElementsByClassName = function(clsName){
    var retVal = new Array();
    var elements = document.getElementsByTagName("*");
    for(var i = 0;i < elements.length;i++){
        if(elements[i].className.indexOf(" ") >= 0){
            var classes = elements[i].className.split(" ");
            for(var j = 0;j < classes.length;j++){
                if(classes[j] == clsName)
                    retVal.push(elements[i]);
            }
        }
        else if(elements[i].className == clsName)
            retVal.push(elements[i]);
    }
    return retVal;
}//taken from Netlobo.com (http://www.netlobo.com/javascript_getelementsbyclassname.html)

function addSmiley(dummy){
var d = [], i=0, def = ['post-body','entry-content','comment-body','widget-content','author-comment'];

for(i=0;i<def.length;i++){
    var content = document.getElementsByClassName(def[i]);
    for(var j=0;j<content.length;j++)
        d.push(content[j]);
    }

for(i=0;i<arguments.length;i++){
    var content = document.getElementsByClassName(arguments[i]);
    for(var m=0;m<content.length;m++)
        d.push(content[m]);
}

for(var i=0;i<d.length;i++){
        d[i].innerHTML = d[i].innerHTML.replace(/\s:-?\)/g, ' <img src="http://i407.photobucket.com/albums/pp159/kimiboy123/happy.gif" id="new" /> ');
        d[i].innerHTML = d[i].innerHTML.replace(/\s;-?\)/g, ' <img src="http://i15.photobucket.com/albums/a355/deepakr/smileys/wink.gif" id="new" /> ');
        d[i].innerHTML = d[i].innerHTML.replace(/\s:-?$/g, ' <img src="http://i407.photobucket.com/albums/pp159/kimiboy123/sad.gif" id="new" /> ');
        d[i].innerHTML = d[i].innerHTML.replace(/\s:-?D/ig, ' <img src="http://i15.photobucket.com/albums/a355/deepakr/smileys/grin.gif" id="new" /> ');
        d[i].innerHTML = d[i].innerHTML.replace(/\s:-?\$/g, ' <img src="http://i407.photobucket.com/albums/pp159/kimiboy123/blush.gif" id="new" /> ');
        d[i].innerHTML = d[i].innerHTML.replace(/\s:-?L/ig, ' <img src="http://i407.photobucket.com/albums/pp159/kimiboy123/lol.gif" id="new" /> ');
        d[i].innerHTML = d[i].innerHTML.replace(/\s:-?P/ig, ' <img src="http://i15.photobucket.com/albums/a355/deepakr/smileys/tongue.gif" id="new" /> ');
        d[i].innerHTML = d[i].innerHTML.replace(/\s=-?$/g, ' <img src="http://i407.photobucket.com/albums/pp159/kimiboy123/laughfloor.gif" id="new" /> ');
        d[i].innerHTML = d[i].innerHTML.replace(/\s:-?O/ig, ' <img src="http://i407.photobucket.com/albums/pp159/kimiboy123/surprised.gif" id="new" /> ');
        d[i].innerHTML = d[i].innerHTML.replace(/\s:-?\//g, ' <img src="http://i407.photobucket.com/albums/pp159/kimiboy123/confused.gif" id="new" /> ');
        d[i].innerHTML = d[i].innerHTML.replace(/\s:-?\\/g, ' <img src="http://i407.photobucket.com/albums/pp159/kimiboy123/confused.gif" id="new" /> ');
    }
}
//]]>
</script>

The above function could probably be called from a widget. If, for instance, you used SyntaxHighlighter, you could call both as such:

<script language='javascript'>
function start() {
addSmiley();
dp.SyntaxHighlighter.BloggerMode();
dp.SyntaxHighlighter.HighlightAll('code', true, true, false, 1, false);
}
window.onload = start;
</script>

The above should automatically make the following substitutions:

:) or :-) {Happy}
:( or :-( {Sad}
;) or ;-) {Wink}
:P or :p or :-P or :-p {Tongue}
:D or :d or :-D or :-d {Grin}
:/ or :\ {Confused}
:L or :l or :-L or :-l {Very Happy}
=) or =-) {Rolling on the floor & laugh}
:$ or :-$ {Blush}
:O or :o or :-O or :-o {Surprised}

And this concludes our visit in the smiley territory. Keep smiling, the world is only getting worse and the smileys more evil!

Sources

Consumed Consumer,smiley, smileys, emoticon, emoticons, hack, blogger, blogspot, improvement, improve, modify, enhance, template, layout, web, webmaster, blogger hack, blogspot hack

Consumed Consumer . org

Article Archive

Read us in your Inbox

Labels or Categories

Subscribe Now!