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. WinkI 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. SillySo, 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:

<!--Start BloggerEmoticons -->

<script type="text/javascript">
<!--

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

sad
:(
sad

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

winking
;)
winking

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

big grin
: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
;;)
batting eyelashes

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

big hug
>: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
:-/
confused

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

love struck
: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
:">
blushing

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

tongue
:P
tongue

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

kiss
:-*
kiss

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

broken heart
=((
broken heart

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

surprise
:-O
surprise

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

angry
X(
angry

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

smug
:>
smug

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

cool
B-)
cool

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

worried
:-S
worried

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

whew!
#:-S
whew!

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

devil
>:)
devil

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

crying
:((
crying

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

laughing
:))
laughing

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

straight face
:
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
/:)
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
=))
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">

angel
O:-)
angel

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

nerd
:-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
=;
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

puppy dog eyes - New!
: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
:-??
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
%-(
not listening

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

pig
:@)
pig

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

cow
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
:()
monkey

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

chicken
~:>
chicken

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

rose
@};-
rose

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

good luck
%%-
good luck

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

flag
**==
flag

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

pumpkin
(~~)
pumpkin

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

coffee
~O)
coffee

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

idea
*-:)
idea

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

skull
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
=:)
bug

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

alien
>-)
alien

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

frustrated
:-L
frustrated

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

praying
[-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
$-)
money eyes

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

whistling
:-"
whistling

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

feeling beat up
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
:)>-
peace sign

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

shame on you
[-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">

dancing
\: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
>:/
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
;))
hee hee

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

chatterbox
:-@
chatterbox

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

not worthy
^:)^
not worthy

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

oh go on
:-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
(*)
star

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

hiro
o->
hiro

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

billy
o=>
billy

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

april
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
(%)
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:

  1. Download and install Firefox, if you don’t already have it.
  2. In Firefox, install greasemonkey, then this script:
  4. From your Dashboard, go to Layout –> Edit HTML and find (Ctrl+F) this code: ]]></b:skin>

    and paste following codes above it:

  5. emoticon_blogger_editorimg.emoticon {
    padding: 0;
    margin: 0;
    border: 0;
    }

  6. 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:

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;
}

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" /> ');
}
}

function addLoadEvent(func) {
  var oldonload = window.onload;
  if (typeof window.onload != 'function') {
    window.onload = func;
  } else {
    window.onload = function() {
      oldonload();
      func();
    }
  }
}

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.

<!-- Smileys -->
<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>
<!-- End Smileys -->

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

<!-- Begin Syntax Highlighter & Smileys -->
<script language='javascript'>
function start() {
addSmiley();
dp.SyntaxHighlighter.BloggerMode();
dp.SyntaxHighlighter.HighlightAll('code', true, true, false, 1, false);
}
window.onload = start;
</script>
<!-- End Syntax Highlighter & Smileys -->

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!

  Tongue out

Sources

  1. http://n2sites.com/bloggeremoticons/
  2. http://bloggeremoticons.be
  3. http://bloggeremoticons.blogspot.com
  4. http://www.blogspottutorial.com/2008/01/add-yahoo-messenger-emoticons-to-blog.html
  5. http://bloggerfocus.com/2008/05/how-to-add-emoticons-to-your-blogspot.html
  6. http://messenger.msn.com/Resource/Emoticons.aspx
  7. http://messenger.yahoo.com/features/emoticons
  8. http://messenger.yahoo.com/features/hiddenemoticons
  9. http://www.aim.com/emoticons.adp
  10. http://aimsmiley.aimawaymessages.com/
  11. http://elouai.com/icq-smiley.php
  12. http://planetsmilies.net/smilies/icq/
  13. http://internet.suite101.com/article.cfm/googleemoticons

 

Comments

Nabel said…
Hi, i just created new smiley code for blogger comment. It do relly work!..
it has more than 1000+ smiley to be used!..
yeah!..

it simple hack.
feel free to use this 2010 smiley hack? visit here.
http://akunabel.blogspot.com/2010/03/add-1000-smiley-emoticon-in-blogger.html
3/02/2010 2:13 am
Post a Comment

Popular posts from this blog