Custom Emoticons in Blogger Posts

If you're tired of the boring text emoticons in your Blogger posts, you're in the right place! This is a tutorial on how to add custom emoticons to all your posts! :robot:

If you don't own your own domain, you'll need to sign up for an photo-hosting account on the web. I use Photobucket for my graphics, but feel free to use whatever works for you - as long as you can access individual links for each emoticon.
1. Download the Javascript from here: http://mltan100.googlepages.com/emoticons.js.
2. Open emoticons.js in Notepad, select all, and copy to clipboard.
3. Open your browser and login to your Blogger account.
4. Select the Template tab.

Click to Enlarge

5. Select Edit HTML and then Proceed.

Click to Enlarge

6. Find the tag </head> (I recommend using CTRL+F and entering "/head" without the quotations).

7. Insert the following code right above the </head> tag:

<script type='text/javascript'>

   //<![CDATA[

   put javascript code here

   //]]>

   </script>

8. Replace the italicized line "put javascript code here" with the copied code from Step 2.

Click to Enlarge

9. Find the line "for(var i=0;i<d.length;i++)" in the code you just pasted. Just under this line, you'll see the list of emoticons and associated images begin.

Click to Enlarge

10. Replace the emoticon codes with whatever you choose (see above screenshot).

11. Replace the URL for each emoticon code with its associated image (see above screenshot).

12. If you do not need all the image code lines provided in the original script, simply delete any extra ones. BE CAREFUL! ONLY DELETE EXTRA LINES THAT LOOK LIKE THIS: 

d[i].innerHTML = d[i].innerHTML.replace(/\/nobigdeal/ig,"<img style='border: 0; padding:0' src='http://farm2.static.flickr.com/1427/712360170_9c2a21ab5b_o.gif'/>")

13.  Save your template and you're done!

Voila! You now have custom emoticons in all your Blogger posts! :yahoo:

To use your emoticons in posts, simply write the code for the emoticon you want to use and it will be converted to the associated image after you publish your post (or if you preview it).

 

Click to Enlarge

Click to Enlarge

If you have any questions or comments, please feel free to leave them below or contact me. :ahoy: