How to add a unique set of Smileys/Emoticons in your Blogger blog

The ET smileys project kicked off when the Eternal Thinker blog wanted a custom set of emoticons in the blog posts.
After several requests from readers, I am sharing the free custom made smileys for Blogger with all of you! (These emoticons can also be used in Wordpress, Tumblr, or any other blog and website)

Now let your articles communicate more with these original cute smileys. The smiley set contains all the basic smileys plus a collection of interesting icons. You just need to type in the smiley symbol while writing the article, and they'll be converted to smiley images when it is published. Smileys will also display in the threaded comments in Blogger. ^_^ 

Quick Links:

* See the complete list of ET Smileys with their symbols
* If you want to add smileys to another website/blog (other than Blogger), see Smileys for every blog
* If there is a JavaScript conflict while using ET Smileys with other scripts, see How to avoid script conflicts while using ET Smileys


3 simple steps below to add smileys to your Blogger blog:

 1  In your Blogger Dashboard, click the More Options down arrow next to your blog and select Template. In Template page, click the Edit HTML button.
 2  In the template code, Search for the part saying </head>
 3  Now just before </head>, insert the below code:

<script src="https://et-smileys.googlecode.com/svn/trunk/etSmileys_blogger.js" type="text/javascript"/>

And you're done!

Cool, but how to use the ET smileys in my posts?

You can simply type in the emoticon symbols in your post, like in a chat.
The above script replaces the emoticon symbols you type with the corresponding smileys. For this you'll have to know the correct symbol for each smiley.
Example: :) becomes :)

See a full table listing the ET Smileys and their symbols at the end of this post. You can bookmark the above link for quick reference.
You might also like to display a Smiley reference panel over your comment form  

Alternate no-script-conflict no-wait-for-page-load version
The above script will wait till the whole page loads for the smileys to appear. There is an alternate version of the script which will be useful in following situations:

• You have a lot of JavaScript added to your blog, and adding the smiley script results in some script conflict
• Some elements in your page is taking forever to load, and since the page is not loaded, smileys are not appearing
• For some reason you need more control over when exactly the smiley script is called

In any of these cases, you can use the explicit-call version of the ET Smiley Script.  

Troubleshooting for common issues where smileys aren't showing up
One important point you should remember is to put a space before the symbol.. or else the smiley image won't appear.

If you have a custom Blogger template, there might be issues with smileys not appearing.
In such a case just add the etSmileys class in your Blogger template.
Suppose you need to add smileys to a section in the template with CSS id custom-content. The original code would look like something this:

<div id="custom-content"> ... </div>

Now add the new class as follows:

<div id="custom-content" class="etSmileys"> ... </div>

If custom-content is already a CSS class, then new code will look like this:

<div class="custom-content etSmileys"> ... </div>

If you still have queries regarding adding the smileys, feel free to drop me a mail at et (at) eternal-thinker (dot) com :)

Liked the et Smiley set ? Let us know ^_^

Staying up-to-date and Keeping in touch..
Whenever new smileys are added, the script will be updated automatically. But you'll need to know the new symbols for the fresh smileys. So stay connected to know the updates in the smiley data base.

Bookmark this page to stay in touch with the constantly updated smiley list and other related updates.

Put the smiley badge in your blog to let others know of the smileys and also for a quick link!

Embed code:

<p align="center"> <a href="http://eternalthinker.blogspot.com/2009/04/smileys-for-your-blog.html"><img src="https://lh6.googleusercontent.com/-dES4TgSxSzY/Tk4CiI-nViI/AAAAAAAAA18/Zh3lYkvHXqI/s288/smileys%2Bfor%2Bur%2Bblog%2Bbadge%2B%2528eternalthinker.blogspot.com%2529.jpg" /></img></a></p>

Get the smiley updates via Twitter: Follow me on twitter


Spread the Word
So have you decided to use the ET Smileys? Then do a little favor. Kindly link back to this page so that others can also come to know about this smiley set. Thank you!! :)

Updates:
Smiley update #001
Ode to MJ - the Michael Jackson smiley
Smiley update #002
Smiley update #003 - Smiley panel over comment form 
Smiley update 4.0 - just when you thought it couldn't get any better, it did! 
Smiley update #5: The end of all JavaScript Conflicts

The ET Smileys - Complete List:

	smile	:)
	laugh	:D
	lol	:O
	rotfl	:r
	sad	:(
	wink	;)
	tongue	:P
	straight	:|
	blush	:$
	kiss	:k
	angry	:@
	love	:L

	devil	:v
	daydream	:d
	sweat	:f
	cry	:c
	wow	:o
	sick	:~
	nerd	8|
	cool	8)
	bow	:b
	dance	:e
	inverted	:i
	hug	:h

	confused	:/
	laugh	xD
	smile	^_^
	stunned	o_O
	muahaha	:vD
	straight	:||
	dead	xP
	frustrated	>.<
	et!	:et
	rock on	\m/
	heart	<3
	broken	<\3

	angel	:angel
	raise brow	:brow
	party	:party
	on fire	:fire
	frozen	:ice
	musical note	:tone
	rainbow	:rainbow

	vote up	:tup
	vote down	:tdown
	star	:star
	robot	:robot
	kitten	:kitten
	MJ	:mj

Tweet